Text Reveal

A heading or a paragraph that appears word by word, letter by letter or line by line, timed by the village's motion.

Installation

npx rasengan-ui add text-reveal

Or with the shadcn CLI, from the registry:

npx shadcn@latest add https://ui.rasengan.dev/r/base/text-reveal.json

It brings rasengan-motion with it. Put its head script and provider in your app once, as the motion setup shows: <MotionScript /> in <head>, <MotionProvider> around the app.

Usage

import { TextReveal } from "@/components/ui/text-reveal";
 
export function Usage() {
  return (
    <TextReveal as="h1" by="words" effect="rise" className="text-4xl font-semibold">
      Ship the landing page before lunch
    </TextReveal>
  );
}

The text is a string, so it can be split. Style it like any heading or paragraph: Text Reveal only moves its pieces.

Effects

rise (the default) lifts each piece by the village's travel distance; fade only fades; blur comes into focus; mask wipes each piece up. by picks the pieces: words, chars or lines (measured in the browser, and again when the width changes).

Villages

Each village times it: Konoha rises smoothly, Kiri slower and further, Kusa overshoots and settles. Iwa's intensity is 1, so the whole text fades in place, without travel. Scroll the grid to play it in each.

Reduced motion

With reduced motion, ?motion=off, ?motion=final or a scope at data-motion-intensity="0", the text is simply there. Without JavaScript too: the hidden starting state only applies once motion is ready.

Accessibility

• Screen readers read the text once, in full, from a visually hidden copy; the split pieces are hidden from them.
• The element keeps its role: an h1 stays a heading.

Weight

About 3.4 kB gzip beyond cn(), which every component shares. Nothing from Motion: the pieces animate with the browser's Web Animations API.

API reference

TextReveal renders as (a p by default) and takes its props and className, and: