Skip to content
Fieldbook
Menu
Sign in
EN

Scroll

Sticky zoom hero

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

Sticky zoom hero uses the full page 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.

ControlTypeDefaultPreview limits
headlinetextABOVE THE TREELINEUp to 40 characters
accentcolor#FF6A1FNo additional limit in the metadata.
maxScalenumber2From 1.1 to 3.5; step 0.1
maxBlurnumber14From 0 to 40; step 1
textLiftnumber80From 0 to 200; step 10
Which frameworks are available for Sticky zoom hero?

Sticky zoom hero 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 Sticky zoom hero depend on?

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

What accessibility details are visible in Sticky zoom hero?

The React source for Sticky zoom hero includes: attributes and handlers (aria-hidden, aria-label, tabIndex); explicit roles (region). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Sticky zoom hero handle reduced motion?

Sticky zoom hero reads the motion preference in its React source through useReducedMotion(). Preference-dependent expressions in index.tsx: effectiveBlur: reduced ? 0 : Math.min(40, Math.max(0, maxBlur)); effectiveLift: reduced ? Math.min(24, Math.max(0, textLift)) : Math.min(200, Math.max(0, textLift)); effectiveScale: reduced ? Math.min(1.06, Math.max(1, maxScale)) : Math.min(3.5, Math.max(1.1, maxScale)). 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 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 Parallax plate gallery component, a Fieldbook UI component in Scroll.
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.
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 Progressive edge blur component, a Fieldbook UI component in Layout.
2407Progressive edge blurLayoutA band pinned to one edge of a scrolling panel that blurs and fades its content gradually into the background instead of cutting it off at a hard line.
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 Scroll Progress Text Reveal component, a Fieldbook UI component in Text effects.
2220Scroll Progress Text RevealText effectsA long sentence sits pinned on screen while the page scrolls past it, and each word individually brightens from dim to fully lit as the scroll position reaches its turn.