Svelte Confetti

Add a little bit of flair to your app with some confetti 🎊! There are no dependencies and it's tiny in size. Even better; it works without JavaScript with the help of SSR in SvelteKit.

Demo and Docs: https://mitcheljager.github.io/svelte-confetti/

Installation

Install using Yarn or NPM.

yarn add svelte-confetti@^1.0.0 --dev // Svelte 4
yarn add svelte-confetti@^2.0.0 --dev // Svelte 5

npm install svelte-confetti@^1.0.0 --save-dev // Svelte 4
npm install svelte-confetti@^2.0.0 --save-dev // Svelte 5

Include the component in your app.

import { Confetti } from "svelte-confetti"

<Confetti />

Usage

For detailed documentation on every property check out: https://mitcheljager.github.io/svelte-confetti/

Configuration

| Property | Default | Description | --- | --- | --- size | 10 | The max size in pixels of the individual confetti pieces. x | [-0.5, 0.5] | The max horizontal range of the confetti pieces. Negative is left, positive is right. [-1, 1] would mean maximum of 200px left and 200px right. y | [0.25, 1] | The max vertical range of the confetti pieces. Negative is down, positive is up. [-1, 1] would mean maximum of 200px down and 200px up. duration | 2000 | Duration of the animation for each individual piece. infinite | false | If set to true the animation will play indefinitely. delay | [0, 50] | Used to set a random delay for each piece. A large difference between each number will mean a longer spray time. colorRange | [0, 360] | Color range on the HSL color wheel. 0 to 360 is full RGB. 75 To 150 would be only green colors. colorArray | [] | Can be used to pick a random color from this array. Set just one array elements to have a single color. Accepts any viable css background property, including gradients and images. amount | 50 | Amount of particles spawned. The larger your spray the more pieces you might want. Be careful with too many as it might impact performance. iterationCount | 1 | How many times the animation will play before stopping. Is overwritten by the "infinite" property. fallDistance | "100px" | How far each piece falls. Accepts any css property, px, rem, vh, etc, but not 0. rounded | false | Set to true to make each confetti piece rounded. cone | false | Set to true to make the explosion appear in a cone like shape which might feel more realistic when dealing with a larger amount. noGravity | false | Set to true to make the particles accelerate at a constant speed without "falling" down. Give it a more explosion like effect. xSpread | 0.15 | A number from 0 to 1 that determines how far the particles spread horizontally. A low number will mean the x near the peak and the x near the end are similar. destroyOnComplete | true | By default the elements are removed when the animation is complete. Set to false to prevent this behaviour. disableForReducedMotion | false | Disable animations for those with reduced motion preferences.