Fieldbook
Sign in

Scroll

Blur fade reveal

Content that arrives out of focus and transparent, then sharpens into place the first time it scrolls into view without shifting a single pixel.

Using Blur fade reveal

Content that arrives out of focus and transparent, then sharpens into place the first time it scrolls into view without shifting a single pixel.

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: blurAmount, duration, delay, threshold, startOpacity

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

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 entrance wrapper
1880Scroll entrance wrapperScrollA wrapper that keeps its children parked off position until they scroll into view, then plays one eased arrival and never repeats it.
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.
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.
Enter view reveal
1855Enter view revealScrollBlocks that slide and fade in the moment they cross into view and reset themselves once they leave, so the reveal plays again on every pass.
Scroll dim text reveal
2838Scroll dim text revealScrollA paragraph sits dimmed and brightens word by word in lockstep with scroll progress, then dims again as you scroll back.