How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Circle: the light panel is clipped to circle(r% at 50% 50%). The radius grows from 0% to 100% over four screen heights of scrolling, starting when the section's top enters the bottom of the screen.
- Pin: the section sticks for 6 screen heights. Progress runs 0 to 1 and trails the scrollbar with about 1s of catch-up.
- 0 to 30%: a strip four screens wide fades in from 0 to 1 and scales from 0.85 to 1, anchored 10% from its left edge. It holds a centered uppercase word at 55vw.
- 30% to 100%: the strip moves left by three screen widths, bringing its far end into view. - Five photos, each 25vw wide, are placed across the strip (top/left: 20% 5%, 50% 25%, 35% 50%, 20% 75%, 50% 95%). - Each photo also moves left by its own extra amount (800, 1200, 600, 1000 and 900px), which creates the parallax.
- Under 1000px: the photos are 50vw wide and everything else plays the same.
- Fallbacks: reduced motion and no JavaScript show the word inside a fully open panel without pinning.