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. Progress runs 0 to 1 and follows the scrollbar directly (no lag).
- Word: a line of type, 28vw with −8px tracking, centered in a strip 2.5 screens wide. It slides left by (its width − the screen width) across the pin.
- Cards: five 325 × 500px cards with 16px corners and 16px padding, starting just off the right edge 10% from the top. - Card *n* starts 11.25% of the pin after card *n − 1*, and each crossing lasts half the pin. - During its crossing a card moves from 25% of its width right of its start to far off the left edge. That is 6.5 card widths × 1.25, stretched on screens wider than 1920px. - Its vertical offset and tilt follow four keyframes each, so every card takes its own wavy, tilting path (for example the first goes 10% → 50% → −10% → 10% down while turning 20° → −10° → −45° → 20°). - Cards are hidden until their turn.
- Card content: a 200px photo with 8px corners, then the name (40px heavy condensed uppercase) and a short description in white, spaced apart in the remaining 275px.
- Under 1000px: no pin. A 36px heading and the five cards stacked full width (up to 680px), each with a 240px photo.
- Fallbacks: reduced motion and no JavaScript use the stacked layout.