Intro

Explosions everywhere

Add an explosion of particles and a shockwave anywhere in your app.

Great for celebrating a successful API response, or to lighten the mood if it returns an error (yes, similar to the confetti package). 

Once installed, you can add the explosion action to any event. Fire it from your cursor, as fireworks, or from the side.

You can control the amount, duration, distance, size of particles, lightmode and the colors.

Try the examples below  🎆

Demo

Click anywhere in this field to trigger some explosions

Actions

  • Confetti

    Changing arguments or calling the action multiple times with different values can achieve interesting effects, such as a lot of explosions  🎆🎉

    Arguments

    distanceNumber (default: 300): The distance the particles move away from the origin.
    durationNumber (default: 600): How long long the animation lasts. Slow-motion explosions are cool!
    particleCountNumber (default: 40): The number of particles. Use with care as higher numbers will make any device sweat (or even freeze).
    particleSizeNumber (default: 60): The max size of each individual partical.
    lightModeboolean (as string, default: false)
    particleColor1 / particleColor2String (default: random okLCH value): A color string in OKLCH format (e.g. oklch(44.37% 0.161 26.90)).
    originXNumber (default: 0.5): The x position on the page, with 0 being the left edge and 1 being the right edge.
    originYNumber (default: 0.5): The y position on the page, with 0 being the top edge and 1 being the bottom edge.

Inspired by Adam Argyle's okLCH explosions. Adam's explosions on codepen.

You can convert HEX (e.g. #991b1b) to okLCH here.