Confetti Cannons - Live Demo

Interactive demos of hcg-confetti-cannons. Every option is shown below: particleCount, angle, spread, startVelocity, gravity, decay, drift, ticks, scalar, colors, shapes, emojis, flat, origin, presets, and confetti.create(). Version . Documentation

1. Basic burst

confetti() from the bottom center. Uses particleCount, spread, and origin.

Try it
View usage code 
confetti({
  particleCount: 120,
  spread: 70,
  origin: { x: 0.5, y: 0.9 },
});
confetti.reset();

2. Dual cannons

angle and origin with Promise.all() for two simultaneous bursts.

Try it
View usage code 
Promise.all([
  confetti({ angle: 60, origin: { x: 0, y: 1 }, particleCount: 80 }),
  confetti({ angle: 120, origin: { x: 1, y: 1 }, particleCount: 80 }),
]);

3. Click to fire

Set origin from the click position (normalized 0 to 1).

Click zone
Click anywhere here to launch confetti
View usage code 
element.addEventListener('click', (e) => {
  confetti({
    particleCount: 60,
    spread: 55,
    origin: {
      x: e.clientX / window.innerWidth,
      y: e.clientY / window.innerHeight,
    },
  });
});

4. Presets

celebrate(), fireworks(), and schoolPride() built-in sequences.

Try it
View usage code 
confetti.celebrate();
confetti.fireworks({ duration: 3000, interval: 250 });
confetti.schoolPride({ colors: ['#0057b7', '#ffd700'] });

5. emojis

emojis array or confetti.emoji() for emoji particles instead of shapes.

Try it
View usage code 
confetti.emoji({ particleCount: 80, spread: 70 });

confetti({
  emojis: ['🎉', '🎊', '🥳', '💫'],
  particleCount: 100,
  spread: 80,
});

6. shapes

shapes controls particle shape: square, circle, star, arc, curl, or any mix.

Try it
View usage code 
confetti({ shapes: ['square', 'circle'], particleCount: 80 });
confetti({ shapes: ['square'], particleCount: 80 });
confetti({ shapes: ['circle'], particleCount: 80 });

7. star, arc, curl

Flat vector-style pieces: filled star, stroked arc curves, and looping curl spirals. Each piece rotates and falls as one unit.

Try it
View usage code 
confetti({ shapes: ['star'], particleCount: 70, spread: 90 });
confetti({ shapes: ['arc'], particleCount: 60, spread: 90 });
confetti({ shapes: ['curl'], particleCount: 60, spread: 90 });

confetti({
  shapes: ['star', 'arc', 'curl', 'square', 'circle'],
  colors: ['#ff6b6b', '#ffd93d', '#ff8fab', '#6c9eff', '#4ecdc4'],
  particleCount: 120,
  spread: 100,
  origin: { x: 0.5, y: 0.5 },
});

8. colors

colors sets the hex palette for shape particles.

Try it
View usage code 
confetti({
  colors: ['#ffd700', '#ffb700', '#fff4b8', '#ffffff'],
  particleCount: 100,
  spread: 70,
});

9. startVelocity

startVelocity sets how fast particles launch from the cannon.

Try it
View usage code 
confetti({ startVelocity: 25, particleCount: 80 });
confetti({ startVelocity: 70, particleCount: 80 });

10. gravity

gravity pulls particles downward each frame.

Try it
View usage code 
confetti({ gravity: 0.35, particleCount: 80 });
confetti({ gravity: 1.2, particleCount: 80 });

11. decay

decay slows horizontal and vertical speed each frame (0 to 1).

Try it
View usage code 
confetti({ decay: 0.96, particleCount: 80 });
confetti({ decay: 0.82, particleCount: 80 });

12. drift

drift adds horizontal movement while falling (negative = left, positive = right).

Try it
View usage code 
confetti({ drift: -2, particleCount: 80 });
confetti({ drift: 2, particleCount: 80 });

13. ticks

ticks is particle lifetime in animation frames.

Try it
View usage code 
confetti({ ticks: 120, particleCount: 80 });
confetti({ ticks: 450, particleCount: 80 });

14. scalar

scalar scales particle size.

Try it
View usage code 
confetti({ scalar: 0.6, particleCount: 100 });
confetti({ scalar: 1.8, particleCount: 60 });

15. flat

flat: true disables tilt and wobble (no tumbling while falling).

Try it
View usage code 
confetti({ particleCount: 80, flat: false });
confetti({ particleCount: 80, flat: true });

16. origin

origin.x and origin.y are normalized from 0 to 1 across the viewport.

Try it
View usage code 
confetti({ origin: { x: 0.5, y: 0.9 } });
confetti({ origin: { x: 0.5, y: 0.5 } });
confetti({ origin: { x: 0.5, y: 0.1 } });

17. All options playground

Combine every option, then fire one burst with your settings.

Controls
View usage code 
confetti({
  particleCount: 100,
  angle: 90,
  spread: 70,
  startVelocity: 60,
  decay: 0.91,
  gravity: 0.75,
  drift: 0,
  ticks: 300,
  scalar: 1,
  shapes: ['square', 'circle'],
  flat: false,
  origin: { x: 0.5, y: 0.7 },
});

18. Custom canvas

confetti.create(canvas, { resize: true }) renders inside one element. Instance has reset() and destroy().

Scoped canvas
View usage code 
const canvas = document.getElementById('my-canvas');
const scoped = confetti.create(canvas, { resize: true, zIndex: 100 });

scoped({ particleCount: 80, spread: 80, origin: { x: 0.5, y: 0.8 } });
scoped.reset();
scoped.destroy();

19. API methods

confetti.fire() is an alias for confetti(). disableForReducedMotion skips animation when the user prefers reduced motion (forced off in this demo).

Try it
View usage code 
await confetti({ particleCount: 50 });
await confetti.fire({ particleCount: 50 });

console.log(confetti.version);

confetti({
  disableForReducedMotion: true,
});

This demo sets disableForReducedMotion: false so you can preview animation even with reduced motion enabled in your OS.