Elastic Repel Headline
A cursor-repulsion display headline whose letters flee the pointer, scaled by cursor speed, then spring back home with an elastic overshoot, motion blur, and a scale dip.
About This Effect
An interactive display headline that shoves each letter out of the cursor's path. Displacement is scaled by pointer speed, so a slow drag nudges the letters while a fast flick throws them far, each fleeing radially away from the pointer through a soft radius field.
The same input drives three secondary channels at once: letters tilt as they are shoved, smear with a velocity-driven blur, and dip in scale and opacity at peak displacement, so the extreme state reads as force rather than mere position. As the cursor leaves, every letter overshoots its home and settles with an elastic spring. On touch devices, tapping the headline fires a one-shot scatter-and-settle so phone visitors still see the signature moment.
What's Included
- Speed-scaled repulsion: a fast cursor whip throws letters far, a slow pass only nudges them
- Radial soft-field falloff so letters flee directly away from the pointer, strongest at the centre
- Elastic overshoot settle (elastic.out) so letters spring past home and back, never a flat snap
- Three secondary channels from one input: per-letter rotation, velocity-driven blur smear, and a scale/opacity dip
- Built on GSAP core only with quickTo and quickSetter drivers, no plugins to load
- Touch answer: tapping the headline triggers a one-shot scatter-and-settle from the tap point
- Keyboard accessible: the headline is focusable and Enter or Space scatters the letters
- Fully configurable radius, strength, speed influence, and blur via data attributes
Perfect For
- Hero headlines on agency and portfolio sites that reward the visitor for moving the cursor
- Landing page mastheads where a playful, physical interaction sets the tone
- Product launch and campaign pages needing one memorable, clip-worthy moment
- Event or conference titles that invite the visitor to whip the cursor through them
- Editorial and brand display type where the copy itself becomes the interaction
How It Works
SplitText is not needed: the script wraps each letter of any [data-repel] headline in its own inline-block span, keeping words in a nowrap wrapper so a shoved letter never reflows. A gsap.ticker loop reads the pointer position and its per-frame speed, and for every letter within the radius computes a radial push whose magnitude combines a distance falloff with a speed boost, driving x, y, and rotation through per-letter gsap.quickTo functions.
When a letter leaves the radius, a single gsap.to with an elastic.out ease returns it home with overshoot. A second per-frame pass derives the secondary channels from each letter's actual motion, mapping real velocity to a CSS blur variable and displacement to scale and opacity, and gsap.matchMedia routes coarse-pointer visitors to a tap-driven scatter and reduced-motion visitors to plain static text.