Shadcn.io is not affiliated with official shadcn/ui
Spotlight Text
Cursor-driven radial mask spotlight that reveals dim text inside a soft circular beam following the pointer with spring-smoothed motion for React, Next.js, and motion.
Spotlight Text preview
Text sits dim and almost-invisible at rest, then lights up exactly where your cursor passes — a soft circular spotlight follows the pointer and reveals the glyphs inside its beam at full opacity, fading back to dim at the edge. The reveal is driven by a CSS mask-image: radial-gradient whose center is bound to two useMotionValues, then routed through a useSpring so the light glides instead of jumping. When the pointer leaves, the spotlight glides smoothly back to the component's center and stays parked there. Configure the beam radius via spotlightSize, the resting opacity, and pick soft for a feathered falloff or hard for a clean cinematic disc edge. Designed for hero copy, marketing taglines, or any moment where you want the text to come alive under the user's cursor like a torch sweeping a darkened wall.
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 spotlight-text text effect into my projectRelated Components
Text Hover Effect
SVG text with radial gradient mask reveal on hover
Iris Text
Letters revealed via expanding circular masks
Mask Reveal Text
Colored panel sweeps across text in a two-phase wipe
Text Pressure
Variable font weight responding to cursor proximity
Magnet Text
Letters magnetically attracted toward the cursor
Chromatic Text
RGB chromatic aberration following the cursor
FAQ
Was this page helpful?
Sign in to leave feedback.