Scroll

Parallax plate gallery

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.

Kestrel Ridge

Wind-carved sandstone, first light

Marrow Fjord

Glacial melt, deep channel

Salt Hollow

Dry lakebed, cracked floor

Thistle Bank

River terrace, late bloom

Copper Reach

Tidal flat, low water

Using Parallax plate gallery

Parallax plate gallery uses the wide preview frame with a dark theme setting.

Customize the preview

These controls are passed to the demo. Defaults and limits describe the preview; consult the implementation for its full prop API.

Control	Type	Default	Preview limits
`accent`	`color`	`#F5C542`	No additional limit in the metadata.
`panels`	`number`	`5`	From 3 to 8; step 1
`depth`	`number`	`240`	From 40 to 500; step 20
`snap`	`boolean`	`true`	No additional limit in the metadata.
`showProgress`	`boolean`	`true`	No additional limit in the metadata.

Which frameworks are available for Parallax plate gallery?

Parallax plate gallery is available for React, Vue, Svelte, Astro, HTML. The live preview uses React; the source observations below apply to index.tsx. Check the selected port before relying on the same interactions.

What does Parallax plate gallery depend on?

The React metadata lists these npm dependencies beyond React: motion.

What accessibility details are visible in Parallax plate gallery?

The React source for Parallax plate gallery includes: attributes and handlers (aria-hidden, aria-label, tabIndex); explicit roles (list, listitem). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Parallax plate gallery handle reduced motion?

Parallax plate gallery reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: behavior: reduceMotion ? "auto" : "smooth". Check the full implementation, shared styles and selected port with reduced motion enabled; these observations do not establish that every animation stops.

Connect your agent

Related open components

Still of the Sticky zoom hero component, a Fieldbook UI component in Scroll.

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.

Still of the Blur fade reveal component, a Fieldbook UI component in Scroll.

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.

Still of the Curtain scroll reveal component, a Fieldbook UI component in Scroll.

2832Curtain scroll revealScrollA row of images that each uncover from behind a sliding curtain mask as scroll progress carries them into view, and re-cover when they scroll back out.

Still of the Scroll snap word list component, a Fieldbook UI component in Scroll.

2840Scroll snap word listScrollA tall list of words scrolls inside a fixed window and the word crossing the center band lights up with a spring pop while the rest stay dim and tilted.

Still of the Drifting particle field component, a Fieldbook UI component in Backgrounds.

1952Drifting particle fieldBackgroundsA slowly tumbling cloud of small round points, each drifting on its own path, with the whole cloud leaning away from the pointer.

Still of the Masonry flow component, a Fieldbook UI component in Layout.

1532Masonry flowLayoutA masonry wall that packs tiles of varying height into columns, lifts each one in as it scrolls into view, and re-seats the whole grid when the column count changes.