Falling snowflakes for your website and christmas mood ❄️

Usage no npm install needed!

<script type="module">
  import snoweb from '';



Falling snowflakes for your website and christmas mood ❄️

Why snoweb?

  1. Everyone loves snow
  2. Zero config although you can pass some configuration
  3. Easy to use

Quick start

Step 1: Install

npm install snoweb --save


yarn add snoweb

Step 2: Import and use

import { Snoweb } from 'snoweb';

const snoweb = new Snoweb();

Step 3: Enjoy



Tip 1: Configure your snowfall

You can provide configuration object Partal<SnowebConfig> into the constructor. See the description in the API section

const snoweb = new Snoweb({
  gravity: 20,
  snowflakesColor: 'red',
  snowflakesCount: 200,
  zIndex: 1000,

Tip 2: Smooth stop + destroy

By default snoweb.stop() method just smoothly stops the snowfall animation. However, the DOM element still remains. If you want to stop and fully destroy it you can do the following:

const snoweb = new Snoweb();
// ...
snoweb.stop(() => snoweb.destroy());



Methods What it does?
constructor(config: Partial<SnowebConfig>) Default constructor which is executed after you have called new Snoweb().
start(): void Begins the snowfall. Ho-ho-ho 🎅
stop(afterStopCallback?: () => void): void Stops the snowfall. afterStopCallback?: () => void - a callback function which is called after the snowfall is fully stopped (all the snowflakes have fallen).
destroy(): void Stops the snowfall immediately and destroys the DOM element
isStarted(): boolean Shows whether the snowfall is being started


Property What it does? Default value
snowflakesCount: number Exact count of the snowflakes to be rendered. Might affect performance if the value is too big. 100
gravity: number The higher the value the faster the snowflakes will fall 10
snowflakesColor: string CSS color of the snowflakes '#fff'
zIndex: number Snowfall z-index 1000000

Check it out on Stackblitz