Shadcn.io is not affiliated with official shadcn/ui
Highlight Text
Animated marker highlight effect that draws across text on scroll or load for React applications.
Simulate a highlighter pen drawing across your text with this animated highlight effect. The gradient background grows from 0% to 100% width, revealing the highlight mark as if drawn in real-time. Supports scroll-triggered animation via intersection observer—the highlight draws when the text enters the viewport. Customizable timing with Motion's transition system, and one-time or repeat-on-scroll options. Built with Motion for React and CSS background-size animation. Perfect for emphasizing key phrases, creating tutorial-style callouts, or adding a human touch to digital text.
Highlight Text preview
Installation
Related Components
Motion Highlight
Dynamic background highlight animations
Gradient Text
Flowing gradient color animations
Blur Text
Text animation from blur to focus
Text Reveal
Cinematic text reveals with clip-path animations
Writing Text
Word-by-word reveals with natural rhythm
Text Generate Effect
Progressive character generation