How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Section: full screen (height: 100svh; min-height: 640px), overflow: hidden, ground and ink colors come from the active look and fade over 700ms cubic-bezier(0.65, 0, 0.35, 1).
- Giant word: centered behind everything, Archivo 900, font-size: min(17vw, 30svh, 112vw / letters) so long words still fit, line-height 0.8, letter-spacing -0.04em, uppercase, at 18% opacity of the ink color. Every letter sits in its own overflow: hidden mask. All words are stacked in the same place; each has a state: - in — letters at translateY(0), moving over 800ms cubic-bezier(0.22, 1, 0.36, 1) with a delay of 120ms + index × 40ms. - out — letters move to translateY(-105%) over 600ms cubic-bezier(0.65, 0, 0.35, 1), index × 30ms apart. - wait — letters parked at translateY(105%) with no transition, ready to come in from below.
- Photo: an arch (border-radius: 999px 999px 20px 20px), width: clamp(220px, 24vw, 360px), aspect-ratio: 3 / 4, centered. All photos are stacked. in: opacity 1, no transform, over 900ms expo-out with a 150ms delay. out: opacity 0, translateY(-10%) scale(0.94) over 600ms. wait: opacity 0, translateY(14%) rotate(-5deg) scale(0.96), no transition.
- Detail circle: a 34% wide circle overlapping the photo's lower left corner (left: -18%; bottom: 8%), 6px ring in the ground color. in: rotate(0) scale(1) over 800ms cubic-bezier(0.34, 1.56, 0.64, 1) (a small overshoot) with a 300ms delay. out: rotate(-120deg) scale(0.3), opacity 0 over 500ms. wait: rotate(120deg) scale(0.3), opacity 0.
- Copy (bottom left): counter 02 / 04, the look's name and a two-line description. It swaps by fading out and rising 12px (300ms), then fading back in (500ms).
- Controls (bottom right): one 28px round swatch per look filled with its ground color, with a 1px ring in the ink color; the active swatch grows to 36px. Then prev/next arrow buttons (44px circles). ← and → keys work while the hero has focus or is hovered. The arrows loop.
- Phones (under 768px): the photo is min(58vw, 40svh) wide, the word min(21vw, 22svh, 112vw / letters), and copy and controls stack at the bottom with 16px side padding.
- Accessibility: swatches are a role="tablist" of buttons with aria-selected and the look's name as the label; the photo stack is aria-live="polite" so screen readers hear the new look.
- Reduced motion: every change becomes a 200ms crossfade with no movement.