# 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.
Canonical: https://gsapvault.com/effects/elastic-repel-headline
Live demo: https://gsapvault.com/demos/elastic-repel-headline/index.html
| Property | Value |
|----------|-------|
| Type | effect |
| Tier | paid |
| Price | £5 |
| Difficulty | advanced |
| Plugins | Core GSAP only |
| Techniques | hover-effect, text-animation |
| Uses Lenis | No |
## Overview
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.
## Features
- 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
## Use Cases
- 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.
## Integration Preview
How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download.
### Quick Start
**1. Add to your HTML ``:**
```html
```
**2. Add before the closing `` tag:**
```html
```
No GSAP plugins are required. GSAP core is the only dependency.
**3. Add the headline anywhere in your ``:**
```html
LETTERS THATFIGHT BACK
```
Wrap each visual line in a `.erh-line` span. The script splits every line into per-letter spans automatically. If you omit `.erh-line`, the whole element is treated as a single line.
### Options
Set these as data attributes on the `[data-repel]` element.
| Attribute | Values | Default | Description |
|-----------|--------|---------|-------------|
| `data-repel-radius` | Any number (px) | `130` | Radius of the repulsion field around the pointer |
| `data-repel-strength` | Any number | `62` | Base push distance for a stationary cursor |
| `data-repel-speed` | Any number | `1` | How much cursor speed multiplies the throw (`0` = speed ignored) |
| `data-repel-blur` | Any number (px) | `6` | Peak motion blur; set `0` to disable the smear |
### Accessibility
- **Reduced motion:** with `prefers-reduced-motion: reduce`, no interaction is wired and the headline renders as ordinary static text. Nothing is hidden by CSS, so the headline is fully legible even before (or without) JavaScript.
- **Keyboard:** the headline is focusable (`tabindex="0"`, `role="button"`) and Enter or Space triggers the scatter, mirroring the pointer interaction.
- **Touch:** coarse-pointer devices get a tap-to-scatter equivalent of the cursor moment.
### Dependencies
**Required:**
- GSAP 3.12+ (core only)
**Optional:**
- None. No GSAP plugins and no Lenis are used.
## What You Get
- `index.html`: working demo page
- `assets/script.js`: commented, readable source
- `assets/style.css`: effect styles
- `README.md`: full documentation with examples and framework integration notes
- `LICENSE.txt`: standard license terms
- Lifetime updates: re-download anytime from your library
## Get the Code
This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries.
- [Buy Elastic Repel Headline](https://gsapvault.com/effects/elastic-repel-headline)
- [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects)
## Judge the Code Quality First
These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic):
- [Typewriter Text](https://gsapvault.com/effects/typewriter-text.md): Text types out character by character with a blinking cursor when scrolled into view. Supports looping phrases, custom speed, and delay controls.
- [Scroll Text Highlight](https://gsapvault.com/effects/scroll-text-highlight.md): Scroll-linked reading highlight that lights a paragraph word by word as you scroll, with the leading word flashing an accent colour before settling to full foreground.
---
From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt