Sticky Pin Section

Create a sticky pin section with swapping content. A section that pins to the viewport while the user keeps scrolling, and its content advances through phases driven by scroll progress; when the phases are done, the pin releases and the page continues. Implementation: an outer section about (number of phases)x viewport height; inside it, a sticky container (position: sticky, top: 0, height: 100vh). Compute progress = section scroll offset / (section height - viewport height), 0 to 1, and map it to a phase index: floor(progress * phaseCount), clamped. When the phase changes, crossfade the content: outgoing fades and rises -14px, incoming fades in from +14px, 220ms ease-out (with an exit-then-enter sequence so they don't overlap). Add phase dots (small circles, active one in the accent color) so users sense progress, and keep each phase's content roughly the same size to avoid jumps. Under prefers-reduced-motion, skip the pin entirely: render the phases as normal stacked sections. 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.