TextReveal

Word-by-word reveal animation on scroll.

Installation

dotnet add package Lumeo.Motion

One-time app setup (AddLumeo(), CSS & JS) is covered in the installation guide.

@using Lumeo

<TextReveal />

Create engaging hero headings or testimonial quotes that animate as the user scrolls into view.
Draw attention to a key value proposition in a long-form landing page.
Control the reveal pace with Stagger (ms between words) and Threshold (scroll visibility fraction).

Default Reveal

Build beautiful Blazor UIs faster than ever before.

Fast Stagger

Every word fades in at lightning speed with Stagger set to 40ms.

Slow Stagger

Each word takes its time revealing the message one by one.

Hero Heading

The Blazor component library designed for modern applications.

Threshold (interactive)

Threshold = 0.30 — scroll the text into view to trigger the reveal. Use the Replay button after changing the threshold.

This sentence reveals only when the right fraction of it enters the viewport.

Drag the slider to change how far into view the text must scroll before the reveal begins. A higher value means more of the element must be visible.

Stagger Speed (interactive)

Adjust the stagger interval (ms between words). Scroll down to see the reveal — or reload the demo.

Stagger = 80 ms

Each word waits just a little before it appears on the page.

Property	Type	Default	Description
Text	string	""	The text to animate. Split on whitespace into individual word spans.
Stagger	int	80	Delay in milliseconds between each word's reveal animation.
Threshold	double	0.3	Intersection Observer threshold (0.0–1.0). The animation starts when this fraction of the element is visible in the viewport.
Class	string?	null	Additional CSS classes for font size, weight, or color of the text container.