Scroll Reveal Text
Reveals words or characters as you scroll, creating a story-like reading flow.
Everywordarriveswithitsownmomentasyouscroll
Words reveal sequentially as users scroll through your content
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/scroll-reveal-text.tsx
Installation
Using shadcn CLI
npx shadcn add scroll-reveal-text --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
Animated Text Reveal
Reveal text by letter or word as it enters the viewport.
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.
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.