DEV Community

Cover image for ❄️ How I Built a Snow Effect Widget for Websites (and Made It Fully Customizable)
Sylvain
Sylvain

Posted on

❄️ How I Built a Snow Effect Widget for Websites (and Made It Fully Customizable)

Last December, I wanted to add a small snow animation to a personal project — nothing crazy, just a gentle snowfall in the background to give it that winter holiday vibe.

You’d think there’d be plenty of good options out there, but every script I found felt… stuck in 2009. Either they were too heavy, used outdated JS, or required digging into CSS/JS files to tweak basic settings.

So I did what any slightly stubborn developer does: I built my own.
And that’s how SnowStorm was born.


Why another “snow effect” script?

I wanted something:

  • Lightweight — small bundle size, smooth animation even on low-end devices.

  • Plug-and-play — works by pasting a single tag.

  • Customizable without code edits — colors, shapes, speeds, all adjustable via a dashboard or inline config.

The result is a widget you can drop into any site in seconds — whether it’s a static HTML page, a WordPress blog, or a big e-commerce store.


What it can do

Here are some of the settings you can control:

Colors → white snow, golden flakes, multi-color confetti.

Shapes → classic circles, stars, custom emoji (❄️, ☃️, 🎄, even 🍕 if that’s your thing).

Speed & density → tweak how fast flakes fall and how many appear.

Mouse interaction → flakes can move away from the cursor.

Melt effects → make flakes “melt” when they land.

Device targeting → disable on mobile for performance.

Date range → run only between start and end dates (e.g., Dec 1–Jan 1).


Quick example

Here’s the bare-minimum setup:

<script src="https://www.ezpeazy.dev/snow-storm.js?token=your-personal-token" async />
Enter fullscreen mode Exit fullscreen mode

And that's it!


Demo

You can try it here → Live SnowStorm Demo
Change the colors, shapes, and even drop in your favorite emoji.


If you end up using it, I’d love to see a link — especially if you’ve gone wild with custom emojis. The stranger, the better.

Happy coding — and happy snowing! ☃️

Top comments (0)