How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Pin: the section holds the screen for 3 screen-heights of scrolling, then scrolls away.
- Words: over the middle half of the pin (25% to 75%), the heading's words switch on one by one, in order. Before 25% none are showing, and after 75% all are.
- Tags: six rows of pill tags, spread down the section (space-around) with uneven top offsets, in a band 150% of the screen wide and centred, so rows run off both edges. - Over 6 screen-heights, starting when the section's top enters the bottom of the screen, each row slides right by a share of its own width: 30%, 40%, 25%, 35%, 20% and 25%. - Both the words and the tags follow the scroll with a short 1-second catch-up, so they glide rather than jump.
- Look: the heading is 96px heavy condensed uppercase (line-height 0.85), half the width with 44px padding. Tags are 13.6px mono uppercase with 4px × 8px padding and 6px corners, cycling through three pastel colours, and they sit above the heading.
- Under 1000px: the heading is 48px and 90% wide, the padding is 32px, the tag band is 300% of the screen wide, and the first and third rows sit closer to the top.
- Fallbacks: reduced motion and no JavaScript show the whole heading and still tags, with no pin.