Shadcn.io is not affiliated with official shadcn/ui
Variable Proximity
Variable font properties responding to cursor proximity with configurable falloff for React applications.
Individual characters respond to cursor proximity by adjusting their variable font axes—weight, width, slant, and any custom axis your font supports. Each letter tracks the cursor and interpolates between two font-variation-settings states based on distance. Features multiple falloff curves (linear, exponential, gaussian) for different response feels. Uses requestAnimationFrame for smooth 60fps updates. Built with Motion for React and vanilla DOM manipulation. Perfect for interactive typography, creative hero sections, or showcasing variable font capabilities.
Variable Proximity preview
Installation
Related Components
Text Pressure
Variable font responding to cursor proximity
Scrambled Text
Proximity-based character scrambling with GSAP
Text Cursor
Character trails following cursor movement
Text Hover Effect
SVG text with radial gradient mask reveal
Blur Text
Text animation from blur to focus
Glitch Text
Digital glitch effects with RGB channel separation