Text Highlight On Scroll
Highlights words in sequence as the user scrolls.
Scroll-drivenemphasiscanguidethereadertowardthemostimportantideaswithoutbreakingtheflow.
Scroll the page to see each word highlight in sequence.
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/text-highlight-on-scroll.tsx
Installation
Using shadcn CLI
npx shadcn add text-highlight-on-scroll --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.
Scroll Reveal Text
Reveals words or characters as you scroll, creating a story-like reading flow.
Typewriter Text
Animates text typing character by character with configurable speed, delay, and an optional blinking cursor.