ng-snowfall

Beautiful interactive snowfall component for Angular with mouse wind effect. Snowflakes react to mouse movement creating a realistic wind effect.

Features

• ❄️ Beautiful animated snowfall
• 🖱️ Interactive mouse wind effect - snowflakes react to cursor movement
• 🏔️ Snow accumulation at the bottom with natural drifts
• ⚡ Optimized performance with no memory leaks
• 🎨 Fully configurable

Installation

npm install ng-snowfall

Usage

1. Import the module

import { SnowfallModule } from 'ng-snowfall';

@NgModule({
  imports: [
    SnowfallModule
  ]
})
export class AppModule { }

2. Add component to your template

<ng-snowfall></ng-snowfall>

3. Configure (optional)

<ng-snowfall [config]="snowfallConfig"></ng-snowfall>

snowfallConfig = {
  maxSnowflakes: 400,           // Maximum number of snowflakes (default: 400)
  accumulationRate: 0.6,        // Snow accumulation speed (default: 0.6)
  maxAccumulationHeight: 150,   // Maximum snow height in pixels (default: 150)
  mouseInfluenceRadius: 250,    // Mouse wind effect radius (default: 250)
  windForce: 20,                // Wind force strength (default: 20)
  windDecay: 0.85,              // Wind decay rate (default: 0.85)
  windInertia: 0.15,            // Wind inertia (default: 0.15)
  windFriction: 0.92            // Wind friction (default: 0.92)
};

Configuration Options

Option	Type	Default	Description
maxSnowflakes	number	400	Maximum number of snowflakes on screen
accumulationRate	number	0.6	Speed of snow accumulation at the bottom
maxAccumulationHeight	number	150	Maximum height of accumulated snow in pixels
mouseInfluenceRadius	number	250	Radius of mouse wind effect in pixels
windForce	number	20	Strength of wind effect
windDecay	number	0.85	How fast wind decays when mouse stops (0-1)
windInertia	number	0.15	Wind inertia - delay in snowflake reaction (0-1)
windFriction	number	0.92	Friction applied to snowflake wind velocity (0-1)

Examples

Basic usage

<ng-snowfall></ng-snowfall>

Custom configuration

import { Component } from '@angular/core';
import { SnowfallConfig } from 'ng-snowfall';

@Component({
  selector: 'app-root',
  template: '<ng-snowfall [config]="config"></ng-snowfall>'
})
export class AppComponent {
  config: SnowfallConfig = {
    maxSnowflakes: 300,
    accumulationRate: 0.4,
    windForce: 15
  };
}

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Requirements

• Angular 16+ or 17+ or 18+

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.