How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Halves: the word is drawn twice on top of itself, filling the middle half of the screen. One copy is clipped to the top half of the section and the other to the bottom half.
- Converge: progress runs from the moment the section's top enters the bottom of the screen until its bottom leaves the top. Over the first 65% of that, the top copy scales 1.5 → 1 and the bottom copy scales 2 → 1, both from the centre, tied to the scroll position. After that the word stays whole.
- Band: a 25px-tall strip in the mid-grey colour across the exact middle, with five 20px uppercase keywords spread across it (32px side padding).
- Word: a single heavy uppercase word in the accent colour, fitted to the box (like object-fit: contain) on a black section.
- Under 1000px: the section is 75% of the screen tall and the keywords wrap and centre with 32px gaps.
- Fallbacks: reduced motion and no JavaScript show the word whole.