Confetti

Confetti is a small animation to add a confetti effect in your SvelteKit application. You can trigger the confetti by calling the confetti function and passing the options as you like.

Options

Option
Description
Default
particleCount
The number of particles to generate
200
duration
Safety cap in milliseconds. The animation normally ends on its own once every particle has fallen off the bottom of the screen.
12000
zIndex
The z-index of the confetti canvas. The default sits above modals and toasts.
20000000

Usage

<script>
   import { confetti } from '$lib/components/Confetti/confetti.js';
   const triggerConfetti = () => {
   // Bursts from the centre and ends once every particle has fallen off screen
   // Options (all optional): particleCount = 200, duration = 12000, zIndex = 20000000
   confetti();
    };
</script>

<Button onclick={triggerConfetti}>Trigger Confetti</Button>

Triggering from a modal

The confetti canvas uses a high z-index, so it renders above overlays such as modals and toasts. This means you can fire it straight from a modal action button.

HYVOR Logo