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 10 screen heights. Progress runs 0 to 1 and trails the scrollbar with about 1s of catch-up.
- Frame: the panel is inset 16px with 32px corners, and a 16px frame of the page colour with 48px corners masks everything around it.
- 0 to 20%: the two 40px intro words move apart by 60% of the screen width each. The photo scales from 0 to 1 while the image inside settles from 1.5× to 1×. The photo is at 65% opacity over the dark panel.
- 20% to 25%: the intro words hide, and the label and the chevron lines fade in (0.3s).
- 25% to 95%: the list moves from just below the panel to just above it. - The names are 64px, 80px apart, and sit in a column that starts 15% of the screen in, clipped to a chevron pointing left. - The name nearest the vertical middle is at full opacity and the others at 35% (0.3s fades). The background photo switches to match. - On the right half, ten 200 × 150px thumbnails with 16px corners each take 30% of this stretch to travel a quadratic curve that starts 200px above the panel, bows out 500px, and ends 200px below. Each starts 8% after the last.
- After 95%: the label and lines fade out.
- Under 1000px: the names and lines are hidden. The thumbnails' arc shifts 64px right and everything else plays the same.
- Fallbacks: reduced motion and no JavaScript show the first photo full size with the label.