Zach’s ugly mug (his face) Zach Leatherman

<snow-fall> Web Component

A snowy landscape with a variety of evergreen trees behind a small lake.
December 15, 2023 #16 Popular

<snow-fall> is a zero-dependency, JavaScript web component to add snow to your web site (or to an element on your web site). This is a web component implementation of this Codepen from alphardex.

Usage

<script type="module" src="snow-fall.js"></script>

<!-- Add snow to the page -->
<snow-fall></snow-fall>

<!-- Add snow to the first child element -->
<snow-fall>
	<div style="width: 300px; height: 300px">
</snow-fall>

Installable from npm:

npm install @zachleat/snow-fall

Use with <is-land>

This is best used with <is-land> to respect user preferences for reduced motion:

<is-land on:media="(prefers-reduced-motion: no-preference)">
	<snow-fall></snow-fall>
</is-land>

Change the snow color

<!-- Change snow color -->
<snow-fall style="--snow-fall-color: rebeccapurple"></snow-fall>

Change the number of snowflakes

<!-- Default: 100 -->
<snow-fall count="200"></snow-fall>

Change the size of the snowflakes

Added in v1.0.2

<!-- Default: 10px -->
<snow-fall style="--snow-fall-size: 20px"></snow-fall>

Force the rendering mode (page/element)

You probably don’t need this.

<snow-fall mode="page"></snow-fall>
<snow-fall mode="element"></snow-fall>

IndieWeb Avatar for https://unsplash.com/Poster image by Adam Chang

< Newer
Eleventy v3 with ESM support now on the canary channel
Older >
One YouTube Embed weighs almost 1.2 MB

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://fontawesome.com/Font Awesome and the creator/maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 84 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of CloudCannon, Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

51 Reposts

IndieWeb Avatar for https://www.alvinashcraft.comIndieWeb Avatar for https://davidroessli.comSimonCoxBrett PearyMarius VatasoiuMichael WarrenCthosKevin KippBrian KardellJingle Lizzie ????Estela FrancoPär BjörklundHubert SablonnièreNick TaylorDom MagnificoBenjamimdavidWill Browar ????????‍????biodiverse wetlandsNicolas Hoizeysad spiders LLCDylan </closingtags.com>Vadim MakeevFynn Ellie BeckerRamón CorominasChris​‌​‬ Hayes‌​​​Joe GlombekThat HTML Blog & The Spicy WebdiekusHelen Chong :prami_pride:Lene Saile[Undead] Ted Flynn ????‍♂️:wordpress: JackMx Autumn :blobcatpumpkin:ChipDee (orb mode) :heart_nb:ciroxFynn BeckerMiguelDahiesarnaJoshffooddkatherineJordanPavel Zinoviev ????Patrick BrossetNick TaylorLene SaileJean Pierre KolbRaymond Camden

118 Likes

kenneth ngJack SawyerBrett Peary№ise ❒ showPhil WolstenholmeIndieWeb Avatar for https://bsky.appLuke Murphy (they/them)EINS78Marius VatasoiuJesse SutherlandAndy BroomfieldPierSia KaramalegosOndřej KonečnýAnthony MillerDom Magnificoken7253Kai CataldoThad HumphriesKitt HodAdrian LorenzanadgrammatikoJeff ChewreaperПоміркований бандера ????????Geoff RichJingle Lizzie ????R Ilham SastronegoroJouni MännistöMichael WarrenElijah ManorJosh W. ComeauDaniel FoscoDuffehCarlos ParadaElainaCthosHubert SablonnièremontyloungeParker DavisNick TaylorAntoine CaronPär BjörklundJauntyWunderKindWill TroupKevin KippCory LaViskaNoah JacobusMilan Raj???? Jim Schofield ????Rik SchenninkShawTodd MoreyCloudCannonMarcus LindblomIndieWeb Avatar for https://bsky.appEric CironeYonatan KraDariusz WięckiewiczFernando MateusThomas MoyseColinMichael GeersWill Browar ????????‍????JoachimCJmajjoSimon Cox :SEO:Dave LetoreySashaLukas NagelConor C. Peterson :kirby_fly:AndrewKatie Sylor-MillerJoe GlombekpeejRafa Romero DiosChris​‌​‬ Hayes‌​​​jfdelrioConnor Bärcthos ????Jared White ✊ RESIST ????????‍♂️diekusFynn Ellie BeckerMatthias OttChipSwiftsam :pizza_pineapple:Fynn BeckerThomas Maria HelzleJBJared WhiteHasan AliKyle LarkinDerekdan :html_energy:Katie Sylor-MillerAndrico (semi-hardcore)westbrookNoah LiebmanJon ParkjfroehlichPatrick FultonChris M.Patrick GreyBrantley HarrisEsgerPavel Zinoviev ????Nathan KnowlerAndrew ChouScott JehlNilesh PrajapatiNick TaylorSimon Cox :SEO:Lene SaileToby
72 Comments
  1. Nathan Knowler

    @zachleat Can you make a <snow-shovel> component next?

  2. Raymond Camden

    @zachleat small plea - maybe also host the JS? i hate to npm install anything on a simple web project that doesn't need node_modules, know what i mean?

  3. Zach Leatherman

    @raymondcamden do you mean like start my own web components CDN? ????

  4. Raymond Camden

    @zachleat heh, that's overkill probably. just in general it feels like we should avoid needing to use npm to install simple stuff. wouldnt you agree?

  5. Zach Leatherman

    @raymondcamden ah yeah, for sure! I’m just confused as to the question—it doesn’t have any dependencies, so it doesn’t “require” `npm` at all.Probably reusing this copy would have been better: https://github.com/zachleat/table-saw#installation GitHub - zachleat/table-saw: A small… Truncated

  6. Simon Cox :SEO:

    @zachleat Thank you Zach! Had to make a small css change on the background so you can see the snowflakes but now http://www.simoncox.com is decorated for Christmas! Simon Cox Technical SEO and Bread baker

  7. Zach Leatherman

    @simoncox ah do you mean to your web site’s background or to <snow-fall>? Looks great!

  8. katherine

    @zachleat @nonnullish seasonal decorations!!

  9. Simon Cox :SEO:

    @zachleat To the page background - though i notice on your site you have a white background so you can only see the snow where there is a darker images or component - subtle!

  10. Raymond Camden

    @zachleat i was overthinking it honestly - you link to the source on top - id just download from there if i wanted to skip npm. sorry :>

  11. westbrook

    @zachleat Why doesn't your website follow my dark mode user preferences so I can see even more of this snow!?!?Also, feature request ????, can you add a `pile` attribute that causes the snow to pile up from the bottom of the element to which it applies? Sort of a timer after … Truncated

  12. Nathan Knowler

    @raymondcamden @zachleat Little tip: you can use esm.sh for code on GitHub. Versioning is ultimately commit based, but you can use tags too. I usually include the `?raw` param so it doesn’t do any of its bundling. Example:https://esm.sh/gh/zachleat/snow-fall/snow-fall.js?raw

  13. Zach Leatherman

    @westbrook PRs welcome ???????????? (not for dark mode ????)

  14. Zach Leatherman

    @knowler .remove() ????

  15. Zach Leatherman

    @raymondcamden ah no worries! I think it’s fine to call it out—I just got lazy on the README ????

  16. westbrook

    @zachleat The user agent is always right? ????

  17. Miguel

    @zachleat neat! just in time for the holidays

  18. Zach Leatherman

    @westbrook for sure and I may add one at some point but only when I want to ????

  19. Zach Leatherman

    @miguel thanks!

  20. Raymond Camden

    @zachleat ... a developer... being lazy..... UNHEARD OF!

  21. Noah Liebman

    @zachleat @knowler long live Mowing Man

  22. Zach Leatherman

    @noleli @knowler wait what is this?

  23. Noah Liebman

    @zachleat @knowler a classic Mac screensaver from the ’90s, from the same set as the venerable flying toasters! I grew up on this stuff ???? https://en.wikipedia.org/wiki/After_Dark_(software) After Dark (software) - Wikipedia

  24. Blake Watson :prami:

    @zachleat ayyyy https://bw.omg.lol/ @bw

  25. Thomas Broyer

    @zachleat Fwiw, thanks for using the shadow DOM here, perfect use case for it ????(been wanting to try and make a PR to do the same for @stefan's sparkly-text https://www.stefanjudis.com/blog/a-web-component-to-make-your-text-sparkle/, haven't taken the time yet) A web co… Truncated

  26. Zach Leatherman

    @bw awesome!

  27. Zach Leatherman

    @noleli @knowler web sites need screensavers ????wait I think I remember one of these, was it @stefan?

  28. Zach Leatherman

    @tbroyer @stefan yeah! Shadow DOM is a good tool to have in the toolbox ????

  29. Zach Leatherman

    @robb awesome—that’s not your web site is it?

  30. tbeseda

    @zachleat Hey nice! Looks great on my dark mode and even in light mode when there's an image or code block???? like https://tbeseda.com/blog/super-helpful-server-timing-http-response-headers I combined it with `const isWinter = [10, 11, 0, 1].includes(new Date().getMonth())` … Truncated

  31. Zach Leatherman

    @tbeseda awesome!do I need to add an <is-land> loading condition for local date/time?? ????

  32. Robb Knight

    @zachleat it’s not, no

  33. Zach Leatherman

    @jhofker yay!

  34. tbeseda

    @zachleat Not a bad idea! Things get real weird between server/user/developer time though…

  35. Zach Leatherman

    @tbeseda on:daytime on:nighttime on:winter ????(<is-land> is client only)

  36. Andrew Douglass

    @zachleat is it really website snow if it doesn’t make my computer’s fans scream in pain?

  37. Zach Leatherman

    @ardouglass *sweats from behind a fanless M1 macbook*

  38. Zach Leatherman

    @DavidDarnes my javascript skills are unmatched—react could never

  39. Ollie Boermans

    @DavidDarnes @zachleat ✨Magic!Good thing everyone in my RSS feed reader are good people that will only use this power for the pursuit of goodly goodness.

  40. Matheus Fantinel

    @hexagoncircle @zachleat I’m definitely gonna add this to mine I June when it’s winter here!

  41. Elly Loel ✨????

    @DavidDarnes @zachleat whaaatttt ???? that’s so cool! but also doesn’t seems to be working for me ????

  42. Bob Monsour

    @zachleat It's all wired up. All I gotta do is put snow: true in my front matter and I'm good to go. Just waiting for snow here in the Bay Area.

  43. Zach Leatherman :11ty:

    @bobmonsour ha! how long will you have to wait for that?

  44. Bob Monsour

    @zachleat not sure…fire is more likely

  45. Zach Leatherman :11ty:

    @bobmonsour ????

  46. Cassey Lottman

    @zachleat a coworker made the one for our internal HR site rain pumpkins & ghosts in various sizes for Halloween, that was pretty fun. Then later it was amended to darken the whole screen and show a vampire emoji if the tab was open for too long without mouse movement :D

  47. Cory Dransfeldt :demi:

    @zachleat @bobmonsour The last time it snowed here we only had black and white photos

  48. Zach Leatherman :11ty:

    @cassey oooh inactivity escalation to screen saver ????

  49. Simon Cox :SEO:

    @zachleat It's not snowing here and is unlikely to this December - i have turned on the snow on my site anyway! #WebComponent webcomponent

  50. Mark Conroy

    Oh man, this is so cool.

  51. Zach Leatherman

    web components are cool ????

  52. Mark Conroy

    I know, I built a proof of concept design system with them over only two days last Christmas. web-components-design-system.mark.ie

  53. Zach Leatherman

    hell yeah, love that you’re using subdomains too

  54. Mark Conroy

    I bought too many domains over the years that never saw the light of day. Now I'm a subdomain-first dev.

  55. Zach Leatherman

    _yes_—much easier to maintain long-term too

  56. dgrammatiko

    Let it snow ❄️

  57. Zach Leatherman

    don’t tell anyone that this is a web component—I heard they weren’t the future

  58. Michael Warren

    shhhhh gotta keep those biggest mistakes on the web a secret!

  59. Zach Leatherman

    nobody’s gonna know …how would they know? …how would they know?

  60. Jake Lazaroff

    that’s okay, snowfall might not be in our future either ????

  61. Duffeh
  62. Zach Leatherman

    we’ll always have the metaverse

  63. philip

    Haha that is great, web components rock :). Is there a better way than StencilJS nowadays? I used to use that to build some components for my master thesis back in the day.

  64. Elaina

    My first thought was that this was some reproduction of the NYT feature. But this is much cozier :)

  65. Michael G
  66. Zach Leatherman

    I promised myself I wouldn’t ever use “raw dog” earnestly

  67. philip

    I hear I'm too English-as-a-second-language to understand that, does that mean you create them without a tool/framework?

  68. philip

    Speaking of: I fear*

  69. Zach Leatherman

    (my apologies!) this is my preference for independent one-off components—if I were doing a full-blown app I’d probably use something like @lit.dev!

  70. philip

    Ah cool, thank you! I'm going to have to explore this, the whole PWA/Web component stuff is balsam on my frontend framework churned soul ????

  71. Florian Reuschel

    Bavarian Christmas fair approves. weihnachtsmarkt-chiemsee.de

  72. Zach Leatherman

    looks great!

Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)