Svelte Confetti

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).

Installation:

To install the Svelte Confetti package, you can use either Yarn or NPM. Include the component in your app to start using it.

Example using Yarn:

yarn add svelte-confetti

Example using NPM:

npm install svelte-confetti

Summary:

The Svelte Confetti package is a lightweight solution for adding confetti effects to your web application. With no dependencies and minimal size, it can be easily integrated into SvelteKit projects. The package offers a wide range of customizable properties to control the appearance and behavior of the confetti animation. Whether you’re looking to add some celebratory flair or create a festive atmosphere, Svelte Confetti provides an effortless way to achieve the desired effect.