How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Pin: the section sticks for 5 screen heights (a 600svh wrapper with a 100svh sticky stage). Progress runs 0 to 1 and trails the scrollbar with about 1s of catch-up.
- Titles: five names sit in a row that is five screens wide, each centered in its own screen and lifted half a line. Across the pin the row moves left by four screen widths, so each name passes through the centre in turn.
- Flying cards: ten 300 × 300px rounded cards are scattered over a 3D layer (200% of the screen in each direction, perspective: 500px). - Each card travels from z = −1500 to z = +1500, flying out of the distance and past the camera. Card *n* starts 7.5% of the pin after card *n − 1*. - A card's trip lasts half the pin. It pops from scale 0 to 1 in the first tenth of that trip.
- Progress rail: a dark pill 32px from the right edge holding the numbers 01 to 05, each followed by ten thin ticks. A tick turns fully opaque once the progress passes its share (fading 0.3s), and stays at 20% before that.
- Footer: three mono labels spread across the bottom with 32px padding.
- 1000px and narrower: no pin. The names stack in a column, each with a framed 150px-tall image above it, and the rail and flying cards are hidden.
- Fallbacks: reduced motion and no JavaScript use the stacked layout.