Split Reveal
A free split text animation: each word rises out of its own mask.
Portway Freight
Know where every container is, to the hour
Carrier milestones, terminal gate moves and customs status land in one timeline, so your team has the answer before the customer sends the email.
Customise
Code
<TextSplitReveal>
Know where every container is, to the hour
</TextSplitReveal>Split Reveal is a free split text animation for Next.js and React that splits a headline into words as it renders, then lifts each word out of its own mask in a smooth stagger. It is built with Motion, styled with Tailwind, and plays once when the wrapper scrolls into view.
The reveal animates transform only, so layout never shifts, and the text stays one coherent string for screen readers whatever element you render it as. With prefers-reduced-motion enabled, or with JavaScript unavailable, the full text renders immediately with no splitting and no movement.
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. A component passed here must forward ref to the DOM element it renders, or the text renders at rest without animating (a development warning names the fix). A change while the words rise applies once they are at rest. |
| 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, read from the wrapper when the reveal starts, and --ease-out-expo), so it always matches the rest of your motion system. Pace the cascade with the stagger prop; a new value applies from the next time the text enters:
<TextSplitReveal stagger={0.08}>
A slower, more deliberate word cascade
</TextSplitReveal>Frequently asked questions
- Does Split Reveal work with right-to-left languages?
- Yes. The text takes the direction of the page or the element around it, exactly as plain text does, so for a Hebrew or Arabic title set dir="rtl" on the page or on an ancestor, with lang for the language itself (lang alone does not change the direction). Left-to-right text splits into words; text containing right-to-left characters, or placed in a right-to-left context, enters as one block, laid out by the browser's own bidirectional rules.
- 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. While the words are split, the wrapper also holds a visually hidden copy of the full text, which assistive technology reads once, and the moving words are hidden from it, so screen readers announce one coherent string. Because the text is real content rather than a label, this is valid whatever element you render, a paragraph included, and copying the text gives it once. 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.