Shadcn.io is not affiliated with official shadcn/ui
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.
Magnet Text preview
Each letter behaves like a tiny iron filing — measured at mount, indexed by its center, then pulled toward the cursor whenever the pointer enters its activation radius. The pull is shaped by a smoothstep falloff so nearby letters drag hard while distant ones barely twitch, and a Motion useSpring smooths the trajectory so glyphs accelerate, settle, and snap back instead of teleporting. Spaces stay rigid. Different from text-pressure (which only morphs font axes) and variable-proximity (which animates variable-font weight): this component physically translates the letters in 2D. Configure the radius of attraction and strength of the pull, then drop it into a hero, a CTA, or a navigation link to give type real, tangible inertia.
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 magnet-text text effect into my projectRelated Components
Text Pressure
Variable font weight responding to cursor proximity
Variable Proximity
Variable-font axes that follow the cursor
Text Hover Effect
SVG text with radial gradient mask reveal
Text Trail
Cursor trail that paints letters in its wake
Text Cursor
Character trails following cursor movement
Wave Text
Letters undulating along a continuous sine wave
FAQ
Was this page helpful?
Sign in to leave feedback.
Log Stream Text
Live `tail -f` style log feed where new timestamped lines append at the bottom and old lines fade up and out at the top for React applications.
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.