Show HN: Embed a snow effect on your website (opens in new tab)

(embed.im)

129 pointsksimon3y ago76 comments

Embed 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 :)

76 comments

M4v3R3y ago

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 ;).

madjam0023y ago

Yikes, who remembers these https://codepen.io/maheshambure21/pen/ZGevNP :)

charles_f3y ago

Wow, this is what is missing on my blog.

ksimonOP3y ago

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 :)

M4v3R3y ago

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 ;)

mk_stjames3y ago

Tables? pft. Frames. Frames were the business.

ranting-moth3y ago

Also consider making a replacement for the marquee element for a true nostalgic experience. Or does it still work in modern browsers?

M4v3R3y ago

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...

1 more reply

andai3y ago

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...

henriquez3y ago

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.

Kiala3y ago

  <script
    src="https://app.embed.im/snow.js"
    integrity="sha384-Valx9sYaUe2U0FqU3e/VYEIMy5hvYI21K429rkwaao8xgzmD6in2EIws7JBQtlnl"
    crossorigin="anonymous"
    defer></script>

Retr0id3y ago

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)

mort963y ago

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.

joe87564383y ago

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...

1. https://fonts.adobe.com/fonts/lo-res

2. https://github.com/1800joe/LoResForm

mgoetzke3y ago

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

bananaboy3y ago

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/

dspillett3y ago

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!

thombat3y ago

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.

dspillett3y ago

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…

thombat3y ago

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?

harel3y ago

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...

swayvil3y ago

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.

LarryMullins3y ago

Thank you for reminding me that it's time to install xsnow again.

cbm-vic-203y ago

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!

prirun3y ago

Please don't use this: it more than doubles CPU usage of Firefox.

waboremo3y ago

Sounds like you have hardware acceleration turned off on firefox.

prirun3y ago

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.

nozzlegear3y ago

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...

prirun3y ago

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.

graderjs3y ago

Thanks! I added it to https://dosyago.com

ksimonOP3y ago

Looks perfect :)

neontomo3y ago

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:

  var embCSS = '.embedim-snow{position: absolute;width: 10px;height: 10px;margin-top:-10px}';

And this line:

  embHTML += '<i class="embedim-snow">*</i>';

kseistrup3y ago

For even more snowflake-like appearance, use unicode chararacters SNOWFLAKE + VARIATION SELECTOR-16 (or just SNOWFLAKE alone).

insanitybit3y ago

Something about this gives me a strong feeling of ambiguous nostalgia, like maybe gaiaonline had this effect when I was 12 or something.

andai3y ago

Is there a way to make the movement smoother? Right now they change directions instantly. Perhaps an ease-in/out on the x-axis?

ksimonOP3y ago

Great idea :)

kitsunesoba3y ago

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.

superpope993y ago

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.

RjQoLCOSwiIKfpm3y ago

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?

zamadatix3y ago

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.

RjQoLCOSwiIKfpm3y ago

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.)

nurettin3y ago

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.

M4v3R3y ago

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).

Kiro3y ago

Why is this downvoted? Is GPT the new thing to unconditionally hate now?

josephcsible3y ago

Because if you care what GPT says about something, you can ask it yourself.

mym19903y ago

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.

M4v3R3y ago

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.

marban3y ago

Eternal strike September /strike December on HN?

hugg3y ago

Nice! I however opted for just downloading the source and referencing it in my project directly, don't trust that link.

warinukraine3y ago

The 90s called, they want their internet back.

jagermo3y ago

That's good, because I miss a few things from back then. Like "Site under construction" gifs!

seritools3y ago

http://www.textfiles.com/underconstruction/ for all your construction needs!

crazygringo3y ago

OMG.

Is there a word that combines a tidal wave of nostalgia with the feeling that you're going to have a seizure? :)

1 more reply

ksimonOP3y ago

So there's another weekend project idea :)

em-bee3y ago

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.

pupppet3y ago

I'll take 90s internet over what we have now any day, which is basically a collection of tv stations.

mckravchyk3y ago

The 10s called, they want their desktop back.

(Compiz)

worldofmatthew3y ago

Is that a bad thing? We can learn a lot from the 90's internet.

warinukraine3y ago

Like what?

worldofmatthew3y ago

Designs that are not copied from each other.

BaudouinVH3y ago

I'd say 1997/98.

dspillett3y ago

1997 and 1998 _were_ in the 90s, so the previous post isn't inaccurate…

BaudouinVH3y ago

never said it wasn't- I was trying to more-accurate it

1 more reply

Tepix3y ago

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:

  /* 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)
  }

and here is the prettified CSS string embCSS:

  .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+')
        '+'
    }
    '+'
 }

taubek3y ago

Now I'm looking for snowx for Windows 11 :)

david4223y ago

Adding a border makes the snow a bit more visible on a light website:

    border: 1px solid black;

sodality23y ago

> border: 1px solid black;

Personally, I edited it to be

   background: lightblue

on my site (trilium.cc) - IMO this is better than the border while still looking natural.

tasuki3y ago

I like it!

> Just one line of code, which will not slow your website down.

This is not completely true though :)

sccxy3y ago

Maybe you can add bookmarklet option also?

dreamoffire3y ago

Maybe I'm missing a button or something, but I'd expect there to be a snow effects demo on the page you linked

bearmode3y ago

Do you have JS disabled? The linked page has the snow effect on it

dreamoffire3y ago

Working now, I didn't change anything ¯\_(ツ)_/¯

j / k navigate · click thread line to collapse

76 comments

M4v3R3y ago

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 ;).

madjam0023y ago

Yikes, who remembers these https://codepen.io/maheshambure21/pen/ZGevNP :)

charles_f3y ago

Wow, this is what is missing on my blog.

ksimonOP3y ago

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 :)

M4v3R3y ago

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 ;)

mk_stjames3y ago

Tables? pft. Frames. Frames were the business.

ranting-moth3y ago

Also consider making a replacement for the marquee element for a true nostalgic experience. Or does it still work in modern browsers?

M4v3R3y ago

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...

1 more reply

andai3y ago

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...

henriquez3y ago

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.

Kiala3y ago

  <script
    src="https://app.embed.im/snow.js"
    integrity="sha384-Valx9sYaUe2U0FqU3e/VYEIMy5hvYI21K429rkwaao8xgzmD6in2EIws7JBQtlnl"
    crossorigin="anonymous"
    defer></script>

Retr0id3y ago

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)

mort963y ago

But yeah, the URL should really be versioned.

joe87564383y ago

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...

1. https://fonts.adobe.com/fonts/lo-res

2. https://github.com/1800joe/LoResForm

mgoetzke3y ago

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

bananaboy3y ago

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/

dspillett3y ago

One of the many items in my huge pile of Things To Bother Doing One Day!

thombat3y ago

dspillett3y ago

thombat3y ago

harel3y ago

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...

swayvil3y ago

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.

LarryMullins3y ago

Thank you for reminding me that it's time to install xsnow again.

cbm-vic-203y ago

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!

prirun3y ago

Please don't use this: it more than doubles CPU usage of Firefox.

waboremo3y ago

Sounds like you have hardware acceleration turned off on firefox.

prirun3y ago

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.

nozzlegear3y ago

https://www.dropbox.com/s/d3fec6znlleulgt/2022-12-12T11-28-4...

prirun3y ago

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.

graderjs3y ago

Thanks! I added it to https://dosyago.com

ksimonOP3y ago

Looks perfect :)

neontomo3y ago

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:

  var embCSS = '.embedim-snow{position: absolute;width: 10px;height: 10px;margin-top:-10px}';

And this line:

  embHTML += '<i class="embedim-snow">*</i>';

kseistrup3y ago

For even more snowflake-like appearance, use unicode chararacters SNOWFLAKE + VARIATION SELECTOR-16 (or just SNOWFLAKE alone).

insanitybit3y ago

Something about this gives me a strong feeling of ambiguous nostalgia, like maybe gaiaonline had this effect when I was 12 or something.

andai3y ago

Is there a way to make the movement smoother? Right now they change directions instantly. Perhaps an ease-in/out on the x-axis?

ksimonOP3y ago

Great idea :)

kitsunesoba3y ago

superpope993y ago

I asked GPT what the source code does, was pretty impressed with the response

RjQoLCOSwiIKfpm3y ago

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?

zamadatix3y ago

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.

RjQoLCOSwiIKfpm3y ago

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.)

nurettin3y ago

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.

M4v3R3y ago

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).

Kiro3y ago

Why is this downvoted? Is GPT the new thing to unconditionally hate now?

josephcsible3y ago

Because if you care what GPT says about something, you can ask it yourself.

mym19903y ago

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.

M4v3R3y ago

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.

marban3y ago

Eternal strike September /strike December on HN?

hugg3y ago

Nice! I however opted for just downloading the source and referencing it in my project directly, don't trust that link.

warinukraine3y ago

The 90s called, they want their internet back.

jagermo3y ago

That's good, because I miss a few things from back then. Like "Site under construction" gifs!

seritools3y ago

http://www.textfiles.com/underconstruction/ for all your construction needs!

crazygringo3y ago

OMG.

Is there a word that combines a tidal wave of nostalgia with the feeling that you're going to have a seizure? :)

1 more reply

ksimonOP3y ago

So there's another weekend project idea :)

em-bee3y ago

pupppet3y ago

I'll take 90s internet over what we have now any day, which is basically a collection of tv stations.

mckravchyk3y ago

The 10s called, they want their desktop back.

(Compiz)

worldofmatthew3y ago

Is that a bad thing? We can learn a lot from the 90's internet.

warinukraine3y ago

Like what?

worldofmatthew3y ago

Designs that are not copied from each other.

BaudouinVH3y ago

I'd say 1997/98.

dspillett3y ago

1997 and 1998 _were_ in the 90s, so the previous post isn't inaccurate…

BaudouinVH3y ago

never said it wasn't- I was trying to more-accurate it

1 more reply

Tepix3y ago

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:

  /* 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)
  }

and here is the prettified CSS string embCSS:

  .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+')
        '+'
    }
    '+'
 }

taubek3y ago

Now I'm looking for snowx for Windows 11 :)

david4223y ago

Adding a border makes the snow a bit more visible on a light website: