Words that arrive one at a time, fading in out of a soft blur as they rise into place.
Set your access key from Account as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then it installs by name, like any free item.
$pnpm dlx shadcn@latest add @nextui/text-reveal
1{2"registries": {3"@nextui": {4"url": "https://tinistudio.vercel.app/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { TextReveal } from "@/components/nextui/text-reveal";23export function Intro() {4return <TextReveal as="h2" text="Words that arrive one at a time." />;5}
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | – | The text to reveal |
| by | "word" | "char" | "word" | Reveal word by word or letter by letter |
| stagger | number | 40 | Time between two pieces, in ms |
| delay | number | 0 | Wait before the first piece, in ms |
| duration | number | 700 | Time each piece takes to arrive, in ms |
| as | "p" | "h1" | "h2" | "h3" | "span" | "p" | Element to render |
| once | boolean | true | Reveal only the first time; otherwise it plays again each time it enters the view |
| className | string | – | Extra class on the root |
This motion is part of Pro
Preview it freely. Unlock the code and CLI install with a Pro license.
Each word drifts out of a soft blur and settles into place, so the sentence reads like it is being spoken.
Each word drifts out of a soft blur and settles into place, so the sentence reads like it is being spoken.