Shadcn.io is not affiliated with official shadcn/ui
Magnify Text
Cursor-driven magnifying glass that scales a circular region of text in place with a glass rim and spring-smoothed motion for React, Next.js, and motion.
Magnify Text preview
A real magnifying glass that follows your cursor across the headline — the region inside the lens renders the same text scaled up by 1.5x (configurable), so glyphs grow as the loupe passes over them and shrink back as it leaves. Two perfectly aligned text layers do the work: a base layer at normal size, and a duplicate layer scaled up and clipped to a circular clip-path bound to the cursor. A subtle 1px rim ring around the clip sells the glass-edge illusion. Cursor position is tracked via useMotionValue and routed through useSpring (stiffness 280) so the lens glides like a heavy physical object, never snapping. Configure the lens diameter, the magnification factor, and the rim color. Perfect for product page headlines, demo sections, easter eggs in landing copy, or anywhere a hero word deserves to be inspected up close.
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 magnify-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
Text Pressure
Variable font weight responding to cursor proximity
Magnet Text
Letters magnetically attracted toward the cursor
True Focus
Depth-of-field text with animated focus bracket
Chromatic Text
RGB chromatic aberration following the cursor
FAQ
Was this page helpful?
Sign in to leave feedback.
Magnet Text
Per-character magnetic cursor attraction that physically translates each letter toward the pointer with spring physics and smoothstep falloff for React, Next.js, and motion.
Mask Reveal Text
Colored panel sweeps across text in a two-phase wipe to dramatically reveal the content from behind a sliding mask for React applications.