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: 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. |
Top categories
Need a Svelte website built?
Hire a professional Svelte developer today.