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!
Overview:
The Svelte Confetti package is a lightweight and dependency-free option for adding confetti effects to your web application. It is compatible with SvelteKit and works without JavaScript through SSR (Server-Side Rendering). The package is small in size and provides various customizable properties for creating the desired confetti animation.
Features:
- Size: The maximum size in pixels of the individual confetti pieces (default: 10).
- x: The maximum horizontal range of the confetti pieces. Negative values move left, positive values move right (default: [-0.5, 0.5]).
- y: The maximum vertical range of the confetti pieces. Negative values move down, positive values move up (default: [0.25, 1]).
- Duration: The duration of the animation for each individual confetti piece (default: 2000ms).
- Infinite: Determines if the animation will play indefinitely (default: false).
- Delay: Sets a random delay for each confetti piece (default: [0, 50]).
- Color Range: Defines the color range on the HSL color wheel (default: [0, 360]).
- Color Array: Allows picking a random color from the provided array. Can be used for a single color or multiple colors (default: [])
- Amount: Specifies the number of particles spawned for the confetti effect (default: 50).
- Iteration Count: Determines how many times the animation will play before stopping. Overwritten by the "infinite" property (default: 1).
- Fall Distance: Specifies how far each confetti piece falls. Accepts any CSS property (default: "100px").
- Rounded: Sets each confetti piece to have a rounded shape (default: false).
- Cone: Makes the explosion appear in a cone-like shape, creating a more realistic effect for larger amounts of confetti (default: false).
- No Gravity: Disables the gravitational effect on the confetti particles, giving a more explosion-like effect (default: false).
- X Spread: Determines how far the particles spread horizontally. A low value means the start and end positions of x will be similar at the peak and end (default: 0.15).
- Destroy On Complete: Controls whether the elements are removed when the animation is complete. Set to false to prevent this behavior (default: true).
- Svelte
Svelte is a modern front-end framework that compiles your code at build time, resulting in smaller and faster applications. It uses a reactive approach to update the DOM, allowing for high performance and a smoother user experience.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.
