Starting your winter arc? 🥶 Get 25% off every plan and template with
WensityWensity

React text animations

19 text animationsLive previewFull source in your repo

Headline effects for React, from a CSS shimmer on a single element to split text that staggers in letter by letter. Copy any one into your project, and the words stay real text that search engines and screen readers can read.

Browse all text animationsRead the docs

Works with

  • React
  • Next.js
  • TypeScript
  • Tailwind CSS

CSS text animations with no animation library

Effects run by CSS keyframes and background-clip text: a shimmer sweep, an RGB glitch, a drifting gradient fill, flowing line art, a 3D letter wave and hover underlines.

Split text and scroll reveal animations in Framer Motion

Split a headline by character, word or line and stagger the pieces in, on mount or as it scrolls into view. Screen readers still hear the whole sentence once.

Rotating text and word swap animations

Swap the key word of a headline on a timer, with a letter by letter blur, a spring flip or a gooey morph. Keep the phrase you want indexed in the static words around it.

Highlighter, scribble, 3D flip, curved path and particle text effects

Marks drawn over real text, letters that turn like cube faces, phrases riding an SVG path and a headline resolved from particles. New text animations appear here as they ship.

How to animate text in React without hurting SEO or accessibility

A text animation moves the letters, the words or the fill of a piece of text rather than the box around it. In React there are three ways to build one. CSS can animate a single element, its gradient fill or its pseudo elements. JavaScript can split the string into one span per letter or word and stagger them. And canvas or WebGL can draw the text as pixels. Each way has a different cost in markup, accessibility and page weight, so the technique matters as much as the look.

Most headline effects need nothing beyond CSS. Gradient text is a background clipped to the glyphs with background-clip set to text and the text colour made transparent. Animate that background's position with keyframes and you get Text Shimmer's band of light or Text Spectrum's drifting colour wash, on one element with no spans at all. Because the fill comes from the background, ordinary text colour classes do nothing to it, which is why both take their colours as props. Text Glitch works the same way through two pseudo element layers with offset clip paths, so the headline stays one element.

Letter by letter motion needs the text split first, because browsers do not expose individual letters to animate. GSAP's SplitText plugin is the best known tool for that job. In React the components here split the string while rendering instead, then stagger the pieces with Framer Motion. Text Char Slide divides its duration by the character count, so a short headline and a long one finish in the same time, and Text Cycle and Text Flip split by grapheme rather than by character, so emoji and accented letters stay whole.

Splitting has an accessibility cost that is easy to miss. A screen reader that meets one span per letter can read the word out letter by letter. The fix is to hide the animated pieces from assistive technology and expose the full string once, which is what the split text components here do. Every one of them also checks prefers-reduced-motion and shows the finished text instead of the movement.

Search engines read the server HTML, so check what an animation leaves in it. Effects built on a single element, such as Text Shimmer, Text Spectrum and Text Glitch, keep the headline as ordinary text, and an as prop on most components renders it as a real h1 or h2. Word rotators are the exception: Text Cycle and Text Word Flip only render the current word, so put the phrase you want to rank for in the static text around them. Text Morphing keeps all of its phrases in the server HTML, and Particle Text and Chrome Text keep the real string underneath the drawing.

Performance follows from the same choice. A gradient sweep on one element is cheap at any length. One span per character is fine for a headline and wasteful for a paragraph, which is why Text Ripple is meant for short headlines only. Animations that loop forever should stop when nobody can see them, and Text Shimmer, Text Glitch, Text Spectrum, Text Path and Text Ripple all pause off screen.

Frequently asked questions

Define the motion with @keyframes and apply it with the animation property. For effects on the fill, such as a shimmer or a moving gradient, clip a background to the text with background-clip: text, make the text colour transparent, and animate background-position. For glitch effects, animate clip-path on ::before and ::after copies of the text. Wrap the animation in a prefers-reduced-motion check so it stops for people who asked for less movement.

Set a linear gradient as the element's background, add background-clip: text along with the -webkit- prefixed version, and set the text colour to transparent so the gradient shows through the letters. Keep a solid colour as a fallback for browsers without support. To animate it, make the background larger than the text and move its position, which is how Text Spectrum drifts its colours.

No. SplitText is GSAP's plugin for splitting text into characters, words and lines, and it is useful when GSAP already drives the page. In React you can split the string while rendering and let Framer Motion handle the stagger, which is how Text Char Slide, Text Motion and Text Blur Reveal work. Many effects need no splitting at all: a shimmer, a glitch or a gradient sweep runs on the whole element in CSS.

Not when the text stays in the HTML. Effects that animate a single element or wrap letters in spans still leave the words in the markup for search engines. Word rotators are the case to watch, because only the visible word is rendered at any moment. Keep the phrase you want to rank for in the static part of the headline, and use the as prop to keep the element a real heading.

They can be. Text split into spans should hide the animated pieces from assistive technology and expose the full string once, so it is announced as one sentence instead of letter by letter. Rotating words should be announced politely as they change, and every animation should respect prefers-reduced-motion. The split text and word rotator components here are built that way.

Copy the text into ::before and ::after pseudo elements, tint one cyan and one red, offset them slightly, and animate a clip-path on each on separate keyframe loops so horizontal slices jump out of step. Text Glitch is built this way in pure CSS, can run constantly or only on hover, and pauses off screen and for reduced motion.

Use CSS when the whole element moves together, such as a shimmer, a gradient wash, a glitch or a hover underline. It needs no library and runs cheaply. Use JavaScript when each letter or word needs its own timing, such as a staggered entrance, a scroll triggered reveal or a word rotator, because the string has to be split before the pieces can move.

Where to go next