Svelte Confetti

The component in it's most basic form.

The spread of confetti can be adjusted. The props x and y are used to determine how far the confetti spreads. For both values multipliers are used and these are to be supplied in an array of two with the lowest number first. For each confetti piece a random number between these two is picked. The higher the number the futher the spread. Negative numbers affect the direction.

The amount of particles that are launched can be adjusted with the amount property. This should always be a whole number. Be careful with going too high as it may impact performance. It will depends on the device and other performance heavy elements on the page, but try and keep it below 500.

As you may have noticed from the previous buttons, the confetti tends to take on a fairly square shape. This can be mitigated a little bit by using the propery cone. This will cause the confetti to launch in a more cone like shape which is especially nice when using lots of particles. This is especially effective when firing to the side, but we need to compensate with a larger x multiplier. The cones still have a fairly distinct cone shape to them, later on in these docs we will go over how to mitigate this.

The size of the confetti pieces can be adjusted using the size property. We can also adjust the shape of the confetti pieces using the rounded property

By default all confetti comes out at just about the same time. There is a little bit of variance but it appears instant. That's what a confetti cannon does. We can change when each piece is fired by adjusted the range of the delay property. The delay is given in milliseconds. We can also opt to have the animation play infinitely by setting the infinite property, at this point the delay mostly has a effect only when spawning in for the first time. (Click the button again to toggle it off) Alternatively we can let the animation play out fully before repeating. For this we can use the iterationCount property. This is especially useful during development to tweak the confetti without having to reload the page or set up a button. This can be set to a number or to "infinite", basically anything that would be accepted by the animation-iteration-count property in CSS.

You can adjust the colors of the confetti pieces in different ways. You can specify a hue using the colorRange property, which will use HSL colors with 75% saturation and 50% lightness. 0-360 is all colors, 75-175 would be only greens. Alternatively you can specifiy colors in an array using colorArray. This can take any CSS value that would be accepted as the background property. RGB, HEX, HSL, but even gradients and images. It's not just colors though, we can input any value valid to the background css property. This includes gradients and images. Or we could set up a random color each time the component is mounted.

We can change how the confetti falls using the fallDistance property. We can make it fall faster, slow, or stop it from falling altogether. This property will accept any valid css property, except for 0. We can also disable gravity and air resistance altogether and make it travel at a constant speed by setting the noGravity property. We can set how far the particles spread horizontally before and after the peak using the xSpread property. This expects a number between 0 and 1 but you can set it higher or lower for some odd results.

We can combine multiple Confetti components to create neat effects.
For example we could combine multiple components each with different colors and different areas to create flags! (Blues aren't the actual flag colors to make it a little easier to see on dark backgrounds)




Flags are cool, but we can do plenty of other things. In this example we will "feather" the initial effect to give it a less defined shape. By default the effects have a fairly distinct shape to them which ruins the effect a little bit, especially when using lots of particles. And with the cone property We can also combine this with a large delay to mitigate the effect further, but it makes it less cannon-y. We could also combine multiple components to create animations.

We've now looked at all the different properties, but since this is just HTML and CSS you can style it further however you like. Let's look at some fullscreen examples. Having the effect fullscreen is not a simple toggle, but it is a simple bit of CSS.


The element is fixed and placed just off screen so we can't see the confetti spawn in. The fallDistance property is set to 100vh so they cover the entire screen.

One thing you may have noticed is that if you click a button the previous confetti disappears immediately and new ones spawn in. We could change this by creating a new component for each click. Check out the code for this example in the REPL.





You could also further style the confetti itself. Don't like the animation? Do it yourself! Target the confetti with :global(.confetti) and change the animation using animation-name, all values are set as css variables so you can easily use them yourself.