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 7 screen heights (an 800svh wrapper with a 100svh sticky stage). Progress runs 0 to 1 across the pin and trails the scrollbar with about 1s of catch-up.
- Photo grid (0 to 50%): a layer three screens tall with five rows of four 5:7 cells. The rows are spread top to bottom with 32px padding and 32px gaps, and the cells have 8px corners. Nine of the twenty cells hold a photo at 75% opacity and the rest are empty, so it reads as a scattered cloud. The layer starts 5% down and rises until it has fully left the top of the screen.
- Headline: 96px heavy condensed uppercase, half the page wide, centered, sitting above the grid.
- Mask (25% to 75%): the big photo is masked by the shape. The mask size grows from 0% to 475% of the screen, and the photo inside scales from 1.25 down to 1.
- Caption (75% to 95%): each word switches on in turn. It is centered, 40% wide, in the light colour.
- Bars: small glyphs in the top corners, and two mono labels in the bottom corners, with 44px padding.
- 1000px and narrower: the grid is 250% of the screen wide, centered with 16px gaps, and the headline and caption are 90% wide.
- Fallbacks: reduced motion and no JavaScript show the big photo and caption without the pin animation.