Back to Gallery
Text Hover Distortion
£5 Standard License Unlimited projects
Characters react to cursor proximity with push, pull, wave, or rotation effects. The pointer field can be read from a whole section, and buttons anywhere on the page can switch mode live.
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 pointer, and the pointer field can be read from a containing section so the type starts reacting before the cursor is on top of it. Every setting can be retuned at runtime, so a single line of type can demonstrate all four modes. The demo is a type specimen sheet: one display line and two smaller sizes sharing the same field, with a toolbar that switches mode and depth live. Uses pure GSAP without any additional libraries.
What's Included
- Four distortion modes: push, pull, wave, and rotation
- Per-character physics calculations based on cursor distance
- Configurable influence radius, displacement strength and falloff curve
- Pointer field readable from any container, not just the text itself
- Runtime retuning with setMode and setOptions, plus external mode and depth buttons
- Live readouts of the current settings and a bubbling distort:change event
- Smooth return-to-origin with three easing presets
- Works with any font, size, and text content
- Real-time position tracking at 60fps with GSAP quickTo
- Desktop-focused with a tap-to-ripple mobile fallback
Perfect For
- Interactive hero headings on portfolio sites
- Type specimen and foundry pages
- 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 its own inline-block span. While the pointer is inside the tracked area — the text element, or any container named with data-distort-area — a requestAnimationFrame loop measures the distance from the cursor to each character's centre and scales the displacement by the chosen falloff curve, so closer characters move further. The mode setting decides the direction: away, toward, a radial wave, or a rotation facing the cursor. GSAP quickTo interpolates every character back to rest, and changing a setting at runtime rebuilds only the quick setters that changed.
Difficulty Advanced
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates
