Text Reveal · paneui

Installation

pnpm dlx shadcn@latest add @paneui/text-reveal

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

<TextReveal as="h2" text="Your week, handled." className="text-2xl font-semibold" />

Use for short headlines; letters of a word stay together when lines wrap.

Use for multi-line headlines that should reveal as one sequence.

Use when the reveal has to match the pace of surrounding motion.

With reduced motion units only fade in, at half the stagger.

The element gets the full text as its aria-label and the animated pieces are aria-hidden, so screen readers read it once, whole.

Reveals text word by word (or letter by letter). Set size, weight and color with className. Also accepts every prop of HTML attributes.

text*: string | string[]; Text to reveal. An array renders one line per entry.
as= "span": "span" | "p" | "div" | "h1" | "h2" | "h3" | "h4" | "blockquote"; Element to render.
split= "word": "word" | "char"; Animate a word or a character at a time.
trigger= "mount": "mount" | "view"; Play on mount, or once 40% of the text has scrolled into view.
once= true: boolean; With trigger="view", only play the first time.
stagger= 0.07 (word) / 0.025 (char): number; Seconds between units.
delay= 0: number; Seconds before the first unit.
blur= 10: number; Starting blur in px.
offset= "45%": string; Starting vertical offset, relative to the unit's height.
transition= { type: "spring", stiffness: 170, damping: 24, mass: 1 }: Transition; motion/react transition merged over the default spring.

Prop	Type	Default	Description
text*	string \| string[]	—	Text to reveal. An array renders one line per entry.
as	"span" \| "p" \| "div" \| "h1" \| "h2" \| "h3" \| "h4" \| "blockquote"	"span"	Element to render.
split	"word" \| "char"	"word"	Animate a word or a character at a time.
trigger	"mount" \| "view"	"mount"	Play on mount, or once 40% of the text has scrolled into view.
once	boolean	true	With `trigger="view"`, only play the first time.
stagger	number	0.07 (word) / 0.025 (char)	Seconds between units.
delay	number	0	Seconds before the first unit.
blur	number	10	Starting blur in px.
offset	string	"45%"	Starting vertical offset, relative to the unit's height.
transition	Transition	{ type: "spring", stiffness: 170, damping: 24, mass: 1 }	motion/react transition merged over the default spring.