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 4 screen heights of scrolling (height: 500svh wrapper, 100svh sticky stage). Progress runs from 0 at the top of the pin to 1 at the end.
- Reveal (progress 0 to 0.7): the words go in order with 15 words overlapping, so it reads like a wave moving through the text. - Each word's pill fades in (opacity 0 to 1). - In the last 10% of its turn the pill background fades out while the word's text fades in (on a square-root curve, so it pops rather than creeps).
- Fold back (progress 0.7 to 1): words turn back into pills in order, 5 at a time.
- Keywords: any word you list gets a coloured capsule behind it with dark text, in one of three accent colours.
- Layout: - Hero: a 100svh intro with an 80px headline, 70% wide. - Pinned stage: the text column is 60% wide and centered, with 40px paragraphs at line-height 1 and 32px between paragraphs. - Pills: fully rounded, 1.6px by 3.2px padding, 3.2px gaps.
- Under 1000px: 32px headline at 90% wide, a 90% text column and 20px paragraphs.
- Fallbacks: reduced motion and no JavaScript show the finished paragraphs with their keyword capsules and no pin animation.