Text Animation

This React text animation bundle includes TextReveal, chromatic word changes, shimmer, letter cascades and character scrambles. Start with a word reveal for a short headline, then choose another effect only when it fits the message.

Better with your agent

Give your agent taste.

The best way to use Rendyn is through MCP. Let your agent find the right component, compare previews and bring the source into your project.

All components are free. Sign up only to connect MCP.

Connect to MCP for free

Example variantReact Tailwind CSS

Practical React example

A product heading can enter once when it becomes visible, with a brief supporting line appearing afterwards. Word-level animation keeps long phrases easier to follow than a character-by-character sequence.

Before you copy and paste

Add TextReveal, its cn and easing utilities from the Code tab, plus the listed motion dependency. The public page name is Text Animation; the reveal export and filename are TextReveal and text-reveal.tsx.

Listed package dependencies: clsx, motion, react, tailwind-merge.

Use the Code tab for the component files and installation instructions, then adapt the imports in this example to your project.

Reveal a product heading when it enters view

"use client";

import { TextReveal } from "@/components/motion/text-reveal";

export function ProductHeading() {
  return (
    <header>
      <TextReveal
        as="h2"
        text="Turn a draft into a clear interface"
        split="word"
        blur={6}
        stagger={0.06}
        yOffset="20%"
        whileInView
        once
        className="text-balance text-3xl font-semibold"
      />
      <TextReveal text="Choose a component, then make it yours." delay={0.3} />
    </header>
  );
}

The heading starts at the source’s 40% visibility threshold and runs once. The supporting line uses a short mount-time delay; it is not tied to the heading’s viewport trigger.

Customization

text / split / as: Text accepts a string or array of lines. Split by word or char, and choose a semantic element such as h2. Character mode preserves word boundaries for wrapping.
stagger / delay / blur / yOffset: Stagger and delay are seconds. Blur is pixels; yOffset accepts a string or number. Shorter sequences reduce the time before the full message becomes readable.
whileInView / once / spring: whileInView enables a viewport trigger; it is false by default. once defaults to true. Spring accepts stiffness, damping and mass for the movement transition.

Integration notes

The imported reveal reads the motion preference and replaces movement and blur with a shorter opacity transition. It still animates; provide static text if your product requires no transition at all.
Keep semantic headings and ordinary text content. Test screen readers with your chosen split mode, and avoid repeated announcements or animated paragraphs of essential instructions.
Shimmer is a visual effect rather than a loading-state machine. Scramble and cascade are separate exports with different APIs, not values for a TextReveal variant prop.

Component source: beUI documentation . These examples describe the version imported into Rendyn. Upstream APIs may have changed; retain the source licence notices when adapting the code.