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.
Highlight Text preview
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.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this text effect for you — no copy-paste, no CLI:
use shadcnio to install the highlight-text text effect into my projectRelated 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
FAQ
Was this page helpful?
Sign in to leave feedback.