Text Reveal
Reveal text by word or character with stagger, blur, and spring motion.
text-reveal-demo
Overview
Text Reveal introduces one or more lines in reading order. Use word splitting for headings and statements; reserve character splitting for short decorative text.
Installation
Usage
import { TextReveal } from "@/components/animated/text-reveal"
<TextReveal text={["Ideas made tangible.", "Craft built to last."]} as="h2" />Accessibility
The content remains real text in document order. Reduced motion keeps a short opacity transition, and whileInView can defer the effect until the text is visible.