let-it-go

❄️ Let your website snow instantly

Usage no npm install needed!

<script type="module">
  import letItGo from 'https://cdn.skypack.dev/let-it-go';
</script>

README

Let It Go

NPM Version NPM Downloads License

❄️ Let your website snow instantly

🔗 https://eastsun5566.github.io/let-it-go/

✨ Installation

npm i let-it-go

🚀 Usage

Basic

import { LetItGo } from "let-it-go";

// just snow!
const snow = new LetItGo();

More

Initial options

// with some options
const snow = new LetItGo({
  root: document.getElementById("root"), // root container, defaults to document.body
  number: 1000, // number of snowflake, defaults to window.innerWidth
  color: "#ffffff", // snow flake color, defaults to #ffffff
  velocityXRange: [-3, 3], // x of velocity range, defaults to [-3, 3]
  velocityYRange: [1, 5], // y of velocity range, defaults to [1, 5]
  radiusRange: [0.5, 1], // snow flake radius range, defaults to [0.5, 1]
  alphaRange: [0.8, 1], // snow flake opacity range, defaults to [0.8, 1]
  fps: 30, // FPS, defaults to 30
});

// you can use static prop DEFAULT_OPTIONS to get all the default options
const allTheDefaultOptions = LetItGo.DEFAULT_OPTIONS;

Dynamic update options

// you can directly update instance prop and it will reflect those change in canvas
snow.number = 5566;
snow.color: "#333333"
snow.velocityXRange = [-10, 50]; // must be tuple [number, number]

Some additional methods

// just stop animation
snow.letItStop();

// and snow again!
snow.letItGoAgain();

// stop animation & remove mounted canvas
snow.clear();