How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Card: 30vw × 85vh, centred, cropped towards the top of the photo. Behind it, two photos half its size fan out: the left one tilted -20° and set 55% down, the right one tilted 20° and set 45% down, each pushed halfway past the card's edge. A small rotated label sits by the card's top-left corner.
- Word: 22vw thin uppercase in the accent colour, centred over everything, one mask per letter. Hovering it scales the card photo to 1.03 and swings the side photos to ±10°, 40% out and a little higher (0.5s, ease-in-out).
- Counter: a rotated "1 ──── 3" at the top right, whose number rolls to the current project with a small overshoot.
- Intro (about 6.3s, strong ease-in-out): 1. 0.5s: the counter under the photo runs 0 → 100 over 1.5s while the line beside it draws out (from 1s). 2. 2.3s: the black top and bottom halves slide apart (1.5s). 3. 2.5s: the loader fades (0.5s). From 3s the photo gains its colour (1.5s). 4. 3.3s: the card grows from 25vh tall at 75% width to full size. The photo inside settles from an oversized, raised crop (1.5s). 5. 4.8s: the word's letters rise in 0.1s apart, the side photos fan out, and the label, counter and nav fade in (1.5s).
- Next project (down), about 3.2s: - The label slides out and the side photos fold back behind the card and dim (0.7s). - From 0.2s, the card rises off the top while fading to 50% (1.5s), and the word's letters drop up and out, 0.1s apart (1s). - The photos and word then change. The card rises back in from below to the centre (1.5s). The side photos fan out again for its last 0.7s, and the label slides back.
- Previous (up): the same in the other direction. Both loop around.
- Under 1000px: the card is 70vw × 60vh and a swipe up or down changes project.
- Fallbacks: reduced motion skips the intro and swaps projects instantly.