A useful front-end confetti animation library • Hacker News Board

Re: A useful front-end confetti animation library

#51

Post by scoot » Thu, Apr 25, 2024, 2:33 PM UTC

flanbiscuit wrote: post #36

lovegrenoble wrote: post #4

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

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 wh…

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

Correct. It doesn't.

Re: A useful front-end confetti animation library

#52

Post by [deleted] » Thu, Apr 25, 2024, 2:40 PM UTC

[deleted]

Re: A useful front-end confetti animation library

#53

Post by bitter69 » Thu, Apr 25, 2024, 2:48 PM UTC

[dead]

Re: A useful front-end confetti animation library

#54

Post by apocalyptic0n3 » Thu, Apr 25, 2024, 2:48 PM UTC

taikahessu wrote: post #41

lovegrenoble wrote: post #4

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

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.

Re: A useful front-end confetti animation library

#55

Post by thih9 » Thu, Apr 25, 2024, 2:53 PM UTC

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.

Re: A useful front-end confetti animation library

#56

Post by GrantMoyer » Thu, Apr 25, 2024, 2:54 PM UTC

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.

Re: A useful front-end confetti animation library

#57

Post by helboi4 » Thu, Apr 25, 2024, 2:55 PM UTC

MatthiasPortzel wrote: post #18

colesantiago wrote: post #14

[flagged]

I pressed the power button on my monitor, and now the website is all black.

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.

Re: A useful front-end confetti animation library

#58

Post by fromwilliam » Thu, Apr 25, 2024, 2:58 PM UTC

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.).

Re: A useful front-end confetti animation library

#59

Post by ericol » Thu, Apr 25, 2024, 3:04 PM UTC

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

Re: A useful front-end confetti animation library

#60

Post by bradly » Thu, Apr 25, 2024, 3:07 PM UTC

thih9 wrote: post #55

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.

> https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pref...

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.