Kerning Text
Cursor-driven local kerning expansion that gently spreads letters apart wherever the pointer hovers, using a Gaussian falloff and direct DOM writes for smooth 60fps response in React, Next.js, and motion.
Kerning Text preview
At rest the text reads as a normal headline with whatever letter-spacing you set. As the cursor approaches, letters near the pointer push apart from one another — as if the cursor's weight were applying typographic pressure to a string of glyphs. The falloff is Gaussian, so the gap is widest directly under the cursor and tapers smoothly outward; nearby letters drift, distant letters do not move at all. A spring smooths the cursor track so the response feels alive rather than wired-direct, and per-letter marginLeft is written via refs inside a single requestAnimationFrame loop — the component never re-renders during interaction. Spaces stay rigid. Drop it into a typographically-aware hero, a designer portfolio, or any moment where the headline itself should feel responsive.
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 kerning-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
Magnet Text
Letters physically pulled toward the cursor
Text Trail
Cursor trail that paints letters in its wake
Splitting Text
Character, word, or line splitting with timing
True Focus
Word-by-word focus pull with a moving frame
FAQ
Was this page helpful?
Sign in to leave feedback.
JSON Text
Animated JSON display where keys type in letter-by-letter and values fade in afterward, with proper indentation and syntax-aware coloring for React applications.
LCD Text
Seven-segment LCD-style display where characters flicker through random glyphs before settling, with optional CRT scanlines and glow for React applications.