A useful front-end confetti animation library (opens in new tab)

This is cool and impressive.

At the same time I don't want to see it running on any website that I use. And especially - I wouldn't want to see confetti accompany newsletter popups or adding products to basket.

You have also Party.js library: https://party.js.org/

So the trick for performant animation here is to draw on canvas and put the canvas in front of all other elements but disable pointer events on canvas so that you can still interact with the page.

This reminds me of some good times doing web development in high school in 2015. I made a small website with confetti to ask a girl to homecoming (very nerdy looking back). Back when making a website felt like a superpower to a kid. It seems like it wasn't this package based on age, but it was a really nice animation.

I love a fun little projects like this that are purely for a good time. That's why I started programming and it's still a driving force.

I wish they would have called the reset function confetti.resetti()

Just fyi, confetti are candies in italy. Not bits of paper.

Wouldn't it be crazy if there was a snow storm that had so many flakes, the gravitational constant was reduced because of the extra time it took to render them all?

I think there is no need to specify 'useful' in the title.

Cute animation, but I find it hard to say that the confetti animation is useful

Useful for annoying your visitors?

Why on earth would they not enable the setting which honours the `prefers-reduces-motion` media flag for users who don't want stuff flying all over their screens?!

This reminds me of the early Internet in the 90s and 2000s, you had falling snow and star animations everywhere.

This is a Javascript library, but it couldn't have been JS back in those days.

Anyone have an idea how people built stuff like this without JS? I'm curious.

Go multi click on the run button for the "School Pride" demo. I double dare you.

Disclaimer: I am old.

I have a difficult time believing that there is any utility in a confetti animation library when that confetti is shown over a page in a web browser.

What could the utility of showing confetti over a webpage possibly be?

Interesting optical illusion – if I focus on side of the Custom Canvas demo and repeatedly click "Run", some of the confetti in my peripheral vision appears to leave the canvas. It's as if my brain is filling in what it expects to happen.

Is that a known phenomenon?

From the demo page:

> If you happened to get curious and changed the particle count to 400 or so, you saw something disappointing. An even "flattened cone" look to the confetti, making it look way too perfect and ruining the illusion.

I love it! This kind of attention to detail is rare in this world, and I cherish it wherever I find it - whether it's in statistical visualization, movie props, or website confetti.

(As a solution, I'd probably go for changing the random distribution directly. I'd check of course, but I'm guessing the real-life distribution approximates a gaussian.)

I added confetti to our salespeople's admin dashboard for when they make a sale. Surprisingly enjoyable and motivating.

Aside from being a cool and useful library, this is a good example of what John Ousterhout calls "deep modules" in Philosophy of Software Design.

It's very easy to use the most basic version of this library (summon confetti) but you can get a lot out of it by exploring the options presented (snow, specific colours, different confetti effects, etc.).

I solve crosswords on downforacross.com and solving a puzzle there results in confetti.

Maybe they could use some of this better performing code to make it feel lighter.

Other than "fun" sites and sparing usage ... I wouldn't want to see such animations everywhere though.

This is elegant. Shows the passion that goes into building some thing that looks so beautiful and easy to integrate.

Very nice, not a fan of this kind of animation but at least it's smooth!

to turn it into a bookmarklet, do this:

1. grab the minified js from the CDM, i.e. https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/conf...

2. remove the comments at the start and end

3. paste it into the template below

    javascript: (async () => { /* paste minified JS here */   ; confetti();})();

4. (optional) customize the confetti()-call

5. copy the result and paste it into bookmark

This works on most pages (tested on some tabs I have open), but it does not seem to work on hackernews itself. Here it gives me ContentSecurityPolicy-Error when creating the worker. (at least it does in edge)

Used this to build a confetti inbox for Shortwave's April fools [1] a few years back. Really run library, and easy to integrate.

[1]: https://www.youtube.com/watch?v=_ROTg3KcoIA

I used this in a prototype recently and was impressed by how configurable it is.

I love this. Lovely work! I had done something similar a few years ago for an edtech company I was working at. [0] It uses threejs and tries to "bake" the particle animation before trying to play it, but I don't think it ever made a huge difference in performance. I think I'll reach out and mention they could change to your library for a nicer experience!

[0] https://github.com/graypegg/xello-confetti

We built similar animation part of a product few years ago. The flow was something like - when a new user signs up and users our product for the first time and creates certain artifact, the confetti animation would be displayed. Product managers loved it and they would show it off to execs as playful, refreshing, etc. But later on after UX reviews, accessibility testing, the feature was ultimately removed from the product.

It was fun to present it in demos, but it can also be annoying to users.

I remember putting falling snow on our ecommerce site in like 2005 and just how amazing that feeling was. Oh how far we've come! sort of!

Thanks for the great library! I'm using it for a dashboard framework plugin, I think there's a lot of times when confetti is totally appropriate.

This is one of the most point-less / awesomest things I've seen on the internet this week. I can't imagine how much work went into building it, and how much time I will now be spending to incorporate into something that definitely doesn't need it.

Thanks!

The effect is surprisingly smooth on my outdated mobile phone. I recently implemented a similar effect with a hardware accelerated 3D rendering API (albiet with limited collision physics), and it didn't perform nearly as well targeting WebGL.

I use this on unicornpoep.nl, a little multiple choice toy i built for my daughter to teach her multiplication tables.

This library is an awesome chromebook killer. I need to find something more optimized. But it does the trick!

Neat! Would love to see a persistent option in which the confetti gathers at the bottom of the screen/page. Even better if there was something that could persist all the confetti received across all websites!

Great job! Nice and realistic. Did you build Framework integrator like useEffect for React or Directive for Angular? It could be great to enforce developper adoption.

This is really good. That image you have on the README now makes me want to have a depth of field effect on the confettis as well as multiple layers!

Do you track how many people clicked each confetti button?

This is great, has a ton of options and other solutions are way more laggy

Neat library. Also, brilliant docs!

Looks a lot like Raycast one :)

Interesting!