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 />

Tested Tier 1 · Render + props

Render Behavior A11y Keyboard Scale E2E

12 tests across 2 files. Auto-generated from the test suite.

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.

Prop	Type	Default	Description
Text	string	string.Empty	The text to reveal, split on whitespace into individually-animated words.
Stagger	int	80	Delay in milliseconds added per word index, so later words reveal after earlier ones. Default 80.
Threshold	double	0.3	Fraction of the element that must be visible in the viewport before the reveal triggers, passed to the underlying IntersectionObserver. Clamped to [0, 1]. Default 0.3.
Class	string?	—	Additional CSS classes merged onto the root <span>.
AdditionalAttributes	Dictionary<string, object>?	—	Captures any unmatched attributes and applies them to the root <span>.