• Uses a single canvas to render full-screen confetti.
• Supports image-based confetti.
• Allows full customization of confetti behavior using onCreate and onUpdate hooks.

Simple Demo

Firework Demo

Advanced Demo

npm install svelte-canvas-confetti

The package includes four Svelte components.

Adds confetti falling from the top of the screen.

<script>
  import { FallingConfetti } from 'svelte-canvas-confetti';
</script>

<FallingConfetti />

Adds a confetti burst anywhere on the screen. It requires an origin position.

<script>
  import { ConfettiBurst } from 'svelte-canvas-confetti';
</script>

<ConfettiBurst origin={[window.innerWidth / 2, window.innerHeight / 2]} />

Adds a confetti cannon that can shoot out directional confetti. It requires an origin position.

<script>
  import { ConfettiCannon } from 'svelte-canvas-confetti';
</script>

<ConfettiCannon origin={[window.innerWidth / 2, window.innerHeight]} />

Adds any type of confetti. This is the main component that the other three are just simple wrappers around.

If no properties are passed in, it will create the same result as FallingConfetti.

<script>
  import { Confetti } from 'svelte-canvas-confetti';
</script>

<Confetti />

Number of particles to create.

Type: number Default value: 50 Example:

<Confetti particleCount={100} />

A list of styles used to render particles. Can be any valid HTML color or an HTMLImageElement.

Type: Array<string | HTMLImageElement> Default value: ['hotpink','gold','dodgerblue','tomato','rebeccapurple','lightgreen','turquoise'] Example:

<Confetti styles={['red', '#00ff00', 'hsl(120, 65%, 85%)']} />

The origin of the particles. If this is not used, the particles will fall from the top of the screen.

Type: [number, number] Default value: undefined Example:

<Confetti origin={[100, 100]} />

The initial force used to shoot out confetti. This has no effect if origin is not used.

Type: number Default value: 15 Example:

<Confetti origin={[50, 50]} force={25} />

The angle used to shoot out confetti. This has no effect if origin is not used. It can be combined with spread to create a "cannon".

Type: number Default value: 0 Example:

<Confetti origin={[50, 50]} angle={90} />

The spread used when creating each particles initial direction. The particle's initial direction will be a value between angle - spread / 2 and angle + spread / 2. This has no effect if origin is not used.

Type: number Default value: 360 Example:

<Confetti origin={[100, 100]} spread={45} />

This can be used to override the properties of each particle at creation time.

Type: (particle) => particle Default value: undefined Example:

<Confetti 
  onCreate={(particle) => {
    particle.x = 0;
    particle.y = 0;
    return particle;
  }} 
/>

This can be used to override the properties of each particle at update time.

Type: (particle, deltaTime) => void Default value: undefined Example:

<Confetti 
  onCreate={(particle) => {
    particle.x += Math.random() * 5;
  }} 
/>

export type Particle = {
  // Stop updating/rendering the particle once it is "dead" (ie off screen) 
  dead: boolean;
  
  // The total time since the particle was created.
  life: number;
  
  // The delay between the creation of the particle and when it starts updating/rendering (in seconds).
  delay: number;

  // The x position of the particle.
  x: number;

  // The y position of the particle.
  y: number;

  // The current angle of the particle.
  angle: number;

  // The rotation speed of the particle.
  da: number;

  // The horizontal speed of the particle.
  dx: number;

  // The vertical speed of the particle.
  dy: number;

  // The width of the particle (not used with images).
  w: number;

  // The height of the particle (not used with images).
  h: number;

  // Vertical gravity.
  gy: number;

  // The "width" of the falling motion. The falling motion is calculated as Math.sin(life * xw)
  xw: number;

  // The style of the particle. Either an HTML color or an HTMLImageElement.
  style: ParticleStyle;
};

MIT License @copy; Andreas McDermott