▶ Motion graphics

Particle burst

파티클 버스트

A graphic accent where dozens of small particles burst outward from a single point all at once — used to punctuate a logo reveal, a title, or a transition.

Also known as: Explosion particlesBurst FX

···

html

<div class="stage"><canvas id="c"></canvas></div>

css

.stage{position:absolute;inset:0}
#c{position:absolute;inset:0;width:100%;height:100%}

js

const canvas = document.getElementById('c');
const ctx = canvas.getContext('2d');
function resize() { canvas.width = innerWidth; canvas.height = innerHeight; }
resize();
addEventListener('resize', resize);
const N = 34;
const COLORS = ['#5b5bf7', '#f25c8a', '#18c29c', '#ffffff'];
const LIFE = 1500;
const INTERVAL = 700;
let bursts = [];
function spawnBurst(now) {
  const cx = innerWidth / 2, cy = innerHeight / 2;
  const particles = Array.from({ length: N }, () => {
    const a = Math.random() * Math.PI * 2;
    const speed = 55 + Math.random() * 110;
    return { vx: Math.cos(a) * speed, vy: Math.sin(a) * speed, r: 2 + Math.random() * 2.6, color: COLORS[Math.floor(Math.random() * COLORS.length)] };
  });
  bursts.push({ cx, cy, particles, born: now });
}
let lastSpawn = -Infinity;
function loop(now) {
  if (now - lastSpawn >= INTERVAL) { spawnBurst(now); lastSpawn = now; }
  bursts = bursts.filter((b) => now - b.born < LIFE);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (const b of bursts) {
    const age = now - b.born;
    const p = age / LIFE;
    const fade = Math.max(0, 1 - p);
    if (age < 140) {
      ctx.globalAlpha = Math.max(0, 1 - age / 140) * 0.9;
      ctx.fillStyle = '#ffffff';
      ctx.beginPath();
      ctx.arc(b.cx, b.cy, 18, 0, Math.PI * 2);
      ctx.fill();
    }
    for (const pt of b.particles) {
      ctx.globalAlpha = fade;
      ctx.fillStyle = pt.color;
      ctx.beginPath();
      ctx.arc(b.cx + pt.vx * p, b.cy + pt.vy * p, pt.r, 0, Math.PI * 2);
      ctx.fill();
    }
  }
  ctx.globalAlpha = 1;
  requestAnimationFrame(loop);
}
requestAnimationFrame(loop);

Built with a dedicated particle plugin (Trapcode Particular) or After Effects' built-in CC Particle World. Setting the emission angle to a full 360° and adding a little randomness to velocity — so particles travel different distances — is what sells the "burst" feeling.

Three parameters do the real work: how many particles fire at once (the burst count), how fast they spread (velocity), and how fast they fade (life and fade-out). The mix of those three is the difference between a light sparkle and a heavy explosion.

The burst has to peak on the exact frame the logo or title appears — nail that and the two read as one event; miss it and the particles and the title look like two unrelated layers.

When to use

Pull the particle colors from the brand palette — rainbow-colored particles almost always clash with brand tone.