Text effects

Scroll float reveal

Scroll float reveal: Heading characters float up from below and settle into shape as their section scrolls through the viewport, scrubbed directly to scroll position.

Scroll scrubbed heading

Changelog · vol. 14

Every glyph in this heading tracks the scrollbar instead of a clock. Push the list down and the letters climb out of their baseline one after another, stretching back into proportion as they go. Pull it back up and they sink and stretch again.

v2.7.0 · Scrub timeline snaps to whole frames, so recorded captures stop strobing between two states.

v2.6.3 · Character stagger now measures from the first glyph that leaves the band, not from page load.

v2.6.0 · Reduced motion renders the settled heading outright, no ramp, no waiting.

The effect reads best on headings of eight to thirty characters. Longer lines stagger so far that the tail is still rising while the head has already settled, which can be a look, but usually is not.

Fig. 14 · settle band spans the middle half of the viewport

Using Scroll float reveal

Scroll float reveal uses the wide preview frame with a light/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
`text`	`text`	`Float Into View`	Up to 30 characters
`stagger`	`number`	`0.03`	From 0 to 0.1; step 0.01
`duration`	`number`	`1`	From 0.3 to 2; step 0.1

Which frameworks are available for Scroll float reveal?

Scroll float reveal 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 Scroll float reveal depend on?

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

What accessibility details are visible in Scroll float reveal?

The React source for Scroll float reveal includes: attributes and handlers (aria-hidden, aria-label). These are source observations. Verify accessible names, focus order and keyboard behavior in the composed page.

How does Scroll float reveal handle reduced motion?

Scroll float reveal reads the motion preference in its React source through matchMedia(prefers-reduced-motion). 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 Cascading Letter Reveal component, a Fieldbook UI component in Text effects.

2824Cascading Letter RevealText effectsA headline that reveals itself letter by letter with a soft rise and fade as it enters view, then holds steady once finished.

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.

Still of the Wavy letter heading component, a Fieldbook UI component in Text effects.

2464Wavy letter headingText effectsA heading whose letters ride a slow wave, each one lagging the last so the line ripples like a flag without losing its baseline.

Still of the Physics drop text component, a Fieldbook UI component in Text effects.

2817Physics drop textText effectsA sentence breaks into words that fall, tumble and bounce under simulated gravity, then settle and can be flicked around with the pointer.

Still of the RGB glitch heading component, a Fieldbook UI component in Text effects.

2810RGB glitch headingText effectsA heading that splits into red and cyan offset copies clipped to jumping horizontal bands, flickering like a broadcast signal losing sync.

Still of the Signal jitter heading component, a Fieldbook UI component in Text effects.

2038Signal jitter headingText effectsA bold headline drawn in three tinted layers that jaggedly nudge apart and snap back together like a broken video signal.