Balick UI

Text Reveal

Reveals a line word by word, each part fading in from a light blur. The full text stays readable by screen readers.

Dependenciesmotion
Open in

Blocks designed to fit together.

Installation#

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

Or pass the full URL: https://ui.balick.me/r/text-reveal.json

Usage#

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

export function Hero() {
  return <TextReveal as="h1">Blocks designed to fit together.</TextReveal>
}

Props#

PropTypeDefault
children

The text to reveal. Required.

string—
as

Element rendered around the text.

"h1" | "h2" | "h3" | "p" | "span""p"
by

Reveal word by word, or character by character.

"word" | "character""word"
delay

Delay before the first part, in seconds.

number0
stagger

Delay between two parts, in seconds.

number0.06
inView

Wait until the text scrolls into view.

booleanfalse