Split Text Reveal

Per-character or per-word staggered text reveal, with optional blur and viewport triggering.

Loading preview…

npx shadcn@latest add https://webberui.com/r/split-text.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

Texttext

Split byby

Interval between units (s)stagger

0.03

Duration (s)duration

0.6

Initial offset (px)y

Entrance blurblur

<SplitText />

npx shadcn@latest add https://webberui.com/r/split-text.json

Or, once registries are configured in components.json, install it as @webberui/split-text.

import { SplitText } from "@/components/ui/split-text";

<SplitText text="Animate everything." className="text-4xl font-bold" />

Prop	Type	Default	Description
`text`	`string`	—	The text to animate
`by`	`"char" \| "word"`	`"char"`	Split unit
`delay`	`number`	`0`	Delay before the reveal starts (seconds)
`stagger`	`number`	`0.03`	Interval between units (seconds)
`duration`	`number`	`0.6`	Duration of a single unit's animation (seconds)
`y`	`number`	`16`	Initial vertical offset (px)
`blur`	`boolean`	`true`	Whether the reveal is accompanied by a blur
`once`	`boolean`	`true`	Play only the first time the element enters the viewport

When the user has "reduce motion" enabled at the system level, the text renders statically
The container carries an aria-label and the split units are hidden from assistive technology (aria-hidden), so screen readers announce the complete sentence