How it behaves
Exactly what the prompt builds — every timing and easing is specified, so the result matches the demo.
- Section: ground #08090B, 56px top and 80px bottom padding. Inside a 1440px max-width container with 32px side padding: two columns 210px apart. Left column flex: 1.25, right column flex: 1.
- Left: the headline in Bebas Neue 64px, line-height 0.9, letter-spacing -0.02em, color #E4E6EA, inside a position: sticky; top: 176px block so it stays in place while the stats pass.
- Right column starts 217px lower. Each stat is right aligned: the number (Outfit 300, 60px, line-height 0.9, letter-spacing -0.02em, periwinkle #8FA3FF, never wraps) sits in a mask (overflow: hidden, padding-bottom: 0.15em so descenders are not cut), then the label 32px below (Outfit 300, 24px). Between stats: a 1px rule rgba(130,130,130,0.55) with 92px above and below.
- When each stat is 14% into view (its top passes 86% of the viewport height; checked on scroll, once, and elements scrolled past in one jump are revealed too): the number moves from translateY(115%) to 0 over 900ms cubic-bezier(0.22, 1, 0.36, 1) while counting up for 900ms with ease-out cubic 1 - (1-p)^3. The label rises from translateY(115%) and opacity: 0 over 900ms with a 180ms delay. Each rule scales from 0 to 1 from its right edge over 900ms.
- The count keeps any prefix and suffix in the markup: "2,600,000+ m" counts the number and keeps "+ m". Numbers are grouped with en-US (1,150,000, not 11,50,000).
- Headline twinkle: one span per letter, shuffled, transition-delay: slot × min(18, 820 / letters) ms, each letter fading in over 340ms.
- Under 992px: single column with an 88px gap, the headline is no longer sticky, the right column has no top padding, numbers 42px on phones, labels 18px, rules 48px apart. Long numbers never break across lines.
- Fallbacks: the real numbers are in the markup, so without JavaScript everything shows in its final state. With reduced motion, the final numbers are written immediately and everything is visible.