Fieldbook
Sign in

Scroll

Parallax plate gallery

A snapping vertical gallery where each plate's oversized index number drifts at a different rate to the plate itself, with a scroll progress rail along the bottom.

Using Parallax plate gallery

A snapping vertical gallery where each plate's oversized index number drifts at a different rate to the plate itself, with a scroll progress rail along the bottom.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: accent, panels, depth, snap, showProgress

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Pinned lateral gallery
1874Pinned lateral galleryScrollA section that sticks in place while your vertical scroll is spent dragging a row of panels sideways, then releases and lets the page continue.
Scroll expand stage
1881Scroll expand stageScrollA small rounded frame grows to fill the whole viewport as you scroll, its title lifting away while the article underneath fades up.
Scroll focus column
1882Scroll focus columnScrollA scrolling column where each row fades and shrinks as it leaves the reading band and comes back to full presence as it enters, so only the middle is ever fully solid.
Scroll progress rail
2839Scroll progress railScrollA hairline bar pinned to the top of a scrollable panel that fills left to right in exact sync with how far the content is scrolled, and drains back when you scroll up.
Sticky zoom hero
1892Sticky zoom heroScrollA hero panel that stays pinned while you scroll, pushing its backdrop toward you until it blurs out and hands the page to the text below.
Blur fade reveal
1843Blur fade revealScrollContent that arrives out of focus and transparent, then sharpens into place the first time it scrolls into view without shifting a single pixel.