Particle Explosion Click Button — Free HTML CSS JS Snippet

Micro-interactions are the small, disposable animations that make a click feel like it did something — a satisfying confirmation rather than a silent state change. This snippet builds a genuine physics-lite particle burst using the HTML5 Canvas API: clicking the button spawns 12 to 20 individually simulated particles that fly outward from the click point, fall under gravity, fade out over their lifetime, and get removed once fully transparent, while the button itself plays a squash-and-recoil animation to sell the impact.

Why canvas instead of DOM particles

A common naive approach animates particles as absolutely-positioned <div> elements. That works for a handful of particles, but every additional div is a full DOM node subject to layout, paint, and composite — with 15-20 particles animating every frame across many rapid clicks, DOM-based particles start to visibly stutter. This snippet instead draws every particle as an arc() fill directly onto a single <canvas> element, which is far cheaper: the browser rasterizes pixels rather than tracking and repainting dozens of live elements, and the entire particle system's memory footprint is just a plain JavaScript array of position/velocity objects, not DOM nodes.

The physics-lite simulation loop

Each particle object stores x, y, vx, vy (velocity), size, color, life (starting at 1, representing 100% opacity), and decay (how fast life depletes per frame). On each requestAnimationFrame tick, the update order is: apply gravity to vertical velocity (p.vy += GRAVITY), apply velocity to position (p.x += p.vx; p.y += p.vy), and decrement life by decay. This is Euler integration — the simplest possible numerical simulation, but visually convincing at these timescales and particle counts because the human eye doesn't need physically exact projectile motion to read "explosion." globalAlpha is set to p.life before drawing each particle so it visibly fades as its life depletes, and once life drops to zero or below, the particle is dropped from the array with particles.filter(p => p.life > 0) — this is the actual DOM-node-equivalent removal step, just applied to an array element instead of an element.

Randomizing angle and velocity for a natural burst shape

spawnBurst() picks a random angle in radians from 0 to 2π for every particle (Math.random() * Math.PI * 2) and derives vx/vy from that angle with Math.cos(angle) * speed and Math.sin(angle) * speed, where speed itself is randomized within a range. This trigonometric decomposition is what produces a genuinely radial 360-degree burst rather than particles all flying in the same direction — any angle is equally likely, and randomized speed and decay per particle mean no two particles trace an identical arc, which is what reads as "explosion" rather than a mechanical, repeating pattern.

High-DPI canvas sizing and the animation loop lifecycle

resizeCanvas() handles a detail that's easy to get wrong on Retina/high-DPI displays: it reads window.devicePixelRatio, sizes the canvas's backing buffer to rect.width * dpr while keeping the CSS style.width at the logical size, and calls ctx.setTransform(dpr, 0, 0, dpr, 0, 0) so all subsequent drawing calls can still use logical (CSS) pixel coordinates while rendering at full device resolution — skip this and the particles look soft and pixelated on Retina screens. The animation loop itself is lazily started and stopped: spawnBurst() only calls requestAnimationFrame(tick) if a loop isn't already running (if (!rafId)), and tick() stops rescheduling itself once the particle array empties, so the browser isn't burning frames on an idle canvas between clicks — clicking rapidly just adds more particles into the same already-running loop rather than starting redundant loops.

The button's own recoil animation

Independent of the canvas particles, the button element gets a .recoil class toggled via the standard remove-reflow-readd pattern (btn.classList.remove('recoil'); void btn.offsetWidth; btn.classList.add('recoil')) so the CSS @keyframes btn-recoil squash-and-rebound animation restarts cleanly even on rapid consecutive clicks, rather than silently failing to replay because the class was never actually removed from the DOM before being re-added in the same synchronous tick.