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.