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.
Canvas draws raster images, anything resembling an object in your drawing logic is already tracked separately by necessity. So regardless, you’d presumably check against whatever data model you’re using to determine what to draw.
You call it a trick for performant animation, but I couldn't think of any other way to implement something like this. What would a naive implementation look like?
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.
> 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.)
This being Javascript, you can at least fix this locally with a simple "confetti.resetti = confetti.reset".
There are some software engineering costs to this approach, but, as is transparently obvious to all thoughtful observers, the benefits massively outweigh them, so I say go for it.
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.).
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.
The strange thing is this can be used effectively. I don't know about full-screen like this, but we were visiting a client recently who used a certain project management software and when you closed an item out, the button changed to green and had this effect on it.
It was subtle, but noticeable enough that after the meeting another developer and I both said "that was a pretty neat effect". It conveyed the sense of "yay, progress!".
I think the only "legitimate" use would be something like YouTube's like button, which has a cool animation (and vibrates the device if using the mobile app). Very pleasant UX.
Having the like button do an animation when your video mentions that liking it would be helpful is the only good UX choice I have seen on YouTube since... playlists?
You can site your browser to prefer reduced motion. Site owners and library maintainers should be respecting this when implementing things like confetti. This library in particular has a `disableForReducedMotion` option.
Yep, on one of the products I built, I use this when a person subscribes to the paid tier. It's really nice, not too obtrusive, but it's fun! Plus, it only happens on that specific scenario, so it's not overdone.
Pipedrive CRM also does this when you close a deal, they even previously had a person shooting a hoop or something, that was nice. It's rewarding!
caveat: I don't know how bundlephobia works, it might not give the best representation of the final size of the package. Probably doesn't take into account code-splitting or being able to import just what you need. I'm just using it as a quick and general overview.
Looks like confetti one beats it by a few KB gzipped so either works depending on which one has the feature you need, unless you're really trying to squeeze those kb.
And on Firefox for Mac. Noticed dropped frames pretty consistently in party.js. No such problem with Canvas Confetti, even when there are significantly more particles on screen. I had to increase the count to a point where I couldn't see gaps between them before I saw any lag whatsoever.
OP's library feels a lot more performant, in my old work computer with 3 click you can notice some lag with Party.js. With canvas-confetti, it only starts to lag when I click non-stop for a few seconds, probably invoking more than 30 instances of confetti and a lot of particles.
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 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)
> 1815, "small pellets made of lime or soft plaster, used in Italy during carnival by the revelers for pelting one another in the streets," [...] the custom was adopted in England by early 19c. for weddings and other occasions, with symbolic tossing of little bits of paper (which are called confetti by 1846).
Can someone code and make a pull request to properly handle display of those for Italian users? (see https://it.wikipedia.org/wiki/Confetto for what they look like)
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 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!
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?
The excellent performance characteristics of the natural world may indeed be the best rebuttal of the popular theory that we live in a computer simulation!
It's only meaningful to consider that our world is a simulation if it is an imperfect one, otherwise you're just using "simulation" as an awkward synonym for "reality".
Click the "snow" button enough (https://catdad.github.io/canvas-confetti/) and you'll get a horizontal line separating the pre-slowdown flakes from the post-slowdown flakes. I suppose that's the kind of simulation imperfection that we might look for.
Personally, I don't think we're hacking our way out of this one any time soon, so I'm happy to just call it reality.
What would it even mean for a simulation to be imperfect, though, from the perspective within the simulation? You can only observe the simulated phenomena. So it would be perfectly normal, say, if things become non-deterministic at the hardest to observe small scales, or if there were minor inconsistencies between the smallest scale behaviors and the largest. You'd just call it "physics".
See that's hard because I do call it physics, and I do not call it a simulation. I am here in this world, and from where I stand it's as real as anything will ever be for me.
My point is that I don't think there's any sense in entertaining counterfactuals that, if true, will be impossible to come up with evidence for, and I think the assertion that our world is a simulation is one such counterfactual.
That is, unless the physics gets so absolutely insane that "it's just physics" fails to scratch the itch. One example would be if we discover an artifact that lets us see each particle's corresponding unique ID such that, once we have that ID, we can then type it into a console and arbitrarily set properties like its mass.
If simulated entities gain control over the parameters that govern the simulation itself... well is it really a simulation anymore?
How to detect imperfect simulation: some unexplainable missing wavelength bands, or quantisation of results where it should be continuous would hint at "cutting corners" in simulation, like steps in energy levels from very distant xray sources perhaps?
As far as we know, our "physics" does not show any possible imperfections, or we didn't thought of all imperfections which could arise in simulation.
I think you're setting the bar far too low. An inability to explain why certain frequencies produce no EM radiation would be unsettling, but maybe reality is unsettling. It would not be enough to jump to the conclusion that nothing we've ever measured is actually real.
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.
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.
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.
Challenge accepted. I clicked until the confetti froze up. I was impressed while I couldn't trigger new confetti of any kind, the page still scrolled, and the tab could be closed without killing my browser. It was fun.
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.
seriously what is up with people who believe JS should not exist on the web? We are way past that now. It's not gonna happen. Reactive apps are just required for some parts of the modern web.
Those of you who work writing javascript to fingerprint browsers and collect user behavior in exchange for a paycheck, you are the worst kind of person.
There are a lot of you on here and I expect to be "punished" for this view, but my view on this will never change.
The push-back is not from the tiny number of JavaScript developers writing finger-printing scripts, but rather the huge number of JavaScript developers (including me) who are offended that you’re unwilling to run JS because you’re afraid that it’s going to finger-print you.
You have a right to take steps that make you comfortable that your privacy is being protected. But don’t complain about websites not working if you’ve decided you don’t trust them to run JavaScript.
The developer has of course provided a print stylesheet (expect no less from a pro). Just print it, frame it, hang it up on the wall and voilà! A no-JS confetti demo right there in your living room.
If someone told me it was pure CSS, I'd believe them. I'm not a frontend dev, so I'm always impressed by what you can now do without having to import a whole JS library.
I haven't understood this approach. If you're going as far as not using js, do you not use a mobile phone? No loyalty programs? No credit cards? How intense is your approach towards security?
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.
It easily quadrupled my matches.
I'm curious though - did you use tabs or spaces?
> 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.)
There are some software engineering costs to this approach, but, as is transparently obvious to all thoughtful observers, the benefits massively outweigh them, so I say go for it.
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.).
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.
It was subtle, but noticeable enough that after the meeting another developer and I both said "that was a pretty neat effect". It conveyed the sense of "yay, progress!".
Just make it optional.
You can site your browser to prefer reduced motion. Site owners and library maintainers should be respecting this when implementing things like confetti. This library in particular has a `disableForReducedMotion` option.
Pipedrive CRM also does this when you close a deal, they even previously had a person shooting a hoop or something, that was nice. It's rewarding!
10.4 kB Minified, 4.2kB Minified + Gzipped https://bundlephobia.com/package/canvas-confetti@1.9.2
28.3kB Minified, 7.4kB Minified + Gzipped https://bundlephobia.com/package/party-js@2.2.0
caveat: I don't know how bundlephobia works, it might not give the best representation of the final size of the package. Probably doesn't take into account code-splitting or being able to import just what you need. I'm just using it as a quick and general overview.
Looks like confetti one beats it by a few KB gzipped so either works depending on which one has the feature you need, unless you're really trying to squeeze those kb.
Correct. It doesn't.
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.
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?!
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
4. (optional) customize the confetti()-call5. 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)
> 1815, "small pellets made of lime or soft plaster, used in Italy during carnival by the revelers for pelting one another in the streets," [...] the custom was adopted in England by early 19c. for weddings and other occasions, with symbolic tossing of little bits of paper (which are called confetti by 1846).
[1]: https://www.youtube.com/watch?v=_ROTg3KcoIA
It was fun to present it in demos, but it can also be annoying to users.
[0] https://github.com/graypegg/xello-confetti
Click the "snow" button enough (https://catdad.github.io/canvas-confetti/) and you'll get a horizontal line separating the pre-slowdown flakes from the post-slowdown flakes. I suppose that's the kind of simulation imperfection that we might look for.
Personally, I don't think we're hacking our way out of this one any time soon, so I'm happy to just call it reality.
My point is that I don't think there's any sense in entertaining counterfactuals that, if true, will be impossible to come up with evidence for, and I think the assertion that our world is a simulation is one such counterfactual.
That is, unless the physics gets so absolutely insane that "it's just physics" fails to scratch the itch. One example would be if we discover an artifact that lets us see each particle's corresponding unique ID such that, once we have that ID, we can then type it into a console and arbitrarily set properties like its mass.
If simulated entities gain control over the parameters that govern the simulation itself... well is it really a simulation anymore?
As far as we know, our "physics" does not show any possible imperfections, or we didn't thought of all imperfections which could arise in simulation.
Thanks!
Is that a known phenomenon?
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.
and watch the magic. Really impressive how it doesn't slow down the rest of page.
This library is an awesome chromebook killer. I need to find something more optimized. But it does the trick!
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?
I don’t know why web devs feel like they need to tell users when they’ve succeeded at something like clicking a button.
People understand when they’ve accomplished something. We don’t need rituals around this, even simple ones like this.
They said it: privacy
Those of you who work writing javascript to fingerprint browsers and collect user behavior in exchange for a paycheck, you are the worst kind of person.
There are a lot of you on here and I expect to be "punished" for this view, but my view on this will never change.
You have a right to take steps that make you comfortable that your privacy is being protected. But don’t complain about websites not working if you’ve decided you don’t trust them to run JavaScript.
[0] https://codepen.io/jh3y/pen/oNqdmbW
libraries are in every language.