Animated text is the effect with the worst ratio of how good it looks in a demo to how well it survives a real page. A headline that types itself out is delightful once and an obstacle every time after. A word that cycles through three alternatives is a headline that never finishes saying what the product is.
That is not an argument against the technique, it is an argument for knowing which of the five kinds you are reaching for, because they fail differently.
The cycling word
The most useful of them: a fixed sentence with one word that changes. "Build your ___ faster."
Text Rotate by danielpetho switches the rendered text from a list, and Animated Text Cycle by Thimo Waanders is the smooth-transition version built for hero sections. Gooey Text Morphing by victorwelander is the fluid one, where words melt into each other rather than swapping.
The rule that keeps this honest: the sentence has to be true with every word in the list, and the first word has to be the most important one, because it is the only one many readers will see. A cycle that needs three rotations before the useful word appears has hidden your value proposition behind a timer.
The reveal
Text that animates in as it arrives. Text Effect by ibelick is the general-purpose one, animating per character or per word with preset or custom variants, and Text Reveal by dillionverma ties the reveal to scroll position.
This is the safest family, because the end state is normal text and the animation happens once.
The typewriter
Typewriter by danielpetho is the classic effect. It is genuinely right for one thing - a terminal, a chat, anything where the text is supposed to be arriving live - and wrong for a headline, where the reader is waiting for information you already have.
If you ship one above the fold, make the full string present in the DOM from the start and animate its visibility, so the sentence exists for anything that does not watch the animation. And keep the total duration under about a second and a half.
The material effects
Vapour Text Effect by Jatin Yadav dissolves the letters, ParticleTextEffect by KainXu builds them from particles, and Hand Writing Text by kokonutd draws an SVG signature stroke by stroke. Text Shimmer by ibelick is the sweep used for loading and streaming states, covered in the loading guide.
Particle and vapour effects usually render into a canvas, which means the words are not text any more. Whatever they say has to exist as real markup underneath.
The marquee
Testimonials with Marquee is the pattern applied to content rather than to a headline. The obligations are the ones every moving element has: pause on hover and focus, and no autoplay under reduced motion.
What breaks
The heading stops being a heading. Splitting a headline into one span per character, which is how most per-character animations work, can leave a screen reader announcing forty separate fragments. Put the real sentence in an aria-label on the heading and mark the animated spans aria-hidden.
Layout shifts on every cycle. A rotating word of a different length pushes the rest of the line around on each swap. Reserve the width of the longest option, or animate a fixed-size container.
Nothing is indexed. If the words are added by JavaScript, the HTML your server returns has an empty heading. That is the single most expensive mistake in this category, because the headline is the most important string on the page for both search engines and answer engines. Render the text, animate its appearance.
It never stops. An infinite loop in a headline is motion in the reader's peripheral vision for as long as they are on the page. Run the cycle a few times and stop, or stop on interaction.
Reduced motion is ignored. Every effect here needs a branch that renders the final state immediately. For a cycling word, that means showing the first option and not rotating.
Where else to look
The honest list of alternatives, because the answer is not always us:
| Source | Best for | Trade-off |
|---|---|---|
| CSS animations | Reveals, shimmers and marquees with no runtime | Per-character sequencing gets verbose |
| Motion | Staggered character and word animations in a React model | A runtime for what is often a keyframe |
SplitType / Intl.Segmenter | Splitting text safely, including scripts where letters join | Splitting is where accessibility breaks |
| 21st | Finished cycles, morphs, typewriters and particle text | Quality varies by author, so preview before you take it |
Taking one
Every component page has a live preview and the code. Installing goes through the shadcn CLI against our registry:
That key comes from your 21st account, and installs require a membership. Set API_KEY_21ST once in your shell and the command works for anything in the catalogue. The 21st MCP covers the same ground without leaving the editor: ask Claude, Cursor or Codex for a text effect, get the previews inline, and let the agent write the file.
Browse text animation components →
Frequently asked
- Do animated headlines hurt SEO?
- Only when the words are added by JavaScript. If the animation renders the text, the HTML returned by the server has an empty heading, and the headline is the most important string on the page for search engines and answer engines alike. Render the real sentence and animate its appearance instead.
- How do you keep split-text animations accessible?
- Put the whole sentence in an aria-label on the heading and mark the per-character spans aria-hidden. Without that, splitting a headline into one span per letter can leave a screen reader announcing dozens of separate fragments instead of one sentence.
- Should a hero headline use a typewriter effect?
- Usually not. A typewriter is right when the text is supposed to be arriving live, like a terminal or a chat transcript, and wrong when the reader is waiting for information you already have. If you ship one above the fold, keep it under about a second and a half and make the full string present in the DOM from the start.
- How do you stop a rotating word from shifting the layout?
- Reserve the width of the longest option, or animate inside a fixed-size container. A word that changes length pushes the rest of the line on every swap, which is motion the reader did not ask for on top of the effect you intended.