# TextReveal

Source: https://lumeo.nativ.sh/components/text-reveal

# TextReveal

Word-by-word reveal animation on scroll.

## When to Use

-   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).

Preview Code

Default Reveal

Build beautiful Blazor UIs faster than ever before.

Copy Code

Preview Code

Fast Stagger

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

Copy Code

Preview Code

Slow Stagger

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

Copy Code

Preview Code

Hero Heading

The Blazor component library designed for modern applications.

Copy Code

## API Reference

### TextReveal

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.

## Related Components

-   [BlurFade](/components/blur-fade) — Blur and fade-in animation triggered on mount or scroll.
-   [NumberTicker](/components/number-ticker) — Animated count-up from zero to a target number.
-   [Marquee](/components/marquee) — Infinitely scrolling horizontal band of children.