중심 한 점에서 작은 입자들이 사방으로 순식간에 터져 나가는 그래픽 액센트. 로고 등장·타이틀 강조·전환의 임팩트를 보태는 데 씁니다.
디자인 아틀라스<div class="stage"><canvas id="c"></canvas></div>.stage{position:absolute;inset:0}
#c{position:absolute;inset:0;width:100%;height:100%}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);After Effects의 파티클 전용 플러그인(Trapcode Particular)이나 내장 CC Particle World로 만든다. 방출 각도를 360도 전체로, 속도(velocity)에 무작위성을 살짝 섞어 입자마다 날아가는 거리를 다르게 하면 "터지는" 느낌이 산다.
핵심 파라미터는 세 가지다 — 한 번에 몇 개를 방출하는지(버스트 수), 얼마나 빨리 퍼지는지(속도), 얼마나 빨리 사라지는지(수명·페이드아웃). 이 셋의 조합이 "가벼운 반짝임"과 "묵직한 폭발"을 가른다.
로고나 텍스트가 나타나는 정확한 프레임에 버스트의 정점을 맞춰야 두 요소가 한 사건처럼 느껴진다. 타이밍이 어긋나면 파티클과 타이틀이 별개의 레이어로 보인다.
파티클 색은 브랜드 컬러 안에서 고르세요. 무지개색 파티클은 대부분 브랜드 톤과 어긋납니다.