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

Most confetti effects fake physics with CSS keyframes and hand-tuned easing curves — see confetti button for that approach. This snippet uses Matter.js, a real 2D rigid-body physics engine, so every piece of confetti actually has mass, velocity, restitution, and collides with the floor and walls (and, briefly, each other) rather than following a pre-baked trajectory — the burst looks different every time you click it.

Engine, renderer, and runner

Matter.js separates three concerns: Engine runs the physics simulation (gravity, collisions, constraints), Render draws the current body states to a canvas, and Runner drives the engine forward on a fixed timestep loop. This snippet wires up all three against the same canvas, with engine.gravity.y = 1 set explicitly so confetti actually falls once launched, rather than floating.

Invisible bounds keep the burst contained

Three static bodies — a floor and two side walls, all with render: { visible: false } — bound the play area so confetti bounces and settles inside the canvas instead of falling through the bottom edge forever (Matter.js bodies fall infinitely without a floor to collide with). makeBounds() is recreated on window resize so the walls always match the current canvas size.

Launching a burst with real forces

launchConfetti() creates 60 mixed circle and rectangle bodies at a point near the bottom-center, each with randomized restitution (bounciness) and friction, then calls Body.applyForce with a randomized upward-ish angle and magnitude per piece — an actual physics impulse, not a CSS animation-fill-mode. Body.setAngularVelocity gives each piece independent spin. Because the engine resolves gravity, drag, and collisions every tick, pieces naturally spread, tumble, bounce off each other and the floor, and settle at different rates.

Cleanup so bursts don't accumulate

Each burst's bodies are removed from the world 6 seconds after launch via World.remove, so clicking the button repeatedly doesn't leave hundreds of resting bodies in the simulation, which would otherwise slow collision resolution down over time.

Where this fits

For a lighter CSS-only confetti burst, see confetti button or canvas confetti burst; for real physics without confetti, see physics balls, physics 2D burst, or physics props pucks — this snippet borrows the same Matter.js setup pattern and applies it to a celebratory launch instead of draggable or falling props.

Customizing it

Change engine.gravity.y for a floatier or heavier fall, tune restitution/friction per body for bouncier or stickier confetti, or increase the piece count for a denser burst (watch performance if you also increase the cleanup delay).