Particle Repel Text
Particle text effect: thousands of dots form the word and scatter away from the cursor, swirling and springing back home. Dots shift from navy to coral the farther they fly. Ideal as an interactive, animated website hero title.
Prompt · replace [TEXT]
Tool-agnosticBuild [TEXT] from about four thousand small round dots packed inside the letters of a heavy, wide grotesque typeface, ink navy on a warm cream paper background. Each dot sits on a spring tied to its home position. At rest an invisible point drifts slowly across the word, nudging dots aside in a small radius so the letters shimmer. On hover the pointer becomes a strong repeller: dots within a generous radius scatter away from it with a slight swirl, leaving a clean hole that follows the pointer, and their color shifts with distance from home through violet and coral to amber. When the pointer leaves, dots spring back with a soft overshoot and turn navy again. A press sends an expanding shockwave ring through the dots. Touch works the same way under the finger.
Visual DNA
- About 4,000 round dots packed into a heavy grotesque word
- Repulsion radius around the pointer with a gentle swirl
- Dots spring home with slight overshoot when the pointer leaves
- Color by displacement: ink navy, violet, coral, amber
- Press sends a shockwave ring through the dots
- Category
- Reactive Styles
- Demo built with
- Canvas
- Energy
- Lively
- Background
- Light bg
Also known as
No paywall, no sign-up. If a prompt saved you an hour, a coffee keeps new styles coming.
Keys: ← → browse · C copy