Matter.js Confetti Cannon — Free Physics-Based Confetti Burst Snippet

<div class="mc-wrap">
  <canvas id="mcCanvas" class="mc-canvas"></canvas>
  <button class="mc-btn" id="mcFire">Launch confetti</button>
</div>

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:system-ui,-apple-system,sans-serif;background:#0b0c14;color:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden}
.mc-wrap{position:relative;width:min(92vw,520px);height:min(70vh,420px);border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#12142280 0%,#0b0c14 100%);border:1px solid #1f2236}
.mc-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mc-btn{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);padding:12px 26px;border-radius:999px;border:none;background:linear-gradient(135deg,#f97316,#ec4899);color:#fff;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 8px 26px rgba(236,72,153,.4);z-index:2}
.mc-btn:active{transform:translateX(-50%) scale(.96)}

const { Engine, Render, Runner, World, Bodies, Body, Events } = Matter;

const wrap = document.querySelector('.mc-wrap');
const canvas = document.getElementById('mcCanvas');

function size() {
  return { w: wrap.clientWidth, h: wrap.clientHeight };
}
let { w, h } = size();

const engine = Engine.create();
engine.gravity.y = 1;

const render = Render.create({
  canvas,
  engine,
  options: {
    width: w,
    height: h,
    wireframes: false,
    background: 'transparent',
  },
});
Render.run(render);
const runner = Runner.create();
Runner.run(runner, engine);

// Floor and side walls so confetti bounces and settles instead of falling
// off the bottom of the canvas forever.
function makeBounds(w, h) {
  const t = 40;
  return [
    Bodies.rectangle(w / 2, h + t / 2, w + t * 2, t, { isStatic: true, render: { visible: false } }),
    Bodies.rectangle(-t / 2, h / 2, t, h + t * 2, { isStatic: true, render: { visible: false } }),
    Bodies.rectangle(w + t / 2, h / 2, t, h + t * 2, { isStatic: true, render: { visible: false } }),
  ];
}
let bounds = makeBounds(w, h);
World.add(engine.world, bounds);

window.addEventListener('resize', () => {
  const s = size();
  w = s.w; h = s.h;
  render.canvas.width = w;
  render.canvas.height = h;
  render.options.width = w;
  render.options.height = h;
  World.remove(engine.world, bounds);
  bounds = makeBounds(w, h);
  World.add(engine.world, bounds);
});

const colors = ['#f97316', '#ec4899', '#6366f1', '#22c55e', '#fbbf24', '#06b6d4', '#a78bfa'];

function launchConfetti() {
  const originX = w / 2;
  const originY = h - 30;
  const pieces = [];

  for (let i = 0; i < 60; i++) {
    const isCircle = Math.random() > 0.5;
    const color = colors[i % colors.length];
    const size2 = 6 + Math.random() * 6;
    const body = isCircle
      ? Bodies.circle(originX, originY, size2 / 2, {
          restitution: 0.55,
          friction: 0.15,
          render: { fillStyle: color },
        })
      : Bodies.rectangle(originX, originY, size2, size2 * 0.6, {
          restitution: 0.5,
          friction: 0.2,
          render: { fillStyle: color },
        });
    pieces.push(body);
  }

  World.add(engine.world, pieces);

  pieces.forEach((body) => {
    const angle = (-Math.PI / 2) + (Math.random() - 0.5) * 1.4;
    // setVelocity, not applyForce: applyForce divides by each body's own
    // mass to get velocity, so these deliberately tiny, randomly-sized
    // pieces (mass varies with radius) would launch at wildly different,
    // often absurd speeds for the same force value. setVelocity gives every
    // piece a consistent, predictable launch speed regardless of its mass.
    const speed = 6 + Math.random() * 8;
    Body.setVelocity(body, {
      x: Math.cos(angle) * speed,
      y: Math.sin(angle) * speed,
    });
    Body.setAngularVelocity(body, (Math.random() - 0.5) * 0.4);
  });

  // Clean up old confetti after it settles, so repeated bursts don't
  // accumulate hundreds of resting bodies and slow the simulation down.
  setTimeout(() => {
    World.remove(engine.world, pieces);
  }, 6000);
}

document.getElementById('mcFire').addEventListener('click', launchConfetti);