return to table of content

A useful front-end confetti animation library

colesantiago
12 replies
5h26m

I don't see anything here, it doesn't seem to work without javascript for those who have JS turned off for privacy folks like me.

edit: downvoters, I browse the web and don't use JS for privacy reasons, I think it is perfectly reasonable for this to work with CSS only, but downvote I guess..

MatthiasPortzel
4 replies
5h15m

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

helboi4
1 replies
3h31m

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.

drivers99
0 replies
3h2m

what is up with people who believe JS should not exist on the web

They said it: privacy

kaptainscarlet
0 replies
4h37m

I threw away my laptop, now the website is completely gone.

justneedaname
0 replies
4h49m

Thank you for the laugh haha

lambaro
3 replies
5h20m

Hard to get much more obvious than that. How else did you think this was implemented as a front-end library?

chedabob
2 replies
4h53m

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.

91bananas
0 replies
3h13m

a whole JS library gasp

libraries are in every language.

cseleborg
1 replies
4h59m

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.

graypegg
0 replies
4h29m

Sadly, the demo does require scissors and a colour printer/coloured markers to experience fully.

jazzyjackson
0 replies
4h56m

now that you mention it it would be neat to implement this as a bunch of overlapping gifs or a fanciful css animation

thih9
6 replies
3h33m

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.

huhtenberg
1 replies
2h59m

This has its place, e.g. on a completion of a game or some such.

ivanbozic
0 replies
1h3m

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!

EMM_386
1 replies
3h12m

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!".

Just make it optional.

jihadjihad
0 replies
1h12m

Asana does that, and it's optional. I like it whenever it happens too!

bradly
0 replies
3h19m

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.

Andrex
0 replies
2h48m

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.

__MatrixMan__
6 replies
5h47m

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?

seabass-labrax
5 replies
5h31m

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!

yetihehe
4 replies
5h15m

Good simulations have constant time step and may not run in real time. From inside such simulation, you would never know.

braden-lk
2 replies
5h8m

I was introduced to this idea by the book Permutation City. Great read.

marcosdumay
1 replies
4h42m

The idea on Permutation City is way crazier than a mere computer simulation.

__MatrixMan__
0 replies
4h19m

I agree, it's awesome. I wish more scifi authors were as ambitious as Egan.

__MatrixMan__
0 replies
4h22m

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.

lukax
5 replies
4h51m

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.

ABNW
4 replies
4h33m

Correct! Disable Pointer Events has surprising utility!

amelius
3 replies
3h9m

What if you wanted to add the requirement that the user had to click on 1 specific piece of confetti?

MartijnHols
1 replies
1h12m

Add a click event listener to the body and overlay the event-coordinates on the canvas.

amelius
0 replies
15m

Will the canvas allow you to hit-test the confetti piece given the coordinate?

nicky0
0 replies
2h58m

Then you have a fun programming challenge.

lovegrenoble
5 replies
6h4m

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

taikahessu
2 replies
4h33m

OP script feels way more performant on mobile.

baobabKoodaa
0 replies
3h16m

OP is more performant on desktop Windows as well. The other one visibly lags when animating even a single cannon of confetti.

apocalyptic0n3
0 replies
3h38m

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.

flanbiscuit
1 replies
4h41m

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.

scoot
0 replies
3h53m

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

Correct. It doesn't.

jjice
4 replies
4h49m

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.

askonomm
3 replies
4h48m

Did it work? Did she say yes?

jjice
2 replies
4h38m

She said no - but we went on to be great friends still to this day, so I'd say it did work. We joke about it still.

sa-code
0 replies
3h4m

I knew someone that made a PowerPoint presentation for their partner for Valentine's Day. So you're doing great in comparison

oli-g
0 replies
3h15m

That's nice :)

I'm curious though - did you use tabs or spaces?

guappa
4 replies
5h40m

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

ale42
1 replies
5h34m

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)

TeMPOraL
0 replies
4h15m

Ah, so basically the same thing, but they hit much harder when they land?

drivers99
0 replies
3h5m

Interesting. It's also cognate with "confection". https://www.etymonline.com/search?q=confetti

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).
aulin
0 replies
1h5m

It's nice to hear we are not alone in using fake foreign words. We really like to use fake English words in Italian so it's only fair they do that too.

FYI the word for this in Italian is coriandoli.

languagehacker
3 replies
5h7m

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

bangaroo
2 replies
5h2m

this says more about you than it does about the confetti animation

kaptainscarlet
1 replies
4h38m

Twitter uses a similar animation on your profile when it's your birthday. That's one use case and I am sure there are more.

TeMPOraL
0 replies
4h14m

I think Facebook did something similar if you typed "congratulations" in a comment.

humanfromearth9
3 replies
6h18m

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

meiraleal
0 replies
5h53m

True. But also the use of the word made me genuinely interested and I laughed by how not really useful it is. Upvoted.

fsckboy
0 replies
4h23m

it's as useful as actual confetti irl, so: 100%

RamRodification
2 replies
6h6m

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

waldothedog
0 replies
5h52m

Somebody give this person a job! If they already have a job, give them a cookie

jerf
0 replies
5h12m

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.

wackget
1 replies
2h13m

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?!

kieloo
0 replies
1h32m

Agreed. I see really no good reason not to enable this by default.

ericol
1 replies
3h22m

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

eddieroger
0 replies
3h2m

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.

throwaway38375
0 replies
5h52m

Neat library. Also, brilliant docs!

swah
0 replies
2h36m

Looks a lot like Raycast one :)

strongpigeon
0 replies
2h13m

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!

scoot
0 replies
3h57m

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?

rockwotj
0 replies
4h43m

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

lpapez
0 replies
5m

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.

lngarner
0 replies
3h9m

Interesting!

jaffathecake
0 replies
5h51m

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

h1fra
0 replies
5h15m

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

graypegg
0 replies
4h24m

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

fromwilliam
0 replies
3h28m

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

devsatish
0 replies
5h11m

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

dangoodmanUT
0 replies
5h10m

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

albert_e
0 replies
2h7m

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.

Zebfross
0 replies
1h53m

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

TeMPOraL
0 replies
4h22m

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

OisinMoran
0 replies
3h19m

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!

GrantMoyer
0 replies
3h32m

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.

0xFazio
0 replies
5h7m

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.