Text Hover Distortion
Characters react to cursor proximity with push, pull, wave, or rotation effects. Perfect for interactive headings and navigation that respond to mouse movement.
About This Effect
An interactive text effect where individual characters react to cursor proximity with physics-based displacement. Characters push away, pull toward, wave, or rotate based on their distance from the mouse pointer. The effect creates a fluid, organic response that makes headings and navigation feel alive. Uses pure GSAP without any additional libraries for maximum compatibility.
What's Included
- Four distortion modes: push, pull, wave, and rotation
- Per-character physics calculations based on cursor distance
- Configurable influence radius and displacement strength
- Smooth return-to-origin with elastic easing
- Works with any font, size, and text content
- Real-time position tracking at 60fps with GSAP quickTo
- Automatic character wrapping and position measurement
- Desktop-focused with graceful mobile fallback
Perfect For
- Interactive hero headings on portfolio sites
- Creative navigation menus and sidebar links
- About page name and title displays
- Interactive exhibit and gallery labels
- Experimental typography showcases
How It Works
Each character is wrapped in a positioned span element. On mousemove, the effect calculates the distance from the cursor to each character's center point. Characters within the influence radius receive a displacement transform proportional to their distance — closer characters move more. The displacement direction is determined by the mode setting, and GSAP handles the smooth interpolation back to the rest position.