Charcoal UI

React Text Animations

React text animations: reveals, shimmer, scramble, typewriter, split-flap and more.

About these text animations

Text animations give headlines and labels presence: words that rise in, letters that scramble into place, shimmering and gradient text, typewriters, split-flap boards, rotating words and reveals tied to scroll.

The real text always stays in the page, so search engines index it and screen readers read it once, while the animated letters are decorative copies.

Where they earn their keep

  • Hero headlines on landing pages.
  • Section titles that reveal on scroll.
  • Loading and status labels.
  • Product launch and event pages.

How they are built

Letters and words animate with transforms and opacity, which stay smooth on any device. Most effects start when they scroll into view, and all of them render the final text immediately under reduced motion.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 41 text animations

4 are free and MIT licensed, and 37 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

  • Text Reveal: A React text reveal: words rise out of a blur one after another as they scroll in
  • Shimmer Text: React shimmer text: a band of light sweeps across, for loading and thinking states
  • Scramble Text (Pro): React scramble text: characters cycle through glyphs before locking in
  • Rotating Text (Pro): React rotating text that rolls between words letter by letter and resizes smoothly
  • Typewriter: A React typewriter effect with a human rhythm that types, holds and deletes words
  • Gradient Text: React gradient text with a slowly flowing accent gradient, CSS only
  • Highlight Text (Pro): React highlight text: a marker sweep, hand-drawn underline or scribbled circle on scroll
  • Text Morph (Pro): React text morph: shared letters glide to new spots while the rest blur in and out
  • Split Flap (Pro): A React split-flap display: every cell flips through the drum to its letter
  • Scroll Text (Pro): React scroll text: words light up one by one as the paragraph scrolls by
  • Wavy Text (Pro): React wavy text: letters hop in a wave on hover or continuously
  • Circular Text (Pro): React circular text running around a turning circle, faster on hover
  • Glitch Text (Pro): React glitch text: offset colour layers tear through the text, CSS only
  • Flip Words (Pro): React flip words: words flip like a 3D board, each letter a beat after the last
  • Letter Swap (Pro): React letter swap: each letter rolls up and is replaced by its twin on hover
  • Text Pressure (Pro): React text pressure: letters thicken as the pointer approaches, with variable fonts
  • Tech Text (Pro): React tech text: a monospace heading that boots in with a scanline and cursor
  • Masked Heading (Pro): React masked heading: letters are windows onto a panning image or gradient
  • Stroke Text (Pro): React stroke text: outlined lettering that draws itself in, then fills
  • Depth Text (Pro): React 3D depth text: extruded letters that tilt toward the pointer
  • Fold Text (Pro): React fold text: lines fold down into place like hinges as they scroll in
  • Echo Text (Pro): React echo text: trailing copies follow the pointer and fade into blur
  • Shuffle Text (Pro): React shuffle text: letters slide through a reel of glyphs before settling
  • True Focus (Pro): React true focus: words blur except one, framed by brackets that hop between words
  • Scroll Float (Pro): React scroll float: characters float up and settle as you scroll
  • Text Cursor (Pro): React text cursor: copies of a word or emoji trail the pointer and drift away
  • Curved Loop (Pro): React curved loop: text marquees along a curved path and you can drag it
  • Warp Text (Pro): React warp text: a wave of skew and scale ripples through the letters
  • Particle Text (Pro): React particle text: letters form from flying particles and scatter from the pointer
  • Fuzzy Text (Pro): React fuzzy text: canvas lettering with shivering edges that intensify on hover
  • Falling Text (Pro): React falling text: words drop with physics, pile up and can be thrown
  • ASCII Text (Pro): React ASCII text: lettering drawn in ASCII characters with a travelling wave
  • Proximity Scramble (Pro): React proximity scramble: letters near the pointer scramble and settle back
  • Text Spotlight (Pro): React text spotlight: a soft circle of light follows the pointer over dim text
  • Liquid Text (Pro): React liquid text: lettering that wobbles like a liquid surface
  • Text Explode (Pro): React text explode: letters fly apart with a spin and snap back together
  • Magnet Text (Pro): React magnet text: letters push away from the pointer and spring back
  • Kinetic Text (Pro): React kinetic typography: slanted rows that marquee faster with scroll velocity
  • Line Reveal (Pro): React line reveal: lines rise into view inside clipped masks, one by one
  • Scroll Scale Text (Pro): React scroll scale text: a pinned heading that grows from a whisper to a shout
  • Chromatic Text Reveal (Pro): A React text reveal where words arrive with split colour fringes

Install one

npx shadcn@latest add https://charcoalui.com/r/text-reveal.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Do text animations hurt SEO?
No. The full text is in the HTML; only decorative copies are animated and marked aria-hidden.
Can I animate on scroll?
Yes. Most text effects start when they enter the viewport and can replay each time if you want.
Do they work with any font?
Yes. They inherit your font and size, so they work with system fonts, Google Fonts or your own.
Do these text animations work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.