Fieldbook
Sign in

Scroll

Sticky zoom hero

A 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.

Using Sticky zoom hero

A 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.

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: headline, accent, maxScale, maxBlur, textLift

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

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.
Stacked blur fade
1891Stacked blur fadeScrollA scroll panel edge that dissolves into the panel colour through several stacked backdrop blurs instead of one flat blur band.
Parallax plate gallery
1873Parallax plate galleryScrollA 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.
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.