JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q39445F
  • License MIT

A lightweight HTML5 Canvas snowfall animation library

Package Exports

  • canvas-snowfall
  • canvas-snowfall/dist/snowfall.js
  • canvas-snowfall/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (canvas-snowfall) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Canvas Snowfall

A lightweight and customizable HTML5 Canvas-based snowfall animation library. Create beautiful snow effects for your web projects with minimal setup.

Features

  • 🎨 Pure Canvas-based rendering for optimal performance
  • ⚡️ Lightweight with zero dependencies
  • 🎮 Real-time customization of snowfall parameters
  • 📱 Responsive and mobile-friendly
  • 🎯 Easy to integrate with any web project

Installation

npm install canvas-snowfall

Usage

Basic Setup

import { SnowfallCanvas } from 'canvas-snowfall';

// Get your canvas element
const canvas = document.getElementById('snowfall');

// Initialize snowfall
const snowfall = new SnowfallCanvas(canvas);

// Start the animation
snowfall.start();

HTML Setup

<canvas id="snowfall"></canvas>

Configuration Options

You can customize the snowfall by passing options when initializing:

const options = {
    count: 100,          // Number of snowflakes
    minRadius: 2,        // Minimum snowflake radius
    maxRadius: 5,        // Maximum snowflake radius
    minSpeed: 1,         // Minimum falling speed
    maxSpeed: 3,         // Maximum falling speed
    wind: 0,            // Wind effect (-2 to 2)
    color: 'white',     // Snowflake color
    opacity: 0.8        // Snowflake opacity
};

const snowfall = new SnowfallCanvas(canvas, options);

Dynamic Updates

You can update options on the fly:

// Update single or multiple options
snowfall.updateOptions({
    count: 200,
    wind: 1.5
});

Control Methods

// Start animation
snowfall.start();

// Stop animation
snowfall.stop();

// Resize handler is automatic, but you can call it manually if needed
snowfall.resize();

Example

Check out the examples directory for a complete demo with interactive controls. The example demonstrates how to:

  • Create a fullscreen snow effect
  • Add controls for snowflake count, wind effect, and speed
  • Handle window resizing

Browser Support

Works in all modern browsers that support HTML5 Canvas:

  • Chrome
  • Firefox
  • Safari
  • Edge

License

MIT License - feel free to use in your projects!