Horizontal Scroll Section

Create a horizontal scroll section. A section where vertical scrolling moves a row of panels sideways: the section pins to the viewport, and scroll progress drives the horizontal travel; when the last panel arrives, the pin releases and the page continues normally. Implementation: an outer section whose height equals the horizontal distance to travel (roughly the track width, e.g. 250-300vh for 4 panels); inside, a sticky container (position: sticky, top: 0, height: 100vh, overflow: hidden) holding a flex track of panels. Compute progress = section scroll offset / (section height - viewport height), 0 to 1, and set transform: translateX(-progress * maxShift), where maxShift = track width - viewport width. Update via a requestAnimationFrame-throttled scroll handler, transform only, will-change: transform on the track. Design: panels at 60-80vw with visible gaps, so the next panel peeks and invites scrolling. Skip the effect entirely on mobile and under prefers-reduced-motion: render the panels as a normal vertical stack (or a native overflow-x scroller). Horizontal sections hide content from anyone who can't complete the gesture, so always provide that fallback. 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.