Shadcn.io is not affiliated with official shadcn/ui
Text Hover Effect
SVG text with radial gradient mask reveal on hover for React applications.
Text Hover Effect preview
Dramatic text reveal where a rainbow gradient follows your cursor, revealing color through a radial mask. Text renders as SVG with animated stroke drawing on load, then a radial gradient mask tracks mouse position to reveal a vibrant gradient fill underneath. The spotlight effect creates an X-ray or flashlight revealing hidden colors beneath monochrome text. Built with SVG masks, gradients, and Motion for React. Perfect for interactive hero text, creative hover effects, or anywhere you want text that responds dramatically to cursor exploration.
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 text-hover-effect text effect into my projectRelated Components
Gradient Text
Flowing gradient color animations
Variable Proximity
Variable font weight responding to cursor position
Text Pressure
Variable font weight responding to cursor proximity
Glitch Text
Digital glitch effects with RGB channel separation
Colourful Text
Per-character rainbow color cycling
Blur Text
Text animation from blur to focus
FAQ
Was this page helpful?
Sign in to leave feedback.