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

Mitcheljager

Svelte Confetti

Svelte Tiny Linked Charts