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!