winter.js

Last updated: November 6, 2026

Spooky season is over, so the ghosts went home. Time to deck the halls of your website instead. 🎄⛄❄️

A string of lights hangs around the edge of your page and twinkles, chases and fades. Snow falls in front of and behind your content and slowly piles up on top of your boxes and buttons. Every so often a snowman pops up from a corner to wave, and sometimes a snowball comes flying across the screen at him. Click him to throw one yourself.

Live Demo (you're watching it now!)

Watch the snow pile up on these boxes. Wave your mouse through the snow to blow it around, click a bulb to pop it, and when the snowman shows up, click him to throw a snowball his way.

The Porch

Three strands of lights, two of them working.

The Kitchen

Cookies cooling. Do not count them, nobody else did.

The Yard

A snowman went up yesterday. He moves when you're not looking.

The Den

Fire going, cocoa in hand, a movie you've seen 40 times.

Play with it

Change the settings and the page updates. The snippet below the controls updates too, so you can copy the settings you like.

Snowflakes 90 Chance to fall behind 0.4 Light pattern Lights Snow piles up Snowman

Your device asks for reduced motion, so winter.js stays asleep. That's on purpose. You can turn this off with respectReducedMotion: false.

<script src="https://scripts.brebs.net/winter/winter.js"></script>

Quick setup

Add this anywhere on your page. Right before </body> works well.

<script src="https://scripts.brebs.net/winter/winter.js"></script>

Optional settings

To change the defaults, define window.WinterConfig before loading the script. Only include the settings you want to change.

<script>
  window.WinterConfig = {
    snowCount: 120,
    lightsPattern: 'chase',
    snowmanEnabled: true
  };
</script>
<script src="https://scripts.brebs.net/winter/winter.js"></script>

Setting	Default	Controls
`snowCount`	90	Number of snowflakes on screen
`snowBackChance`	0.4	Chance a flake falls behind your content (0 to 1)
`snowMinSize` / `snowMaxSize`	1.2 / 3.6	Flake radius range in px
`pileUp`	true	Snow collects on top of boxes, panels and buttons
`pileMax`	12	Tallest a pile gets, in px
`pileSelector`	null	CSS selector for what snow piles on, e.g. `'.card, nav a'`. Leave it `null` to find boxes automatically
`mouseWind`	true	Moving the mouse blows the snow around
`lightsEnabled`	true	Whether the string of lights shows
`lightsPattern`	'cycle'	`'twinkle'`, `'chase'`, `'fade'`, or `'cycle'` to switch every 20 seconds
`lightsEdges`	all four	Which edges get lights, e.g. `['top']` or `['top', 'bottom']`
`lightsSidesMinWidth`	700	Below this screen width only the top and bottom lights show, so the sides don't cover text
`lightsSpacing`	46	Space between bulbs in px
`lightsColors`	red, green, gold, blue, pink	Bulb colors, e.g. `['#fff', '#9ad']` for icy white
`badBulbs`	true	A bulb flickers or burns out now and then
`snowmanEnabled`	true	Whether the snowman shows up
`snowmanMinDelay` / `snowmanMaxDelay`	12000 / 28000	Time between snowmen in ms
`snowmanSize`	110	Snowman width in px
`respectReducedMotion`	true	Stay off for visitors who prefer reduced motion

Controls

The script adds a Winter object you can call from the console or your own buttons:

Winter.stop();     // clear the snow, lights and snowman
Winter.start();    // bring it all back
Winter.snowman();  // send out a snowman right now

<button onclick="Winter.snowman()">Build a snowman</button>

If the back snow doesn't show up

Snow in the back layer falls underneath your page. If your theme gives both html and body a solid background, the body's background covers it and you'll only see the front snow. Make the body transparent and keep the color on html:

<style>
  body { background: transparent; }
</style>

Get the script

You can use the hosted version directly:

<script src="https://scripts.brebs.net/winter/winter.js"></script>

Self-hosting (if you like doing that)

If you prefer to host the script yourself, you can copy the source and host it anywhere that serves raw JavaScript. When you self-host, you can also change the three quick settings at the top of the file (WINTER_SNOWFLAKES, WINTER_SHOW_LIGHTS and WINTER_SHOW_SNOWMAN) instead of using WinterConfig.

One easy option is use omg.lol amazing service of paste.lol.

Copy or download the code of winter.js
Create a new paste at paste.lol
Name it something like winter.js
Use the /raw version of the paste as your script source

<script src="https://ericmwalk.paste.lol/winter.js/raw"></script>