Xray Text
Cursor-driven hole punched through visible text to reveal a hidden secret string layered behind, with spring-smoothed circular cutout for React, Next.js, and motion.
Xray Text preview
Two text layers stack on top of each other — a visible headline on top, a secret string layered behind it. As the cursor moves, a soft circular hole is punched through the top layer using a mask-image: radial-gradient, exposing only the patch of secret text directly under the pointer. Outside the hole the visible copy reads completely normally; inside it the underlying message peeks through, like an x-ray scanning across a poster. Cursor coordinates flow through useMotionValue and useSpring (stiffness 250, damping 30), so the hole glides with a satisfying mass instead of jumping. The revealColor prop tints the secret text, size controls the cutout diameter, and the secret string can be shorter than the visible one — it'll just clip naturally to the visible bounds. Designed for product reveal pages, "hover to see what's coming" teasers, interactive marketing, and any moment where two layers of meaning need to live in the same headline.
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 xray-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.