Show HN: Embed a snow effect on your website
embed.imEmbed a snow effect on your website with one line of code (~1.3kB), and add some Christmas magic to your websites. A quick weekend project :) Ahh, adding snow effects to your websites with JS, the reason Javascript was actually invented in the first place, along with showing current time alongside your cursor ;). Yikes, who remembers these https://codepen.io/maheshambure21/pen/ZGevNP :) Wow, this is what is missing on my blog. Haha, thanks for another idea, cursor showing current time is what we all miss on our websites today :) PS. The JS is used just to generate and embed the code, snow effect is 100% CSS :) Yeah nowadays CSS is pretty powerful, back in the day the CSS couldn't even handle your website layout, had to use tables for that ;) Tables? pft. Frames. Frames were the business. Also consider making a replacement for the marquee element for a true nostalgic experience. Or does it still work in modern browsers? It has been removed from web standards, but at least today it still works both in Chrome and Safari, I just tested. See for yourself: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ma... Wow, I never even knew you could scroll upwards or both ways! Works on Firefox too. I tried adding <blink> but (thankfully) that didn't work. Blinking Marquees were a big thing. Blink was removed a long time ago, but you can emulate it easily with CSS animations. To make it even more irritatingly attention grabbing while trying to read something else, layer the blink (or fade if being slightly more subtle) so it occasionally blinks brighter. Use the "Cicada Principle" to make the blink unpredictable with minimal effort. Nice. I'll have to take a page out of your book: my homepage currently uses JS to animate underwater bubbles and uses 100% CPU. Strange coincidence, I was thinking about fixing that today... It’s a cool effect but would be better to go front-and-center with the source code. Asking people to embed random third party scripts on their web pages is a security bottomless pit. The URL is not versioned, so it will break whenever OP makes an update (which is arguably a good thing, but we really need OP to provide us with a versioned URL) Luckily, your snow effect is not mission-critical. So even without the versioned URL, I'd probably take the trade-offs; the snow effect might disappear, but at least I don't give some random person arbitrary remote code execution permissions on my website. But yeah, the URL should really be versioned. Reminds me of an online party invite [0] I made with a friend back in 2012. We made a bunch of winter/holiday related libraries (font, snow fall, randomly generated snow-capped mountain scenery and marquee lights border) all constructed from HTML form elements. The font, based on low-res [1] (with permission), is still available as a library [2] 0. https://web.archive.org/web/20150313003701/http://megazinema... I would love to see a proper snow effect like in old demos or windows screen overlays where the snow piled up on UI elements I made this quite a few years ago although it’s all canvas so doesn’t interact with the page https://www.horsedrawngames.com/nye/ For a friend's page a while ago we wanted one where the snow would accumulate on DOM elements (anything with a top border, or some such heuristic) but couldn't find one. A quick search finds none currently either (many where it accumulates at the bottom of the page/viewport or on/in a particular DOM element, but none that have it build up generically on DOM boxes. One of the many items in my huge pile of Things To Bother Doing One Day! Don't stop there! It will need tiny householders to shovel the snow off when the accumulation is too deep, and for a stretch goal the cascading snow can induce avalanches. With enough feature creep you'll be able to declare version 1.0 complete the same day you hear the first cuckoo of spring. I wasn't planning quite that much, though I did consider some rules to try make the stuff pile with a little more realism than simple pixel stacking. And if elements vanished, having the accumulation on them re-fall instead of just disappearing (including partially if things shrunk) though that would need a modified model as settled snow would compact and have a higher terminal velocity… But for true feature creep you need to discard this "planning" (just tell yourself you're deftly avoiding a waterfall approach), and just focus on adding that "one last feature and then I'm done". And then iterate ad infinitum - for example what scale is the height, and for this are you considering just the viewport or the entire page? will you need an atmospheric model to account for lower density at altitude? if it is just the viewport then will scrolling have a consequence, like a sudden wind flurry? will marquee text induce laminar or turbulent flow? Somewhere in the end of the 90s, my "personal website" had a snow effect around this time of year. I guess like fashion, website effects have comeback trends... I remember watching the Commodore 64 Christmas demo with my family on Christmas morning. Chiptune Bach and VGA graphics. It was magic. Later that morning I started learning Basic. Thank you for reminding me that it's time to install xsnow again. 1993, 16.67MHz MIPS R2000 DECStation: Time to run xsnow while I've got these other windows open! 2022, 3.5GHz 6-core Intel Core i5: Nooo! This causes Firefox to use 50% of the CPU! Please don't use this: it more than doubles CPU usage of Firefox. Sounds like you have hardware acceleration turned off on firefox. Possible, but I don't know how to do that and just now tried to find a place to turn it back on and don't see anything under Preferences. Does it? It doesn't seem to affect mine at all. Edit: when the tab is focused it looks like it uses just under 4% of CPU in Firefox, and none when it's not focused. I don't know if that means 4% of total machine CPU or 4% of CPU that Firefox is using. https://www.dropbox.com/s/d3fec6znlleulgt/2022-12-12T11-28-4... On my Macbook Pro running Mohave, Firefox uses 14% CPU for about 50 tabs. When this snow globe thing is running, it uses 36% according to top. These are minimums; it periodically spikes higher. I really like it, reminds me of old school internet. I prefer it with ASCII though, try it with an asterix (*) instead of a white orb for that 90's vibe. Just change this line: For even more snowflake-like appearance, use unicode chararacters SNOWFLAKE + VARIATION SELECTOR-16 (or just SNOWFLAKE alone). Something about this gives me a strong feeling of ambiguous nostalgia, like maybe gaiaonline had this effect when I was 12 or something. Is there a way to make the movement smoother? Right now they change directions instantly. Perhaps an ease-in/out on the x-axis? Great idea :) Reminds me of back in the late 90s and early 00s when these effects fell under the umbrella of "DHTML" (dynamic HTML) and there were sites dedicated to indexing them and making them easy to browse and even review. Nostalgic. I asked GPT what the source code does, was pretty impressed with the response >This code is a JavaScript program that creates a "snow" animation on a web page. When executed, the code generates a number of white, circular elements (which represent snowflakes) and animates them to move across the page, creating the illusion of snow falling. The snowflakes are given random positions, sizes, and animations to make the effect more realistic. What precisely did you enter into GPT? Just the raw source code, or other parts of the website? Which text did you use to ask it for a description? Can you try progressively removing parts of the source code to see what the minimal version is which makes GPT say that the code renders a snow effect? If you want to try things out it's free to use for now https://chat.openai.com/chat. Just pasting the raw source with no prompt is enough to get that description. Thanks for the clarification. Really interesting that just the code is enough! (I cannot sign up to ChatGPT myself because it requires a cell phone number and I won't hand that out to any websites.) It is not entirely accurate (thankfully) the animations are done by CSS which is generated by JavaScript. But the way it understands context is pretty impressive. Okay, this is seriously cool, it's a better summary of the code than I could give just by reading it (and the code being minified doesn't help here). Why is this downvoted? Is GPT the new thing to unconditionally hate now? Because if you care what GPT says about something, you can ask it yourself. But in a more abstract code example where you don't have good context for what is happening, this similar behavior could be very helpful. Actually I couldn’t because the site was overloaded. Plus it never came to mind my to check, so I appreciate the GP post for mentioning this. Eternal strike September /strike December on HN? Nice! I however opted for just downloading the source and referencing it in my project directly, don't trust that link. The 90s called, they want their internet back. That's good, because I miss a few things from back then. Like "Site under construction" gifs! http://www.textfiles.com/underconstruction/ for all your construction needs! OMG. Is there a word that combines a tidal wave of nostalgia with the feeling that you're going to have a seizure? :) Naustalgia? So there's another weekend project idea :) on my website i used to have the opposite: a prominent line at the top stating that "this page is not under construction" along with one of those (not animated) workers with a shovel signs crossed out. I'll take 90s internet over what we have now any day, which is basically a collection of tv stations. The 10s called, they want their desktop back. (Compiz) Is that a bad thing? We can learn a lot from the 90's internet. Like what? Designs that are not copied from each other. I'd say 1997/98. 1997 and 1998 _were_ in the 90s, so the previous post isn't inaccurate… never said it wasn't- I was trying to more-accurate it With sincerest apologies for how much of a pedantic prick I'm about to be… You probably mean more _precise_. It's nice that it uses CSS transforms to animate the snowflakes! On the other hand the flakes are merely circles... If you want to exclude external javascript in your site remember to use subresource integrity as shown by Kiala. The included Javascript can change at any moment! Here is the current prettyfied sourcecode: Now I'm looking for snowx for Windows 11 :) Adding a border makes the snow a bit more visible on a light website: > border: 1px solid black; Personally, I edited it to be I like it! > Just one line of code, which will not slow your website down. This is not completely true though :) Maybe you can add bookmarklet option also? Maybe I'm missing a button or something, but I'd expect there to be a snow effects demo on the page you linked Do you have JS disabled? The linked page has the snow effect on it Working now, I didn't change anything ¯\_(ツ)_/¯
<script
src="https://app.embed.im/snow.js"
integrity="sha384-Valx9sYaUe2U0FqU3e/VYEIMy5hvYI21K429rkwaao8xgzmD6in2EIws7JBQtlnl"
crossorigin="anonymous"
defer></script>
And this line: var embCSS = '.embedim-snow{position: absolute;width: 10px;height: 10px;margin-top:-10px}';
embHTML += '<i class="embedim-snow">*</i>';
and here is the prettified CSS string embCSS: /* https://embed.im/snow */
var embedimSnow = document.getElementById("embedim--snow");
if (!embedimSnow) {
function embRand(a, b) {
return Math.floor(Math.random() * (b - a + 1)) + a
}
var embCSS = '.embedim-snow{position: absolute;width: 10px;height: 10px;background: white;border-radius: 50%;margin-top:-10px}';
var embHTML = '';
for (i = 1; i < 200; i++) {
embHTML += '<i class="embedim-snow"></i>';
var rndX = (embRand(0, 1000000) * 0.0001),
rndO = embRand(-100000, 100000) * 0.0001,
rndT = (embRand(3, 8) * 10).toFixed(2),
rndS = (embRand(0, 10000) * 0.0001).toFixed(2);
embCSS += '.embedim-snow:nth-child(' + i + '){' + 'opacity:' + (embRand(1, 10000) * 0.0001).toFixed(2) + ';' + 'transform:translate(' + rndX.toFixed(2) + 'vw,-10px) scale(' + rndS + ');' + 'animation:fall-' + i + ' ' + embRand(10, 30) + 's -' + embRand(0, 30) + 's linear infinite' + '}' + '@keyframes fall-' + i + '{' + rndT + '%{' + 'transform:translate(' + (rndX + rndO).toFixed(2) + 'vw,' + rndT + 'vh) scale(' + rndS + ')' + '}' + 'to{' + 'transform:translate(' + (rndX + (rndO / 2)).toFixed(2) + 'vw, 105vh) scale(' + rndS + ')' + '}' + '}'
}
embedimSnow = document.createElement('div');
embedimSnow.id = 'embedim--snow';
embedimSnow.innerHTML = '<style>#embedim--snow{position:fixed;left:0;top:0;bottom:0;width:100vw;height:100vh;overflow:hidden;z-index:9999999;pointer-events:none}' + embCSS + '</style>' + embHTML;
document.body.appendChild(embedimSnow)
}
.embedim - snow: nth - child('+i+') {
'+'
opacity: '+(embRand(1,10000)*0.0001).toFixed(2)+';
'+'
transform: translate('+rndX.toFixed(2)+'
vw, -10 px) scale('+rndS+');
'+'
animation: fall - '+i+'
'+embRand(10,30)+'
s - '+embRand(0,30)+'
s linear infinite '+'
}
'+'
@keyframes fall - '+i+' {
'+rndT+' % {
'+'
transform: translate('+(rndX+rndO).toFixed(2)+'
vw, '+rndT+'
vh) scale('+rndS+')
'+'
}
'+'
to {
'+'
transform: translate('+(rndX+(rndO/2)).toFixed(2)+'
vw, 105 vh) scale('+rndS+')
'+'
}
'+'
}
border: 1px solid black;
on my site (trilium.cc) - IMO this is better than the border while still looking natural. background: lightblue
