Svelte Confetti

Confetti in Svelte! Celebrate things with some extra flair. Animates using just HTML and CSS meaning it can work with SSR in SvelteKit!

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:


Install using Yarn or NPM.

yarn add svelte-confetti --dev
npm install svelte-confetti --save-dev

Include the component in your app.

import { Confetti } from "svelte-confetti"
<Confetti />


For detailed documentation on every property check out:


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.

Top categories

Loading Svelte Themes