Text Reveal

Splits a heading into words or characters and reveals them in a stagger — blur, rise, fade or masked slide.

intersection-observerstagger2 files · 86 locdeps: clsx, tailwind-merge

Installation

With the shadcn CLI, pointing at this platform’s registry:

npx shadcn@latest add https://opusui.131199999.xyz/r/text-reveal.json

Or offline, straight from your opus55 checkout (copies every file it needs):

node ../tailwind_component/opus55/scripts/add.mjs text-reveal

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

<TextReveal as="h2" text="Design is how it feels when it moves." effect="blur" />

Prop	Type	Default	Description
text	string	—	The text (kept as aria-label).
by	"word" \| "char"	"word"	Split granularity.
effect	"blur" \| "rise" \| "fade" \| "mask"	"blur"	Entrance.
stagger / duration / delay	number	—	Timing (ms).