Dia Text Reveal

A horizontal color band sweeps across text with a gradient shine, then settles on your theme foreground color.

Examples

Custom gradient

Override colors for a shorter or softer palette on a single line of text.

Rotating phrases in a heading

Pass text as an array and set repeat to cycle strings after each sweep. You can place static words in the same <h1> (or paragraph) before the component—no extra layout wrappers are required for basic inline use.

Use fixedWidth when the strings differ a lot in length and you want to avoid horizontal layout shift (not shown in this example).

Duration and delay

Slow the sweep with duration, or add a short delay before the band moves.

Installation

CLIManual

Usage

Props