svelte-canvas-confetti 🎉

Features

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

Installing

npm install svelte-canvas-confetti

Basic Usage

The package includes four Svelte components.

FallingConfetti

Adds confetti falling from the top of the screen.

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

<FallingConfetti />

ConfettiBurst

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]} />

ConfettiCannon

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]} />

Confetti

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 />

Props

particleCount

Number of particles to create.

Type: number Default value: 50 Example:

<Confetti particleCount={100} />

styles

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%)']} />

origin

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]} />

force

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} />

angle

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} />

spread

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} />

onCreate

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;
  }} 
/>

onUpdate

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;
  }} 
/>

Examples

Advanced Example

License

MIT License @copy; Andreas McDermott