Text reveal
Reveal a short piece of content with restrained motion.
pnpm dlx shadcn@latest add @uiarc/text-revealLive · keyboard ready
- Above-the-fold hero headlines that animate on page load.
- Landing page intros where text must appear on first paint even if scripts are slow.
- Use in-view-title for section titles further down the page.
- Use scroll-highlight for a key paragraph that reveals with scroll.
- Use word-rotate when one word in the headline should cycle.
Installation
Add Text reveal with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/text-revealAdds the component and its local dependencies. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { TextReveal } from "@/registry/components/text-reveal/text-reveal"; export function Hero() { return <TextReveal as="h1" text={"Ship interfaces\nthat feel precise"} delay={0.1} />;}TextReveal
Reveals a headline once on mount: each word rises out of its own clip while it sharpens from a soft blur. Runs in CSS, so it starts on first paint.
PropTypeDefaultDescription
textRequiredstring–The copy to reveal. Use \n for a deliberate line break.as"h1" | "h2" | "h3" | "p""h2"Rendered element. p uses a softer blur.delaynumber0Seconds before the first word rises.classNamestring–Merged onto the rendered element.idstring–Forwarded to the rendered element, e.g. for aria-labelledby.- The full text sits in a visually hidden span; the animated words are aria-hidden, so screen readers read one clean sentence.
- Line breaks are read as spaces.
- Pick the heading level with as so the page outline stays correct.
- Words rise out of a clip and sharpen from blur on a per-word stagger; total stagger is capped so long text never drags.
- The entrance is pure CSS, so text is never left hidden when scripts load slowly.
- Reduced motion drops the clip and rise and fades the words in quickly.
- The element caps at 24ch with balanced wrapping, so lines stay even on any width.
- Use \n only for breaks that work on every width, since forced breaks apply on mobile too.
- Pure CSS keyframes, no JavaScript animation or observers.
- Total stagger is capped, so long text does not lengthen the entrance; each word still gets its own blur filter.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for above-the-fold headlines that should animate on page load. For titles further down the page use in-view-title; for body copy worth slowing down on use scroll-highlight.
- It plays once per mount. Change the element's key to replay it.
The full library index for assistants is at /llms.txt.