# Text Animation
> Four text effects: a word-by-word blur reveal with a volt underline, a shimmer sweep, a glyph scramble and a rotating word swap.
- Collection: Components
- Tier: free
- Docs: https://geturui.com/docs/text-animation
- Install: `npx shadcn@latest add @geturui/text-animation`
- Dependencies: motion
## Usage
```tsx
import { RevealText, RotatingText, ScrambleText, ShimmerText } from "@/components/ui/text-animation";
export function Hero() {
return (
Built for
Generating your hero section…
);
}
```
## Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | `string` | — | RevealText, ScrambleText. The text to animate; ScrambleText re-runs when it changes. |
| as | `"h1" | "h2" | "h3" | "p" | "span" | "div"` | "h1" (Reveal), "span" (Scramble) | Element to render. |
| mark | `string` | — | RevealText. One word to underline with a volt swash after the reveal. |
| stagger | `number` | 0.06 | RevealText. Seconds between words. |
| delay | `number` | 0 | RevealText. Seconds before the first word. |
| duration | `number` | 900 | ScrambleText. Milliseconds until every character settles. |
| words | `string[]` | — | RotatingText. Phrases to cycle through. |
| interval | `number` | 2200 | RotatingText. Milliseconds each phrase stays. |
| children | `ReactNode` | — | ShimmerText. The text to sweep. |
| className | `string` | — | Classes for the wrapper element. |
## Accessibility
- RevealText and ScrambleText expose the full text as an aria-label and hide the animated pieces, so nothing is read letter by letter.
- RevealText runs once when it enters the viewport; the reveal is a short fade that stays readable.
- The shimmer sweep is CSS and stops under prefers-reduced-motion.
## Source
### components/ui/text-animation.tsx
```tsx
"use client";
import * as React from "react";
import { AnimatePresence, motion, useInView } from "motion/react";
import { cn } from "@/lib/utils";
type Tag = "h1" | "h2" | "h3" | "p" | "span" | "div";
export interface RevealTextProps {
text: string;
as?: Tag;
/** One word to underline with a volt swash once revealed. */
mark?: string;
/** Seconds between words. */
stagger?: number;
delay?: number;
className?: string;
}
/** Word-by-word reveal: each word rises and clears a blur, staggered. Runs once when in view. */
export function RevealText({ text, as = "h1", mark, stagger = 0.06, delay = 0, className }: RevealTextProps) {
const ref = React.useRef(null);
const inView = useInView(ref, { once: true });
const Comp = motion[as] as typeof motion.h1;
const words = text.split(" ");
return (
} className={className} aria-label={text}>
{words.map((w, i) => (
{mark === w ? (
{w}
) : (
w
)}
{i < words.length - 1 ? " " : null}
))}
);
}
/** Loading text with a light sweep across it. */
export function ShimmerText({ children, className }: { children: React.ReactNode; className?: string }) {
return {children};
}
const GLYPHS = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789#$%&*+<>";
/** Characters scramble through random glyphs before settling, left to right. Re-runs when `text` changes. */
export function ScrambleText({ text, duration = 900, className, as: Tag = "span" }: { text: string; duration?: number; className?: string; as?: Tag }) {
const [out, setOut] = React.useState(text);
React.useEffect(() => {
const start = performance.now();
let raf = 0;
const tick = (now: number) => {
const p = Math.min(1, (now - start) / duration);
const settled = Math.floor(p * text.length);
setOut(
text
.split("")
.map((c, i) => (i < settled || c === " " ? c : GLYPHS[Math.floor(Math.random() * GLYPHS.length)]))
.join(""),
);
if (p < 1) raf = requestAnimationFrame(tick);
};
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, [text, duration]);
return (
{out}
);
}
/** Swaps between phrases with a vertical blur crossfade every `interval` ms. */
export function RotatingText({ words, interval = 2200, className }: { words: string[]; interval?: number; className?: string }) {
const [i, setI] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => setI((n) => (n + 1) % words.length), interval);
return () => clearInterval(t);
}, [words.length, interval]);
return (
{words[i]}
);
}
```