# Kinetic scroll type hero > **Build brief for a coding agent.** Rebuild this piece in the reader's stack. If they haven't said which stack, ask once, then default to semantic HTML + CSS + a little vanilla JS. Match the numbers below; don't "improve" them. ## What it is The top of a site for Pacekeeper, an invented chip-timing company for road races. The headline "Split every second." is set in Anybody, a variable font with a width axis from 50 to 150, at up to 184px across three lines. The hero is pinned for the first 560px of scroll, and over that distance the three lines trade places in width and weight: the wide black first line goes condensed and light, the condensed light second line goes wide and black, the third line narrows. The pointer adds weight to whichever line it is nearest. The product sentence, buttons and race clock beneath a hairline never move, so the page stays readable while the type performs. ## Reference behaviour 1. Initial state (scroll 0): "SPLIT" at width 150%, weight 820, flush left; "EVERY" at width 62%, weight 300, indented 14vw; "SECOND." at width 112%, weight 880, right aligned, with the full stop in lime `#C8F25A`. 2. Scroll the page: the hero sticks under the 64px nav for 560px. A registered custom property `--s` runs 0 → 1 over that range (CSS scroll-driven animation on the root scroller). 3. As `--s` rises: line 1 width 150 → 55, weight 820 → 300, moves right 0 → 30vw. Line 2 width 62 → 150, weight 300 → 860, moves left 14vw → 0. Line 3 width 112 → 52, weight 880 → 680, moves left 0 → 4vw. Scrolling back reverses exactly. 4. After 560px the pin releases and a results table ("Lisbon Half, leaders at 15 km", five rows) scrolls up. 5. Pointer over the hero: each line gets `--pw` = 1 − (vertical distance from pointer to line centre ÷ 1.4 × line height), clamped at 0. Line 1 gains up to 80 weight, line 2 up to 500, line 3 loses up to 300. `--pw` is a registered number, so it eases over 420ms expo out. 6. Pointer leaves: all `--pw` return to 0 over 420ms. 7. The race clock "01:12:44.3" counts up in tenths (100ms interval) to show the product is live; the meta row dot pulses opacity 1 → 0.35 on a 1.6s cycle. 8. No scroll-timeline support: a passive scroll listener writes `--s = min(1, scrollY / 560)` in one rAF. Reduced motion: no scroll animation, no pointer response, no clock ticking, no pulse; the headline rests in its first-frame state. ## Structure ``` 1280 × 800 ┌──────────────────────────────────────────────────────────────────────┐ │ ◷ Pacekeeper Timing Live results Race directors Pricing [Book a demo] │ nav 64, sticky ├──────────────────────────────────────────────────────────────────────┤ │ • LIVE NOW: LISBON HALF, 11,402 ON COURSE CHIP TIMING SINCE 2014 │ meta 12px caps │ SPLIT (184px, wdth 150, wght 820) │ │ EVERY (wdth 62, wght 300, +14vw) │ │ SECOND▪ (wdth 112, wght 880, right) │ │ │ │ ───────────────────────────────────────────────────────────────────── │ hairline │ product sentence 16/1.55 [Book a demo →] [See Lisbon Half results] RACE CLOCK │ │ max 440px 01:12:44.3 │ └──────────────────────────────────────────────────────────────────────┘ .pin is 100vh − 64 + 560px tall; .hero inside it is sticky at top 64, height 100vh − 64 (min 736) padding 28 / 48 / 36 ``` - `