Text Reveal
GSAP SplitText reveals by character, word or line.
Text Reveal animates headings and copy piece by piece with GSAP SplitText: letters rising out of a mask, words focusing in, lines fading up, on mount or when scrolled into view. The full text is in the server HTML, so search engines index it and screen readers read it whole.
Preview
Interfaces with a cue.
Every word is in the server-rendered HTML, so search engines read it all while visitors watch it arrive.
Installation
pnpm dlx shadcn@latest add https://ui.cuelark.com/r/text-reveal.jsonThe CLI also installs the Cuelark theme tokens, the GSAP motion layer. With the @cuelark namespace configured, use @cuelark/text-reveal.
Builds on: motion
Usage
import { TextReveal } from "@/components/ui/text-reveal";
<TextReveal as="h1" split="chars">Interfaces with a cue.</TextReveal>Motion
SplitText with masks, re-splitting on resize and font load (autoSplit), ScrollTrigger for in-view.
Scale it with --cl-motion (0 off, 1 default, 1.5 expressive) on any ancestor. Reduced-motion preferences always switch it off.
API reference
TextReveal
| Prop | Type | Default | Description |
|---|---|---|---|
| as | "h1" | "h2" | "h3" | "h4" | "p" | "span" | "div" | "p" | Element (use headings for SEO). |
| split | "chars" | "words" | "lines" | "words" | Animation unit. |
| effect | "rise" | "blur" | "fade" | "rise" | Style. |
| trigger | "mount" | "inView" | "inView" | When to play. |
| delay · stagger | number | — | Timing in seconds. |
Accessibility
- SplitText's aria: "auto" keeps an accessible label, so screen readers don't hear letters.
- Skipped entirely with reduced motion.
FAQ
Also searched as: gsap text animation · splittext react · text reveal animation · animated heading · react text animation