Text Reveal

Text that reveals character-by-character on scroll.

text-reveal.tsx

SniperUImakesinterfacesbeautiful.

Installation

Terminal

npx shadcn@latest add "https://sniper-ui-coral.vercel.app/r/text-reveal.json"

Auto-Installed Dependencies

The CLI will automatically install these packages.

Terminal

npm install framer-motion clsx tailwind-merge

Usage

Basic

page.tsx

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

export default function MyPage() {
  return (
    <h1 className="text-4xl font-bold">
      <TextReveal text="Hello, world!" />
    </h1>
  );
}

Examples

examples.tsx

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

export default function MyPage() {
  return (
    <div className="space-y-4">
      {/* Staggered headings */}
      <h1 className="text-5xl font-bold">
        <TextReveal text="Build something" />
      </h1>
      <h2 className="text-3xl text-muted-foreground">
        <TextReveal text="extraordinary today." delay={0.5} />
      </h2>
    </div>
  );
}

Props

Prop	Type	Default	Description
`text`	`string`	`—`	The text string to animate character by character.
`className`	`string`	`—`	Additional CSS classes for the wrapper.
`delay`	`number`	`0`	Delay in seconds before the animation starts after scrolling into view.

Sniper UI

An open-source library available on GitHub — contribute or star the repo to support it.

Contribute