← All effects

Text Repel

TextVanilla JS · zero dependenciescursor-driven · one force per letter
sweep the cursor through the text
-- fps
prefers-reduced-motion detected — text shown still

X-ray · layers

letters flee the cursor (off = they hold still)
they ease home (off = they stay shoved)
a push also rotates and fades the letter

Parameters

Your text 
Radius90 px
Push60
Return spring0.14
your version · updates as you tinker

How this effect works

Each letter is its own little element that remembers one thing: its offset from where it belongs. Every frame it asks a single question — how close is the cursor? Inside RADIUS pixels it gets pushed directly away, hardest when the cursor is right on it and fading to nothing at the edge of the radius. That's the whole repel: a vector pointing from the cursor to the letter, scaled by how near it is.

Left alone, a second rule pulls it home: offset += (0 - offset) * SPRING, the same one-line spring behind half the effects here. Turn spring back off and the letters stay wherever you shoved them — proof that the returning is a choice, not gravity. Scatter reuses the push distance it already computed to also rotate and fade each letter, so a hard shove looks flung, not slid. Nothing here is per-letter scripted; every glyph runs the identical two rules.

Production notes: respects prefers-reduced-motion (text sits still) · letters are spans transformed on the compositor — no layout thrash · your text is escaped before it reaches the page · on touch, drag through the text · the copied snippet is self-contained HTML + CSS + JS.