Line Text Reveal

Overview for Line Text Reveal Component LineTextReveal animates any heading line by line.

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.

Line-by-line text reveal animation