Words that arrive one at a time, fading in out of a soft blur as they rise into place.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/text-reveal
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/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 |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.