<snow-fall> Web Component
December 15, 2023
#15 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
![[Undead] Ted Flynn ????♂️](https://v1.image.11ty.dev/https%3A%2F%2Fwebmention.io%2Favatar%2Fcdn.masto.host%2F095bd91ad6fd8c678854e48c15371190e40f2cbeb4f9219075afb5bec345a38e.png/jpeg/72/){kind=small}
72 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 ????
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.
Zach Leatherman :11ty:
@bobmonsour ha! how long will you have to wait for that?
Bob Monsour
@zachleat not sure…fire is more likely
Zach Leatherman :11ty:
@bobmonsour ????
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
Cory Dransfeldt :demi:
@zachleat @bobmonsour The last time it snowed here we only had black and white photos
Zach Leatherman :11ty:
@cassey oooh inactivity escalation to screen saver ????
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
Mark Conroy
Oh man, this is so cool.
Zach Leatherman
web components are cool ????
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
Zach Leatherman
hell yeah, love that you’re using subdomains too
Mark Conroy
I bought too many domains over the years that never saw the light of day. Now I'm a subdomain-first dev.
Zach Leatherman
_yes_—much easier to maintain long-term too
dgrammatiko
Let it snow ❄️
Zach Leatherman
don’t tell anyone that this is a web component—I heard they weren’t the future
Michael Warren
shhhhh gotta keep those biggest mistakes on the web a secret!
Zach Leatherman
nobody’s gonna know …how would they know? …how would they know?
Jake Lazaroff
that’s okay, snowfall might not be in our future either ????
Duffeh
Zach Leatherman
we’ll always have the metaverse
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.
Elaina
My first thought was that this was some reproduction of the NYT feature. But this is much cozier :)
Michael G
Zach Leatherman
I promised myself I wouldn’t ever use “raw dog” earnestly
philip
I hear I'm too English-as-a-second-language to understand that, does that mean you create them without a tool/framework?
philip
Speaking of: I fear*
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!
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 ????
Florian Reuschel
Bavarian Christmas fair approves. weihnachtsmarkt-chiemsee.de
Zach Leatherman
looks great!