Text Reveal

Text that arrives word by word as it scrolls into view: blurring in, rising from a line, fading or wiped in.

$ pnpm dlx shadcn@latest add https://dashral.com/r/text-reveal.json

Dashboards that feel finished.

Installation

$ pnpm dlx shadcn@latest add https://dashral.com/r/text-reveal.json

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Using Dashral often? Add the registry to components.json once:

components.json

1{
2  "registries": {
3    "@dashral": "https://dashral.com/r/{name}.json"
4  }
5}

Then add components by name:

$ pnpm dlx shadcn@latest add @dashral/text-reveal

Usage

example.tsx

1import { TextReveal } from "@/components/dashral/text-reveal"
2
3<TextReveal as="h2" className="text-3xl font-semibold">
4  Dashboards and apps on a real database
5</TextReveal>

Examples

Variants

variant: blur, rise, fade or wipe. trigger="mount" plays it as soon as it's on the page.

Make every word count

Heading, then lead

delay starts the lead after the heading; stagger sets the gap between words.

Numbers your whole company can trust

One source of truth from the first event to the board deck. Built for scale, priced for teams of five.

API reference

TextReveal

Also takes every prop of <p>(opens in a new tab).

Prop	Type	Default
`children`	`string` The text, split into words. Required.	—
`as`	`"h1" … "h6" \| "p" \| "span" \| "div"` The element it renders.	`"p"`
`variant`	`"blur" \| "rise" \| "fade" \| "wipe"` Words un-blur as they rise, slide up from behind a line, or fade in; or the whole text is wiped in.	`"blur"`
`trigger`	`"view" \| "mount"` The first time it scrolls into view, or as soon as it's on the page.	`"view"`
`delay`	`number` Milliseconds before the first word, e.g. to follow a heading.	`0`
`stagger`	`number` Milliseconds between one word and the next.	`55`
`classNames`	`{ word? }` Classes for each word.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

The text is in the page as written, so screen readers and search engines read it whole; nothing is hidden from them.
It renders the element you choose with as, so a heading stays a heading in the outline.

Motion

Each word arrives a stagger after the one before, over --duration-considered on --ease-enter (rise a little longer; wipe twice as long). With reduced motion, or before scripts run, the text is simply there.