Clothing rail

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useCallback,  useEffect,  useEffectEvent,  useId,  useLayoutEffect,  useRef,  useState,  type KeyboardEvent as ReactKeyboardEvent,  type PointerEvent as ReactPointerEvent,} from 'react';import { ITEMS, KIND_LABEL, type RailItem } from './data';import { Garment } from './garments';import { createMotion, type Motion } from './rail-motion';import { useAutoplay } from './use-autoplay';import styles from './clothing-rail.module.css';export type { RailItem } from './data';/*

/* Clothing rail (clothing-rail.tsx): a shop's page in a phone-shaped column, 360 units wide and   640 tall. Every size is in --u, a 360th of the column's width (a container query), so the page   is the same at any width; the column fills a narrow stage, and on a wider one stands in its   middle at 400 px.   Colours are the tokens below, light-dark(light, dark) where the two differ: the component takes   the color-scheme it inherits from the page (light unless the page says otherwise), or the one   its colorScheme prop sets (data-color-scheme). The garments keep their own colours at night;   the paper, the ink and the chrome dim around them.   Memory. The column is one layout boundary. The garments move by transforms that the script   writes one frame at a time, and only while something moves; each turns as a small 3D box of   three product images. The marquee is one compositor animation, paused while off screen. */.root {  /* The page and the stage around the column. */  --paper: #f3f4ed;  --stage: #e6e7df;  /* The words: ink, the softer grey of the hint, the faint one of the caption and counts. */  --ink: #0b0c08;  --soft: #2a2b27;  --muted: #74766d;  --faint: #9a9d91;  --tab-off: #8c887f;

// Copyright (c) 2026 Bruno Delorence. MIT License.import type { CSSProperties, Ref } from 'react';import type { RailItem } from './data';import styles from './clothing-rail.module.css';/** Three transparent product renders share the same hook and rotate with the hanger. */export function Garment({  item,  brand,  logoSrc,  turnRef,  className = '',}: {  item: RailItem;  brand: string;  logoSrc: string;  turnRef?: Ref<HTMLDivElement>;  className?: string;}) {  return (    <div      ref={turnRef}      className={`${styles.turn} ${className}`}

/* * The rail's motion: where each garment hangs, which way it faces, and how it swings, written * straight into transforms one frame at a time, and only while something moves. * * Moving to another garment plays in four steps, each picking up from wherever the last one was * when a new press comes in: *   away    the garment in front turns side on (170 ms, easing in); *   slide   the rail carries every garment along (260 ms for one step, 110 ms more per extra one); *   hold    a beat, all of them side on (140 ms); *   toward  the new one turns to face the reader (320 ms, easing out), with a kick on its hanger. * * - Positions: the front garment hangs in the middle, its neighbours under the rail's ends 142 *   units either side (the column is 360 units wide), and the rest 64 units apart beyond them. * - Garments off to the sides all face the same way, as on a real rail: turned a quarter, so the *   one that comes in turns the same way the one that leaves turned. * - The side face fades in from a third of the way round, so edge on it is never a bar. * - Swing: a spring per rail pulls every hanger towards an angle against the rail's speed, so the *   clothes trail behind as they move and swing back when it stops; the front one has a spring of *   its own, kicked as it turns. */export type MotionNodes = {  slots: (HTMLElement | null)[];  swings: (HTMLElement | null)[];

// Copyright (c) 2026 Bruno Delorence. MIT License./** Transparent 3D product renders, aligned to the same hanger hook. */export type GarmentKind = 'hoodie' | 'crewneck' | 'zip';export type RailItem = {  name: string;  kind: GarmentKind;  /** Fabric colour, for the catalogue metadata. */  color: string;  colorName: string;  description?: string;  /** Transparent front, side and back images with matching framing. */  images: { front: string; side: string; back: string };  /** Ink used for the logo and the brand wordmark. */  printColor?: string;  href?: string;};export const KIND_LABEL: Record<GarmentKind, string> = {  hoodie: 'Hoodie',  crewneck: 'Crewneck',  zip: 'Zip jacket',};

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;