Hacker News new | ask | show | jobs
by lovegrenoble 791 days ago
You have also Party.js library: https://party.js.org/
3 comments

Ah, but which one is smaller?

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.

>Probably doesn't take into account code-splitting or being able to import just what you need

Correct. It doesn't.

OP script feels way more performant on mobile.
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 is more performant on desktop Windows as well. The other one visibly lags when animating even a single cannon of confetti.
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.