Split Reveal
A free masked line text animation built on GSAP SplitText.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- GSAP
- 2 runtime packages
Split Reveal is a free text effect component for Next.js and React that splits a headline into lines and words with GSAP SplitText, then lifts each word out of a masked line in a smooth stagger. It is styled with Tailwind and plays once when the wrapper scrolls into view.
The reveal animates transform only, so layout never shifts, and SplitText's automatic aria handling keeps the headline as one coherent string for screen readers. With prefers-reduced-motion enabled, or with JavaScript unavailable, the full text renders immediately with no splitting and no movement.
Template Empire
Headlines that rise out of their own lines
Each word lifts out of a masked line in a quick cascade. Replay it, or enable reduced motion and the full headline is simply here.
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/text-split-revealUsage
import { TextSplitReveal } from "@/components/text-split-reveal";
export function Example() {
return (
<TextSplitReveal as="h1" stagger={0.04} className="text-5xl font-semibold">
Ship landing pages that feel designed
</TextSplitReveal>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | string | required | Plain text to split and reveal. |
| as | ElementType | "h2" | Element rendered as the wrapper. |
| stagger | number | 0.04 | Delay between words, in seconds. |
| className | string | undefined | Additional classes merged onto the wrapper. |
Customisation
Split Reveal deliberately ships without component-level CSS variables. Its duration and ease follow the library-wide motion tokens (--dur-3 and --ease-out-expo, applied through the shared GSAP defaults in lib/gsap.ts), so it always matches the rest of your motion system. Pace the cascade with the stagger prop:
<TextSplitReveal stagger={0.08}>
A slower, more deliberate word cascade
</TextSplitReveal>Frequently asked questions
- Is Split Reveal free for commercial use?
- Yes. Split Reveal is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Split Reveal accessible to screen readers?
- Yes. SplitText 3.13 applies aria automatically: the wrapper carries a label with the full text and the split word elements are hidden from assistive technology, so screen readers announce one coherent string. When reduced motion is enabled the text is never split at all and renders immediately in its final, fully visible state.
- How do I change the speed of the reveal?
- Use the stagger prop to set the delay between words in seconds; the default is 0.04. The duration and easing of each word come from the shared motion tokens, so they stay consistent with every other component in the library.