Shadcn.io is not affiliated with official shadcn/ui
Text Hover Effect
SVG text with radial gradient mask reveal on hover for React applications.
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.
Text Hover Effect preview
Installation
Related 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