Ngx Snowfall

A high-performance, lightweight snowfall effect for Angular, ported from react-snowfall.

Installation

npm install ngx-snowfall

Usage

Import NgxSnowfallComponent into your component (it is standalone):

import { Component } from '@angular/core';
import { NgxSnowfallComponent } from 'ngx-snowfall';

@Component({
  selector: 'app-root',
  imports: [NgxSnowfallComponent],
  template: `
    <div style="position: relative; width: 100vw; height: 100vh; background: #282c34">
      <ngx-snowfall color="white" [snowflakeCount]="200"></ngx-snowfall>
    </div>
  `
})
export class AppComponent {}

Inputs

| Input | Type | Default | Description | |---|---|---|---| | color | string | #dee4fd | Variable color of the snowflakes | | snowflakeCount | number | 150 | Number of snowflakes to render | | speed | [number, number] | [0.5, 3.0] | Range of vertical speed | | wind | [number, number] | [-0.5, 2.0] | Range of horizontal wind speed | | radius | [number, number] | [0.5, 3.0] | Range of snowflake radius | | images | string[] | [] | Array of image URLs to use as snowflakes |

Credits

Ported from react-snowfall by Cahill Foley.