Scroll-Shrink Hero

Build a hero that shrinks into a sticky header on scroll. Structure: the page opens with a tall hero block: a big centered headline (one word in the accent color). The hero area is position: sticky, top: 0, so it stays pinned while content scrolls under it. The shrink: map scroll progress over the first ~120px of scrolling to a 0-1 value and drive everything from it directly (no springs - it must track the scrollbar exactly): - headline font size interpolates from its hero size down to header size (e.g. 42px to 16px) - the bar height interpolates from ~84px to ~34px - the bar background fades in from transparent to 92% paper with a backdrop blur - a bottom hairline fades in with it Use transform/font-size interpolation computed from scrollY (requestAnimationFrame or a scroll listener with passive: true). Clamp progress to [0, 1] so overscroll doesn't break it. Content below: regular sections so there's something to scroll against. Accessibility: the headline stays real text at every size. Under prefers-reduced-motion, skip the interpolation and jump between the two states at a threshold. Colors as tokens: paper, ink, one accent. The magic is that the hero and the header are the same element - never two swapped elements. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.