Text Cursor Proximity transforms ordinary text into an interactive visual system that responds dynamically to user movement. Each letter reacts individually to cursor proximity — scaling, shifting color, and creating a ripple-like interaction that feels smooth, organic, and immersive.
Built with real-time motion physics, this component adds depth and engagement to typography without overwhelming your design.
Per-Letter InteractionEach character responds independently to cursor movement, creating a rich, layered effect.
Smooth Proximity PhysicsDistance-based calculations ensure natural transitions with no jitter or abrupt motion.
Multiple Falloff ModesChoose between linear, exponential, or gaussian falloff to control how interaction spreads across text.
Dynamic Scale & Color MappingLetters smoothly transition between sizes and colors based on proximity.
Real-Time Animation EnginePowered by motion values and animation frames for high-performance interactions.
Fully Responsive LayoutWorks across different screen sizes while maintaining consistent interaction behavior.
Text & Typography
Custom text label
Full font control (size, weight, spacing, alignment)
Interaction Controls
Interaction radius
Falloff type (linear, exponential, gaussian)
Visual Effects
Idle color
Active (hover) color
Idle scale
Active scale
Layout
Background color
Responsive wrapping and alignment
Hero headlines
Interactive landing pages
Portfolio typography
Creative agency websites
Web experiments and showcases
Branding-focused UI sections
Typography is usually static — this makes it reactive and alive.
Instead of adding more UI elements, this component enhances what you already have:your text becomes the interaction.
The result is subtle but powerful — a modern, high-end feel that instantly elevates your design.
Launchly
