[HN Gopher] A useful front-end confetti animation library
___________________________________________________________________
A useful front-end confetti animation library
Author : blini2077
Score : 392 points
Date : 2024-04-25 11:53 UTC (11 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| humanfromearth9 wrote:
| I think there is no need to specify 'useful' in the title.
| refset wrote:
| How about as a motivational aid and means of verifying that
| your code has compiled: https://squint-cljs.github.io/squint/
| meiraleal wrote:
| True. But also the use of the word made me genuinely interested
| and I laughed by how not really useful it is. Upvoted.
| fsckboy wrote:
| it's as useful as actual confetti irl, so: 100%
| RamRodification wrote:
| I wish they would have called the reset function
| confetti.resetti()
| waldothedog wrote:
| Somebody give this person a job! If they already have a job,
| give them a cookie
| jerf wrote:
| 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.
| lovegrenoble wrote:
| You have also Party.js library: https://party.js.org/
| flanbiscuit wrote:
| 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 wrote:
| >Probably doesn't take into account code-splitting or being
| able to import just what you need
|
| Correct. It doesn't.
| taikahessu wrote:
| OP script feels way more performant on mobile.
| apocalyptic0n3 wrote:
| 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.
| baobabKoodaa wrote:
| OP is more performant on desktop Windows as well. The other
| one visibly lags when animating even a single cannon of
| confetti.
| henriquecm8 wrote:
| 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.
| throwaway38375 wrote:
| Neat library. Also, brilliant docs!
| jaffathecake wrote:
| I used this in a prototype recently and was impressed by how
| configurable it is.
| __MatrixMan__ wrote:
| 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 wrote:
| 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 wrote:
| Good simulations have constant time step and may not run in
| real time. From inside such simulation, you would never know.
| braden-lk wrote:
| I was introduced to this idea by the book Permutation City.
| Great read.
| marcosdumay wrote:
| The idea on Permutation City is way crazier than a mere
| computer simulation.
| __MatrixMan__ wrote:
| I agree, it's awesome. I wish more scifi authors were as
| ambitious as Egan.
| __MatrixMan__ wrote:
| 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.
| guappa wrote:
| Just fyi, confetti are candies in italy. Not bits of paper.
| ale42 wrote:
| 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 wrote:
| Ah, so basically the same thing, but they hit much harder
| when they land?
| ale42 wrote:
| I guess they also fall down much more quickly
| drivers99 wrote:
| 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).
| colesantiago wrote:
| 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..
| lambaro wrote:
| Hard to get much more obvious than that. How else did you think
| this was implemented as a front-end library?
| chedabob wrote:
| 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 wrote:
| a whole JS library _gasp_
|
| libraries are in every language.
| ecuaflo wrote:
| I am a frontend dev and agree it could be done with CSS
| similar to this [0]
|
| [0] https://codepen.io/jh3y/pen/oNqdmbW
| MatthiasPortzel wrote:
| I pressed the power button on my monitor, and now the website
| is all black.
| justneedaname wrote:
| Thank you for the laugh haha
| kaptainscarlet wrote:
| I threw away my laptop, now the website is completely gone.
| helboi4 wrote:
| 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 wrote:
| > what is up with people who believe JS should not exist on
| the web
|
| They said it: privacy
| naikrovek wrote:
| Yep, 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.
| cseleborg wrote:
| 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 voila! A no-JS confetti demo right there in your
| living room.
| graypegg wrote:
| Sadly, the demo does require scissors and a colour
| printer/coloured markers to experience fully.
| jazzyjackson wrote:
| now that you mention it it would be neat to implement this as a
| bunch of overlapping gifs or a fanciful css animation
| Zenzero wrote:
| 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?
| h1fra wrote:
| Very nice, not a fan of this kind of animation but at least it's
| smooth!
| devsatish wrote:
| This is elegant. Shows the passion that goes into building some
| thing that looks so beautiful and easy to integrate.
| dangoodmanUT wrote:
| This is great, has a ton of options and other solutions are way
| more laggy
| languagehacker wrote:
| Cute animation, but I find it hard to say that the confetti
| animation is useful
| bangaroo wrote:
| this says more about you than it does about the confetti
| animation
| kaptainscarlet wrote:
| 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 wrote:
| I think Facebook did something similar if you typed
| "congratulations" in a comment.
| 0xFazio wrote:
| 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.
| lukax wrote:
| 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 wrote:
| Correct! Disable Pointer Events has surprising utility!
| amelius wrote:
| What if you wanted to add the requirement that the user had
| to click on 1 specific piece of confetti?
| nicky0 wrote:
| Then you have a fun programming challenge.
| MartijnHols wrote:
| Add a click event listener to the body and overlay the
| event-coordinates on the canvas.
| amelius wrote:
| Will the canvas allow you to hit-test the confetti piece
| given the coordinate?
| eyelidlessness wrote:
| 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.
| lupire wrote:
| By what time the user clicks, there's no reason for the
| program to _need_ to remember what they drew where.
| jjice wrote:
| 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 wrote:
| Did it work? Did she say yes?
| jjice wrote:
| 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.
| oli-g wrote:
| That's nice :)
|
| I'm curious though - did you use tabs or spaces?
| jjice wrote:
| It was definitely tabs - I'll ask her if she's a space
| kind of gal. Some things can't be compromised!
| sa-code wrote:
| I knew someone that made a PowerPoint presentation for
| their partner for Valentine's Day. So you're doing great in
| comparison
| Atotalnoob wrote:
| My online dating profile was a PowerPoint presentation
| before I met my partner.
|
| It easily quadrupled my matches.
| rockwotj wrote:
| 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
| graypegg wrote:
| 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
| TeMPOraL wrote:
| 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.)
| scoot wrote:
| 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?
| thih9 wrote:
| 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.
| bradly wrote:
| > 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 wrote:
| 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 wrote:
| Asana does that, and it's optional. I like it whenever it
| happens too!
| huhtenberg wrote:
| This has its place, e.g. on a completion of a game or some
| such.
| ivanbozic wrote:
| 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!
| Andrex wrote:
| 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.
| wasteduniverse wrote:
| 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?
| GrantMoyer wrote:
| 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.
| fromwilliam wrote:
| 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.).
| ericol wrote:
| Go multi click on the run button for the "School Pride" demo. I
| double dare you.
| eddieroger wrote:
| 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.
| OisinMoran wrote:
| 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!
| lngarner wrote:
| Interesting!
| swah wrote:
| Looks a lot like Raycast one :)
| strongpigeon wrote:
| 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!
| wackget wrote:
| 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 wrote:
| Agreed. I see really no good reason not to enable this by
| default.
| atonse wrote:
| They have it in the Readme where they're considering making it
| a default in the future.
| albert_e wrote:
| 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 wrote:
| I added confetti to our salespeople's admin dashboard for when
| they make a sale. Surprisingly enjoyable and motivating.
| lpapez wrote:
| 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.
| isp wrote:
| JavaScript has been about since 1995, and certainly by no later
| than the early 2000s was used for these animations.
| Rumudiez wrote:
| tiled gifs, most likely
| naikrovek wrote:
| Disclaimer: 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 wrote:
| Same utility as animations in general. Such animation as this
| one for example fits when a user receives something or solves a
| challenge and similar
| DowagerDave wrote:
| 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.
|
| Thanks!
| carimura wrote:
| I 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 wrote:
| 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.
| SchizoDuckie wrote:
| I 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!
___________________________________________________________________
(page generated 2024-04-25 23:01 UTC)