https://github.com/eastsun5566/let-it-go
❄️ Let your website snow instantly
https://github.com/eastsun5566/let-it-go
canvas library no-dependencies snow snowflake typescript
Last synced: 3 months ago
JSON representation
❄️ Let your website snow instantly
- Host: GitHub
- URL: https://github.com/eastsun5566/let-it-go
- Owner: EastSun5566
- License: mit
- Created: 2019-12-30T09:03:34.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2025-02-07T08:20:45.000Z (3 months ago)
- Last Synced: 2025-02-25T12:51:41.122Z (3 months ago)
- Topics: canvas, library, no-dependencies, snow, snowflake, typescript
- Language: TypeScript
- Homepage: https://eastsun5566.github.io/let-it-go/
- Size: 1.29 MB
- Stars: 13
- Watchers: 2
- Forks: 0
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# ❄️ Let It Go
[](https://www.npmjs.com/package/let-it-go)
[](https://www.npmjs.com/package/let-it-go)
[](https://jsr.io/@eastsun5566/let-it-go)
[](https://github.com/EastSun5566/let-it-go/blob/main/LICENSE)
[
](https://www.buymeacoffee.com/eastsun5566)
> Let your website snow instantly, zero dependencies, small & fast
🔗
## ✨ Installation
```sh
npm i let-it-go
```
## 🚀 Usage
### Basic
```js
import { LetItGo } from "let-it-go";
// just snow!
const snow = new LetItGo();
```
### Advance
#### Options
```js
// create snow with some options
const snow = new LetItGo({
// root container, defaults to `document.body`
root: document.getElementById("root"),
// number of snowflake, defaults to `window.innerWidth`
number: 1000,
// velocity x range of snowflake, defaults to `[-3, 3]`
velocityXRange: [-3, 3],
// velocity y range of snowflake, defaults to `[1, 5]`
velocityYRange: [1, 5],
// radius range of snowflake, defaults to `[0.5, 1]`
radiusRange: [0.5, 1],
// color of snowflake color, defaults to `#ffffff`
color: "#ffffff",
// opacity range of snowflake, defaults to `[0.8, 1]`
alphaRange: [0.8, 1],
// background color of `canvas` element, defaults to `transparent`
backgroundColor: "transparent",
// style prop of `canvas` element, defaults to `{ zIndex: -1, pointerEvents: 'none' }`
style: { zIndex: -999, pointerEvents: "none" },
});
// you can use static prop `DEFAULT_OPTIONS` to get all the default options
const allTheDefaultOptions = LetItGo.DEFAULT_OPTIONS;
```
#### Dynamic get/set instance options
```js
/** the number of snowflake */
const snowflakeNumber = snow.number;
// you can directly update instance prop and it will reflect those change limitedly
snow.number = 5566;
snow.color: "#333333"
snow.velocityXRange = [-10, 50]; // must be tuple `[number, number]`
```
#### Some other methods
```js
// just stop animation
snow.letItStop();
// and snow again!
snow.letItGoAgain();
// stop animation & remove mounted `canvas` element
snow.clear();
```