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 #6 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://cloudcannon.com/CloudCannon. He is the creator and 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 77 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

20 Reposts

Mx Autumn :blobcatpumpkin:ChipDee (orb mode) :heart_nb:ciroxFynn BeckerMiguelDahiesarnaJoshffooddkatherineJordanPavel Zinoviev ????Patrick BrossetNick TaylorLene SaileJean Pierre KolbRaymond CamdenIndieWeb Avatar for https://www.alvinashcraft.comIndieWeb Avatar for https://davidroessli.com

32 Likes

Matthias 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
41 Comments
  1. Nathan Knowler

    Nathan Knowler

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

  2. Raymond Camden

    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

    Zach Leatherman

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

  4. Raymond Camden

    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

    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:

    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

    Zach Leatherman

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

  8. katherine

    katherine

    @zachleat @nonnullish seasonal decorations!!

  9. Simon Cox :SEO:

    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

    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

    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

    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

    Zach Leatherman

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

  14. Zach Leatherman

    Zach Leatherman

    @knowler .remove() ????

  15. Zach Leatherman

    Zach Leatherman

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

  16. westbrook

    westbrook

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

  17. Miguel

    Miguel

    @zachleat neat! just in time for the holidays

  18. Zach Leatherman

    Zach Leatherman

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

  19. Zach Leatherman

    Zach Leatherman

    @miguel thanks!

  20. Raymond Camden

    Raymond Camden

    @ZAChleaT ... a deVElOper... bEiNG LAzY..... UnhEARD Of!

  21. Noah Liebman

    Noah Liebman

    @zachleat @knowler long live Mowing Man

  22. Zach Leatherman

    Zach Leatherman

    @noleli @knowler wait what is this?

  23. Noah Liebman

    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:

    Blake Watson :prami:

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

  25. Thomas Broyer

    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

    Zach Leatherman

    @bw awesome!

  27. Zach Leatherman

    Zach Leatherman

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

  28. Zach Leatherman

    Zach Leatherman

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

  29. Zach Leatherman

    Zach Leatherman

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

  30. tbeseda

    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

    Zach Leatherman

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

  32. Robb Knight

    Robb Knight

    @zachleat it’s not, no

  33. Zach Leatherman

    Zach Leatherman

    @jhofker yay!

  34. tbeseda

    tbeseda

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

  35. Zach Leatherman

    Zach Leatherman

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

  36. Andrew Douglass

    Andrew Douglass

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

  37. Zach Leatherman

    Zach Leatherman

    @ardouglass *sweats from behind a fanless M1 macbook*

  38. Zach Leatherman

    Zach Leatherman

    @DavidDarnes my javascript skills are unmatched—react could never

  39. Ollie Boermans

    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

    Matheus Fantinel

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

  41. Elly Loel ✨????

    Elly Loel ✨????

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

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)