Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mitcheljager/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!
https://github.com/mitcheljager/svelte-confetti
svelte
Last synced: 3 days ago
JSON representation
Confetti in Svelte! Celebrate things with some extra flair. Animates using just HTML and CSS meaning it can work with SSR in SvelteKit!
- Host: GitHub
- URL: https://github.com/mitcheljager/svelte-confetti
- Owner: Mitcheljager
- Created: 2022-06-01T14:07:18.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-12-08T19:44:47.000Z (17 days ago)
- Last Synced: 2024-12-15T19:07:26.580Z (10 days ago)
- Topics: svelte
- Language: Svelte
- Homepage: https://mitcheljager.github.io/svelte-confetti/
- Size: 892 KB
- Stars: 270
- Watchers: 3
- Forks: 10
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Svelte Confetti
[](https://github.com/Mitcheljager/svelte-confetti/actions/workflows/node.js.yml)
[](https://www.npmjs.com/package/svelte-confetti)
[](https://www.npmjs.com/package/svelte-confetti)
[](https://bundlephobia.com/package/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.
```js
yarn add svelte-confetti@^1.0.0 --dev // Svelte 4
yarn add svelte-confetti@^2.0.0 --dev // Svelte 5
```
```js
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.
```js
import { Confetti } from "svelte-confetti"
```
```svelte
```
## Usage
For detailed documentation on every property check out: [https://mitcheljager.github.io/svelte-confetti/](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.