How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Timing curve: every scroll-driven value runs through smoothstep(p) = p² × (3 − 2p), and follows the scrollbar with about 1s of catch-up, so movement feels weighty rather than glued to the wheel.
- Hero cards (in): three 5:7 cards, 16px apart, in a row 35% of the page wide and centered. They scale 0 → 1 on load (0.75s, 0.1s apart, strong ease-out). Each bobs up 5% and back every 2s, offset by 0.25s.
- Hero cards (out): over the first 75% of the hero's height they move down 400% and shrink to 0.75. The whole group fades to 50%. The left card also slides 90% right and tilts −15°, and the right card slides 90% left and tilts 15°. Each card starts 9% of the scroll after the previous one, so they peel away in turn.
- Services pin: the section pins for 4 screen heights. Its progress runs from the moment its top enters the bottom of the screen until 4 screen heights later. - Heading: rises from translateY(300%) to 0 over 90% of that progress. - Cards (card 2 starts 5% later and card 3 10% later): - _Falling in:_ they start at a quarter size, stacked above centre and fanned (the outer ones at ±100% and ∓5°). They fade in over the first 20%. - _Landing:_ they drop from −100% to 50% below centre while growing to 75% (to 40%), then settle at 0 and full size (to 60%). - _Flip:_ they spread to their places, straighten, and rotate 180° around the vertical axis to show the back (60% to 100%). - The window: the cards live on a fixed layer that is only visible through the services section, so the section scrolls up over cards that are already in place, like a window sliding over them.
- Card backs: white, with the title row at top and bottom, and six rounded list rows in the soft grey between them.
- 1000px and narrower: no scroll animation. The hero cards just bob, and the services show only the card backs, stacked and centered (400px max), with the heading in place.
- Fallbacks: reduced motion shows the finished state everywhere. Without JavaScript the services show the card backs as on mobile.