Skip to content
GetUrUI

Text Animation

.md

Four text effects: a word-by-word blur reveal with a volt underline, a shimmer sweep, a glyph scramble and a rotating word swap.

textheadlinerevealshimmerscramblerotatehero

Installation

$npx shadcn@latest add @geturui/text-animation
Download source (.zip)

Usage

usage.tsx
1import { RevealText, RotatingText, ScrambleText, ShimmerText } from "@/components/ui/text-animation";
2
3export function Hero() {
4  return (
5    <div className="grid gap-4">
6      <RevealText text="Interfaces that feel alive" mark="alive" className="text-5xl font-semibold" />
7      <p className="text-xl">
8        Built for <RotatingText words={["founders", "designers", "agencies"]} />
9      </p>
10      <ShimmerText>Generating your hero section…</ShimmerText>
11      <ScrambleText text="BUILD 0428 · READY" className="font-mono" />
12    </div>
13  );
14}

Props

PropTypeDefaultDescription
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.
markstring—RevealText. One word to underline with a volt swash after the reveal.
staggernumber0.06RevealText. Seconds between words.
delaynumber0RevealText. Seconds before the first word.
durationnumber900ScrambleText. Milliseconds until every character settles.
words*string[]—RotatingText. Phrases to cycle through.
intervalnumber2200RotatingText. Milliseconds each phrase stays.
childrenReactNode—ShimmerText. The text to sweep.
classNamestring—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.