HN Explorer

82 comments

[ 2.6 ms ] story [ 169 ms ] thread
henriquez
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.
Kiala 

  <script
    src="https://app.embed.im/snow.js"
    integrity="sha384-Valx9sYaUe2U0FqU3e/VYEIMy5hvYI21K429rkwaao8xgzmD6in2EIws7JBQtlnl"
    crossorigin="anonymous"
    defer></script>
Retr0id
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)
mort96
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.

[deleted]
(comment deleted)
[deleted]
(comment deleted)
M4v3R
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 ;).
[deleted]
(comment deleted)
[deleted]
(comment deleted)
ksimon
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 :)

M4v3R
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_stjames
Tables? pft. Frames. Frames were the business.
ranting-moth
Also consider making a replacement for the marquee element for a true nostalgic experience. Or does it still work in modern browsers?
M4v3R
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...
ranting-moth
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.

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

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

mgoetzke
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
Tepix
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+')
        '+'
    }
    '+'
 }
warinukraine
The 90s called, they want their internet back.
jagermo
That's good, because I miss a few things from back then. Like "Site under construction" gifs!
seritools
http://www.textfiles.com/underconstruction/ for all your construction needs!
ksimon
So there's another weekend project idea :)
crazygringo
OMG.

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

em-bee
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.
BaudouinVH
I'd say 1997/98.
dspillett
1997 and 1998 _were_ in the 90s, so the previous post isn't inaccurate…
BaudouinVH
never said it wasn't- I was trying to more-accurate it
dspillett
With sincerest apologies for how much of a pedantic prick I'm about to be…

You probably mean more _precise_.

mckravchyk
The 10s called, they want their desktop back.

(Compiz)

pupppet
I'll take 90s internet over what we have now any day, which is basically a collection of tv stations.
superpope99
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.

M4v3R
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).
nurettin
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.
RjQoLCOSwiIKfpm
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?

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

Kiro
Why is this downvoted? Is GPT the new thing to unconditionally hate now?
josephcsible
Because if you care what GPT says about something, you can ask it yourself.
M4v3R
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.
mym1990
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.
swayvil
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.

harel
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...
dspillett
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!

thombat
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.
dspillett
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…
thombat
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?
dreamoffire
Maybe I'm missing a button or something, but I'd expect there to be a snow effects demo on the page you linked
bearmode
Do you have JS disabled? The linked page has the snow effect on it
dreamoffire
Working now, I didn't change anything ¯\_(ツ)_/¯
prirun
Please don't use this: it more than doubles CPU usage of Firefox.
nozzlegear
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...

prirun
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.
waboremo
Sounds like you have hardware acceleration turned off on firefox.
prirun
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.
[deleted]
(comment deleted)
sccxy
Maybe you can add bookmarklet option also?
marban
Eternal strike September /strike December on HN?
david422
Adding a border makes the snow a bit more visible on a light website:

    border: 1px solid black;
sodality2
> 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.
hugg
Nice! I however opted for just downloading the source and referencing it in my project directly, don't trust that link.
joe8756438
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

insanitybit
Something about this gives me a strong feeling of ambiguous nostalgia, like maybe gaiaonline had this effect when I was 12 or something.
LarryMullins
Thank you for reminding me that it's time to install xsnow again.
cbm-vic-20
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!

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

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

This is not completely true though :)

neontomo
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>';
kseistrup
For even more snowflake-like appearance, use unicode chararacters SNOWFLAKE + VARIATION SELECTOR-16 (or just SNOWFLAKE alone).