Text Displacement Cursor Repel
What it does
Headings and paragraph text are split into individual letters and words that get pushed away from the cursor within a 150px radius, the displacement force scaling with proximity. Pure requestAnimationFrame with per-element lerp smoothing (no GSAP) drives the elastic follow-and-settle motion via CSS transforms on mousemove.
How it's built
| Category | text |
|---|---|
| Tech | vanilla JS |
| Complexity | page |
| Performance cost | light |
| Mobile-safe | desktop-first |
Rebuild it with AI
This component's prompt is part of the paid library. Below you can read how it starts; the full prompt, the exact structure, timing and easing an AI agent needs to rebuild the effect, unlocks with any paid plan, yearly or lifetime.
# Text Displacement Cursor Repel (letters & words flee the cursor)
## Goal
Build a full-viewport dark typographic page where **two giant headings and a justified paragraph are split into individual letters (headings) and words (paragraph), and every fragment is elastically pushed away from the mouse cursor: any fragment whose original center lies within a 150px radius of the cursor gets a displacement force pointing radially away from the mouse, scaling linearly up to 300px at zero distance, and every fragment eases toward its target each frame with per-element lerp smoothing (factor 0.1), so text bulges away from the cursor and springs softly back to place when the mouse leaves**. The star effect is this smooth repel-and-settle displacement field over live text.
## Tech
Vanilla HTML/CSS/JS with an ES module script (`<script type="module" src="./script.js">`). **No GSAP, no plugins, no Lenis, no libraries at all** — the entire effect is manual DOM text splitting, one `mousemove` listener, per-element linear interpolation (lerp), and an infinite `requestAnimationFrame` loop writing inline CSS `transform: translate(x, y)`. There is no scroll interaction.
## Layout / HTML
```
div.container (full-viewport flex stage)
h1.anime-header "one subscription"
p.anime-text (long justified paragraph, see text below)
h1.anime-header "endless web design"
```
…
Premium prompt
Unlock this prompt, and every other one
From $99/year, or $139 once for lifetime access. Commercial license included.
See pricing Or start with the free set Already bought? Sign in
New components in your inbox
One email a week, only when new components ship, each with its live demo and prompt.