I’ve always loved the extra celebrations within web apps. Asana has a much-loved Unicorn effect and I’ve used this tutorial from Josh Comeau to implement ‘boops’ in a few react projects. But in some evening fun I wanted to try writing a simple version of a confetti explosion effect without any extra libraries or helpers. Some css, js, and html.

The first evening I ended up with something closer to fireworks. I still want to go back and turn this one into fireworks but I wasn’t really done.

See the Pen Confetti Testing 001 by Devin (@DevinVinson) on CodePen.

I spent a few more evenings playing around, relearning some modern css/js and ended up with a pretty fun effect. Not really confetti but I’m happy with it.

See the Pen Confetti Testing 002 by Devin (@DevinVinson) on CodePen.

I came back over the weekend and started to add some customizations for color and shapes. At this point I figured things were going down the path of rebuilding some other library. So I stopped there.

Just a fun little project to play with some code. I had no intention of sharing it or making a tutorial but the colorful little explosion effect is too fun not to share. Performant? Probably not since we are creating a div for each dot. But it *is* fun.