Back to Components
Text Effects
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-motion