Text Reveal
Paragraph whose words light up one by one as it scrolls through the viewport, driven by scroll position.
Good motion is invisible. It guides the eye, confirms every action and tells a story, then gets out of the way so the content can speak.
When to use
Use it for one statement that deserves the reader's full attention, such as a mission sentence between two sections of a landing page. Keep the text short: one or two sentences. Longer copy is tiring to read word by word.
Playground
Installation
pnpm dlx shadcn@latest add @cadence/text-revealRequires the @cadence namespace in components.json. See Installation.
Usage
import { TextReveal } from "@/components/ui/text-reveal"
export function Statement() {
return (
<section className="py-[30vh]">
<TextReveal as="h2" className="text-4xl font-semibold">
We build tools that respect your time and your users' attention.
</TextReveal>
</section>
)
}The reveal is tied to the scroll position: it starts when the text enters the lower part of the viewport and completes before it reaches the middle. Leave some vertical space around it so the reader can scroll through the whole effect.
Props
Prop
Type
Also accepts all props of Omit<HTMLAttributes<HTMLElement>, "children">.
Examples
Quote
Every animation should earn its place by making the interface easier to understand.
Accessibility
- The text stays one element with normal word spacing, so screen readers and copy and paste work as with any paragraph.
- Unrevealed words use your theme's muted text color instead of transparency, so the whole sentence stays readable at AA contrast even if the reader stops scrolling halfway.
- With reduced motion the text renders as plain, fully opaque text.
Performance
- Each word's color is driven by a Motion value linked to the scroll position, written to a CSS variable. Words update without React re-renders and without layout work.