24 ms·
A useful front-end confetti animation library
- humanfromearth9 2y agoI think there is no need to specify 'useful' in the title.
- refset 2y agoHow about as a motivational aid and means of verifying that your code has compiled: https://squint-cljs.github.io/squint/ https://squint-cljs.github.io/squint/
- meiraleal 2y agoTrue. But also the use of the word made me genuinely interested and I laughed by how not really useful it is. Upvoted.
- fsckboy 2y agoit's as useful as actual confetti irl, so: 100%
- RamRodification 2y agoI wish they would have called the reset function confetti.resetti()
- waldothedog 2y agoSomebody give this person a job! If they already have a job, give them a cookie
- jerf 2y agoThis 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.
- krsdcbl 2y agoomw to "consologgi = console.log"
- ilaksh 2y agomaybe you could make a PR
- lovegrenoble 2y agoYou have also Party.js library: https://party.js.org/ https://party.js.org/
- flanbiscuit 2y agoAh, but which one is smaller? 10.4 kB Minified, 4.2kB Minified + Gzipped https://bundlephobia.com/package/canvas-confetti@1.9.2 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 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 2y ago>Probably doesn't take into account code-splitting or being able to import just what you need Correct. It doesn't.
- taikahessu 2y agoOP script feels way more performant on mobile.
- apocalyptic0n3 2y agoAnd 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.
- baobabKoodaa 2y agoOP is more performant on desktop Windows as well. The other one visibly lags when animating even a single cannon of confetti.
- throwaway38375 2y agoNeat library. Also, brilliant docs!
- jaffathecake 2y agoI used this in a prototype recently and was impressed by how configurable it is.
- __MatrixMan__ 2y agoWouldn'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 2y agoThe 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 2y agoGood simulations have constant time step and may not run in real time. From inside such simulation, you would never know.
- braden-lk 2y agoI was introduced to this idea by the book Permutation City. Great read.
- marcosdumay 2y agoThe idea on Permutation City is way crazier than a mere computer simulation.
- __MatrixMan__ 2y agoI agree, it's awesome. I wish more scifi authors were as ambitious as Egan.
- __MatrixMan__ 2y agoIt'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/ 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.
- guappa 2y agoJust fyi, confetti are candies in italy. Not bits of paper.
- ale42 2y agoCan someone code and make a pull request to properly handle display of those for Italian users? (see https://it.wikipedia.org/wiki/Confetto https://it.wikipedia.org/wiki/Confetto for what they look like)
- deleted 2y ago[deleted]
- drivers99 2y agoInteresting. It's also cognate with "confection". https://www.etymonline.com/search?q=confetti 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).
- colesantiago 2y ago[flagged]
- lambaro 2y agoHard to get much more obvious than that. How else did you think this was implemented as a front-end library?
- chedabob 2y agoIf 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.
- MatthiasPortzel 2y agoI pressed the power button on my monitor, and now the website is all black.
- justneedaname 2y agoThank you for the laugh haha
- kaptainscarlet 2y agoI threw away my laptop, now the website is completely gone.
- 2y ago
- h1fra 2y agoVery nice, not a fan of this kind of animation but at least it's smooth!
- devsatish 2y agoThis is elegant. Shows the passion that goes into building some thing that looks so beautiful and easy to integrate.
- dangoodmanUT 2y agoThis is great, has a ton of options and other solutions are way more laggy
- languagehacker 2y agoCute animation, but I find it hard to say that the confetti animation is useful
- bangaroo 2y agothis says more about you than it does about the confetti animation
- kaptainscarlet 2y agoTwitter 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 2y agoI think Facebook did something similar if you typed "congratulations" in a comment.
- 0xFazio 2y agoGreat 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.
- lukax 2y agoSo 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 2y agoCorrect! Disable Pointer Events has surprising utility!
- amelius 2y agoWhat if you wanted to add the requirement that the user had to click on 1 specific piece of confetti?
- nicky0 2y agoThen you have a fun programming challenge.
- MartijnHols 2y agoAdd a click event listener to the body and overlay the event-coordinates on the canvas.
- amelius 2y agoWill the canvas allow you to hit-test the confetti piece given the coordinate?
- eyelidlessness 2y agoCanvas 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.
- 2y ago
- jjice 2y agoThis 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 2y agoDid it work? Did she say yes?
- jjice 2y agoShe 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.
- oli-g 2y agoThat's nice :) I'm curious though - did you use tabs or spaces?
- jjice 2y agoIt was definitely tabs - I'll ask her if she's a space kind of gal. Some things can't be compromised!
- sa-code 2y agoI knew someone that made a PowerPoint presentation for their partner for Valentine's Day. So you're doing great in comparison
- Atotalnoob 2y agoMy online dating profile was a PowerPoint presentation before I met my partner. It easily quadrupled my matches.
- rockwotj 2y agoUsed 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 https://www.youtube.com/watch?v=_ROTg3KcoIA
- graypegg 2y agoI 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 https://github.com/graypegg/xello-confetti
- TeMPOraL 2y agoFrom 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.)
- scoot 2y agoInteresting 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?
- scoot 2y ago"on one side"...
- deleted 2y ago[deleted]
- bitter69 2y ago[dead]
- thih9 2y agoThis 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.
- bradly 2y ago> https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion 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.
- EMM_386 2y agoThe 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 2y agoAsana does that, and it's optional. I like it whenever it happens too!
- huhtenberg 2y agoThis has its place, e.g. on a completion of a game or some such.
- ivanbozic 2y agoYep, 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!
- GrantMoyer 2y agoThe 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.
- fromwilliam 2y agoAside 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.).
- ericol 2y agoGo multi click on the run button for the "School Pride" demo. I double dare you.
- eddieroger 2y agoChallenge 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.
- OkayPhysicist 2y agoHell, they let you edit the code samples. Slap the code in a for(let i = 0; i < 100; i++){ and watch the magic. Really impressive how it doesn't slow down the rest of page.
- OisinMoran 2y agoNeat! 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!
- lngarner 2y agoInteresting!
- swah 2y agoLooks a lot like Raycast one :)
- strongpigeon 2y agoThis 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!
- wackget 2y agoUseful 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?!
- albert_e 2y agoI 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 2y agoI added confetti to our salespeople's admin dashboard for when they make a sale. Surprisingly enjoyable and motivating.
- deleted 2y ago[deleted]
- lpapez 2y agoThis 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.
- naikrovek 2y agoDisclaimer: 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?
- kosolam 2y agoSame utility as animations in general. Such animation as this one for example fits when a user receives something or solves a challenge and similar
- naikrovek 2y agoThose don’t have utility, either. 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.
- DowagerDave 2y agoThis 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!
- carimura 2y agoI 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!
- kc10 2y agoWe 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.
- SchizoDuckie 2y agoI 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!
- hnben 2y agoto 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/confetti.browser.min.js 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)
- eternityforest 2y agoThanks 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.
- AndrewHart 2y agoDo you track how many people clicked each confetti button?