Animated Text Reveal
Reveal text by letter or word as it enters the viewport.
Word by word
Everyproductdeservesacinematicrevealmoment
Letter by letter
Reveal each character
From below
Animatefromanydirectionyouprefer
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/animated-text-reveal.tsx
Installation
Using shadcn CLI
npx shadcn add animated-text-reveal --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge framer-motionRelated Text Effects Components
Gradient Text
Animated gradient text with flowing motion and semantic color stops. Uses Framer Motion for a smooth, continuous sweep.
Morph Text
Morphs between words with a smooth blur and slide transition.
Scramble Text
Scrambles characters before resolving into a crisp headline, perfect for dramatic reveals.
Scroll Reveal Text
Reveals words or characters as you scroll, creating a story-like reading flow.
Text Highlight On Scroll
Highlights words in sequence as the user scrolls.
Typewriter Text
Animates text typing character by character with configurable speed, delay, and an optional blinking cursor.