Pinned Scroll Gallery

The ready state at landing-page scale. Scroll inside the box: the section parks at the top, the next two and a half stage-heights of vertical scrolling pull the track sideways, and the pin releases the moment the runway runs out. The rail fills with progress, the counter names the leading card, and the dots are real snap points — click or arrow-key one and the scroll jumps there. Nothing is captured: the scrollbar is still yours, and a flick past the section behaves like a flick past any other block. The line below is fed by onActiveChange, the callback the component fires when the leading item changes.

onActiveChange last reported item 1 of 8

↓ scroll inside this box — the section pins and the gallery travels

page content above the pinned section

Featured

Eight pieces, one scroll

0108· Aurora

the pin releases here and the page carries on

snap={false} — the same pinned travel with the snap points removed. The rail becomes a plain progress bar, the dot group disappears from the tab order entirely, and the card you land on is wherever you stopped scrolling. Use it for a continuous filmstrip; keep snap on whenever the items are things a visitor might want to get back to.

↓ scroll — continuous travel, no snap targets

above

No snap

Continuous filmstrip

0108· Aurora

below

pin={false} — byte for byte what prefers-reduced-motion: reduce renders. The section collapses to one stage height, reserves no runway, and the track becomes an ordinary CSS scroll-snap scroller you drag, wheel or tab through. Every card, the rail, the counter and the snap dots still work; only the choreography is gone. Turn reduced motion on while this page is open and the two pinned sections above switch to exactly this, live — the flag is read through a matchMedia listener, not once at mount.

Reduced motion

A plain horizontal scroller

0108· Aurora

Items with no image and no href. The cover area falls back to a panel tinted with that card's var(--chart-N) accent instead of a broken image, and the card renders as a plain <div> — no pointer cursor, no hover lift, no focus ring on something that goes nowhere.

No media

Typographic cards

0105· Aurora

Backgrounds
Aurora
A slow ribbon of light behind the fold, painted from chart tokens and nothing else.
Media
Photo Stack
A tilted deck — drag, click or arrow-key the top card away and it cycles to the bottom.
Media
Marquee
A seamless belt for logo walls, pausing under the pointer and fading at both edges.
Display
Bento Grid
A layout that gives every feature the room it deserves and none of the room it doesn't.
Navigation
Dock
Magnified icons that answer to the pointer and stay entirely reachable from the keyboard.

The loading state: four skeleton cards at the real card width, so the stage never resizes when the data lands. The pulse is dropped under reduced motion; the shapes stay.

Loading state

Track being built

The empty state — reached both by status: "empty" and by a ready payload with zero items, because a gallery with nothing in it is empty however it got there. No runway is reserved, so an empty section never leaves a dead column of scroll behind.

Empty state

Nothing published yet

Nothing on the track yet

Publish an item and it becomes the first stop the section scrolls through.

The error state with a real onRetry: press Try again and the ready payload takes over in place — the recovery path, driven by a click rather than a timer.

Error state

Nothing to travel through

Couldn't load the gallery

The data source didn't respond, so the track has nothing to travel through.

Input, motion and cleanup policy — prose, not an interactive case.

Touch — nothing is captured and nothing is preventDefault-ed, so a swipe scrolls the page exactly as it would without the component. On coarse pointers the hover lift and the cover zoom are switched off, because a hover state that sticks after a tap is worse than no hover state at all.
Keyboard — every card with an hrefis a real link with its own focus ring. While pinned, the track is clipped rather than scrollable, so focusing a card off screen is translated into a vertical jump to that card's snap point (only for :focus-visible, so a mouse click never yanks the page). The dot rail is one tab stop with a roving tabindex: ←/→ walk the snap points, Home and End go to the ends.
Work per frame — one passive scroll listener in the capture phase covers the page and every nested scroller, coalesced into a single requestAnimationFrame that reads geometry once and writes a transform. An IntersectionObserver cancels the pending frame while the section is off screen, and unmount tears down the rAF, both listeners, both observers and the two matchMedia listeners — then hands the track back with no transform of ours left on it.

Pinned Scroll Gallery

Aurora

Photo Stack

Marquee

Bento Grid

Dock

Number Ticker

Gradient Mesh

Tilt Card

Aurora

Photo Stack

Marquee

Bento Grid

Dock

Number Ticker

Gradient Mesh

Tilt Card

Aurora

Photo Stack

Marquee

Bento Grid

Dock

Number Ticker

Gradient Mesh

Tilt Card

Aurora

Photo Stack

Marquee

Bento Grid

Dock

Aurora

Photo Stack

Marquee

Bento Grid

Dock

Number Ticker

Gradient Mesh

Tilt Card

Aurora

Photo Stack

Marquee

Bento Grid

Dock

Number Ticker

Gradient Mesh

Tilt Card

Aurora

Photo Stack

Marquee

Bento Grid

Dock

Number Ticker

Gradient Mesh

Tilt Card

Aurora

Photo Stack

Marquee

Bento Grid

Dock