JavaScript animation example
JavaScript Particle Effect: Text Made of Particles
Particle text is a classic hero effect: a word drawn from hundreds of dots that react to your cursor. The particles sample the shape of the text, fly in to their places on load, get pushed away when the pointer comes near, and spring back home when it leaves. Click to explode them and watch them reassemble.
- 4.3 KB file
- 5 live inputs
- JavaScript runtime
How this particle text works
- The word is rendered off-screen once, and particle targets are sampled from its filled pixels.
- Each particle is a spring toward its target plus a repulsion force within the pointer radius.
- Clicking gives every particle a random kick; changing the word resamples the targets.
Add it to your JavaScript app
Install exodeui-vanilla, download the file below, and paste this. The code updates as you customize. Other runtimes are in the other tabs.
import { ExodeUICanvas } from 'exodeui-vanilla';
// <canvas id="javascript-particle-text" style="width: 100%; height: 460px"></canvas>
const player = new ExodeUICanvas({
element: '#javascript-particle-text',
fit: 'Layout',
onReady: (engine) => { },
});
player.load(await (await fetch('/javascript-particle-text.exode')).json());
player.play();Inputs
| Input | Type | Default | Range |
|---|---|---|---|
word | Text | EXODE | — |
repel | Number | 90 | 30 – 200 |
accent | Text | #22d3ee | hex colour |
accent2 | Text | #a78bfa | hex colour |
bg | Text | #05060a | hex colour |
More JavaScript animations
Segmented Ring SpinnerTwelve segments in a ring with a rotating bright head and fading tail: the classic activity spinner.Terminal Typing EffectA terminal that types commands with human rhythm, prints their output and loops through a script.Scroll Reveal TimelineA timeline whose line draws with scroll progress while milestone cards slide in from alternating sides.Curtain Wipe TransitionStaggered curtain panels sweep across, the page swaps underneath and the curtains pull away.Magnetic Confetti ButtonA button that leans toward the cursor like a magnet and bursts into spinning confetti on click.Blob Cursor LinksA blob cursor that stretches with speed and swells over links whose underlines draw in and out.
The same idea in other frameworks: React scramble text · React like heart icon · Flutter wavy typewriter