About Line Text Reveal
Overview for Line Text Reveal Component
LineTextReveal animates any heading line by line. A solid color bar wipes in to cover each line, then slides off to reveal the text underneath — and every line fires in sequence with a stagger you control. Crisp, GPU-friendly, and works on a single word or a full multi-line headline.
Features
Line-by-line sequential reveal with adjustable stagger
Two-phase bar wipe (covers, then uncovers) for a clean, intentional look
Plays when scrolled into view, or on page load
Left-to-right or right-to-left direction
Full typography control via the native Font picker
Independent colors for text, bar, and background
Tune duration, start delay, easing, and line spacing
Descenders never clip — tall, short, and accented words render fully
Property controls
Text — type your copy; each new line animates in sequence
Font — family, weight, size, line height, letter spacing
Text / Bar / Background — independent colors
Align — left, center, right
Direction — left → right or right → left
Trigger — when in view or on load, replay once or every view
Duration · Stagger · Start delay · Easing · Line gap
How to use
Drag LineTextReveal onto the canvas.
Type your headline in the Text field — press Enter for each new line.
Pick your font and colors, then set duration and stagger to taste.
Preview to see it play. On the canvas it shows the final revealed state, so your layout stays readable.
