Split text animation
Also called split text, SplitText, or staggered text animation
A text animation that breaks a heading into characters, words, or lines and animates each piece in turn, so the text arrives as a wave.
import { motion, useReducedMotion, type Variants } from 'motion/react';
const heading: Variants = {
hidden: {},
// Each word starts 60ms after the one before it.
show: { transition: { staggerChildren: 0.06 } }
};
const word: Variants = {
hidden: { y: '100%', opacity: 0 },
show: {
y: 0,
opacity: 1,
transition: { duration: 0.6, ease: [0.23, 1, 0.32, 1] }
}
};
export function SplitHeading({ text }: { text: string }) {
const reduceMotion = useReducedMotion();
return (
// Screen readers get the sentence once instead of word by word.
<motion.h1
aria-label={text}
variants={heading}
initial={reduceMotion ? false : 'hidden'}
animate='show'
className='flex flex-wrap gap-x-[0.25em] text-5xl leading-tight font-bold tracking-tight'
>
{text.split(' ').map((piece, i) => (
// The clipped wrapper hides each word until it rises into the line.
<span key={i} aria-hidden className='overflow-hidden pb-[0.1em]'>
<motion.span variants={word} className='inline-block'>
{piece}
</motion.span>
</span>
))}
</motion.h1>
);
}Animate the hero headline with split text: split it into words, and have each word rise from 100% below inside a clipped line while fading in, over 600ms with cubic-bezier(0.23, 1, 0.32, 1) and a 60ms stagger. Keep the full sentence in an aria-label with the pieces aria-hidden, and show the headline without motion when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is Split text animation?
Split text wraps each character, word, or line of a heading in its own element, then gives every piece the same entrance with a small stagger. Pieces often rise out of a clipped line, fade in, or come into focus from a blur, so the heading seems to assemble itself.
The split unit sets the mood. Characters feel playful and showy, words read naturally and suit most headlines, and lines feel calm and editorial. Save it for one or two headings per page, such as the hero and a key section intro.
Splitting text into many elements can confuse screen readers, which may read each letter on its own. Put the full sentence in an aria-label on the heading and mark the pieces aria-hidden. Split lines only after web fonts load and again when the container resizes, because line breaks move. Libraries such as GSAP SplitText handle these details for you.
Often confused with
- Stagger
- Stagger is the timing technique of offsetting one animation across many items. Split text applies a stagger to the pieces of a single heading.
Related terms
All termsStagger
Animating a group of items one after another with a small delay between each, so they arrive as a cascade.
Reveal animation
An entrance where a moving edge uncovers an element, as if a curtain slides away, usually built with an animated clip-path.
Scroll reveal
An animation that fades or slides content into place as it scrolls into view, so each section appears just as the reader reaches it.
Text scramble
A text animation where each character flickers through random letters and symbols before settling on the final word, like a code being cracked.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.