Intro

Unleash all the confetti!

An action you can use anywhere in your App. Great for celebrating a successful API response, or to lighten the mood if it returns an error. Once installed, you can add the confetti action to any event. Fire it from your cursor, as fireworks, or from the side. The sky is the limit, and you can even control the amount and the speed.Once installed, you can add the confetti action to any event. Fire it from your cursor, as fireworks, or from the side. The sky is the limit, and you can even control the amount and the speed.

Give it a go in the examples below  🎉

Demo

Click anywhere here to shoot some confetti

Actions

  • Confetti

    Changing arguments or calling the action multiple times with different values can achieve interesting effects, such as a confetti fireworks show 🎆🎉

    Arguments

    particleCount
    		Number (default: 50): The number of confetti to launch. More is always fun... but be cool, there's a lot of math involved.
    angle
    		Number (default: 90): The angle in which to launch the confetti, in degrees. 90 is straight up.
    spread
    		Number (default: 45): How far off center the confetti can go, in degrees. 45 means the confetti will launch at the defined angle plus or minus 22.5 degrees.
    startVelocity
    		Number (default: 45): How fast the confetti will start going, in pixels.
    decay
    		Number (default: 0.9): How quickly the confetti will lose speed. Keep this number between 0 and 1, otherwise the confetti will gain speed. Better yet, just never change it.
    gravity
    		Number (default: 1): How quickly the particles are pulled down. 1 is full gravity, 0.5 is half gravity, etc., but there are no limits. You can even make particles go up if you'd like.
    drift
    		Number (default: 0): How much to the side the confetti will drift. The default is 0, meaning that they will fall straight down. Use a negative number for left and positive number for right.
    flat
    		Boolean (default: false): Optionally turns off the tilt and wobble that three dimensional confetti would have in the real world. Yeah, they look a little sad, but y'all asked for them, so don't blame me.
    ticks
    		Number (default: 200): How many times the confetti will move. This is abstract... but play with it if the confetti disappear too quickly for you.
    origin
    		Object: Where to start firing confetti from. Feel free to launch off-screen if you'd like.

    origin.x: Number (default: 0.5): The x position on the page, with 0 being the left edge and 1 being the right edge.

    origin.y: Number (default: 0.5): The y position on the page, with 0 being the top edge and 1 being the bottom edge.
    colors
    		Array<String>: An array of color strings, in the HEX format... you know, like #bada55.

Based on catdad/canvas-confetti . Read more on options or view more examples!