Text effects

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

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

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: text, stagger, duration

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