<snow-fall> Web Component
December 15, 2023
#17 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>
Poster image by Adam Chang
41 Comments
Nathan Knowler
@zachleat Can you make a <snow-shovel> component next?
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?
Zach Leatherman
@raymondcamden do you mean like start my own web components CDN? ????
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?
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
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
Zach Leatherman
@simoncox ah do you mean to your web site’s background or to <snow-fall>? Looks great!
katherine
@zachleat @nonnullish seasonal decorations!!
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!
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 :>
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
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
Zach Leatherman
@westbrook PRs welcome ???????????? (not for dark mode ????)
Zach Leatherman
@knowler .remove() ????
Zach Leatherman
@raymondcamden ah no worries! I think it’s fine to call it out—I just got lazy on the README ????
westbrook
@zachleat The user agent is always right? ????
Miguel
@zachleat neat! just in time for the holidays
Zach Leatherman
@westbrook for sure and I may add one at some point but only when I want to ????
Zach Leatherman
@miguel thanks!
Raymond Camden
@zachleat ... a developer... being lazy..... UNHEARD OF!
Noah Liebman
@zachleat @knowler long live Mowing Man
Zach Leatherman
@noleli @knowler wait what is this?
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
Blake Watson :prami:
@zachleat ayyyy https://bw.omg.lol/ @bw
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
Zach Leatherman
@bw awesome!
Zach Leatherman
@noleli @knowler web sites need screensavers ????wait I think I remember one of these, was it @stefan?
Zach Leatherman
@tbroyer @stefan yeah! Shadow DOM is a good tool to have in the toolbox ????
Zach Leatherman
@robb awesome—that’s not your web site is it?
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
Zach Leatherman
@tbeseda awesome!do I need to add an <is-land> loading condition for local date/time?? ????
Robb Knight
@zachleat it’s not, no
Zach Leatherman
@jhofker yay!
tbeseda
@zachleat Not a bad idea! Things get real weird between server/user/developer time though…
Zach Leatherman
@tbeseda on:daytime on:nighttime on:winter ????(<is-land> is client only)
Andrew Douglass
@zachleat is it really website snow if it doesn’t make my computer’s fans scream in pain?
Zach Leatherman
@ardouglass *sweats from behind a fanless M1 macbook*
Zach Leatherman
@DavidDarnes my javascript skills are unmatched—react could never
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.
Matheus Fantinel
@hexagoncircle @zachleat I’m definitely gonna add this to mine I June when it’s winter here!
Elly Loel ✨????
@DavidDarnes @zachleat whaaatttt ???? that’s so cool! but also doesn’t seems to be working for me ????