PinnedShowcase.
A scroll-pinned narration section: the whole section is `position: sticky; top: 0` at 100dvh inside a wrapper several viewports tall, and scroll progress through that wrapper picks the active copy frame. Frames cross-fade in a single grid cell beside one fixed `visual` slot, and a progress bar tracks position. The visual never swaps — it listens for the `dash:frame-change` event instead.
When to use
When one product visual should narrate several beats — a feature deep-dive or "how it works" where the screen stays put and the copy beside it changes as the reader scrolls. The visual is yours to supply and yours to animate: the section only tells you which frame is active. Use StepTimeline for a plain sequential list with no pin, and BigQuote / a static product shot when there is only one beat.
The card
Banking's been a chore Now it's a head start
Connect
Link your carrier accounts
One OAuth handshake per carrier. No CSV uploads, no credentials in a spreadsheet.
Audit
Every invoice checked
Each charge is re-priced against your contract the day it posts.
Recover
Claims filed and tracked
We file, chase, and reconcile each credit back to the invoice that earned it.
The whole section pins — position: sticky; top: 0 at 100dvh inside a wrapper
several viewports tall — and raw scroll math on a passive listener picks the active frame; there
is no IntersectionObserver and no threshold to tune. All three frames live in one grid cell
(grid-area: 1 / 1) and cross-fade on opacity over 500ms; frame 2 of 3 is showing
above. The visual slot never swaps: it subscribes to the dash:frame-change event the section dispatches on window. Under
reduced motion every frame is set to opacity: 1 — stacked in the same cell.