🌜
🌞
tsparticles-preset-snow

tsparticles-preset-snow

v2.1.4

tsParticles snow preset

npm install tsparticles-preset-snow

README

banner

tsParticles Snow Preset

jsDelivr npmjs npmjs

tsParticles preset creating a snow effect with falling particles.

Slack Discord Telegram

tsParticles Product Hunt tsparticles snow preset

Sample

demo

How to use it

CDN / Vanilla JS / jQuery

The first step is installing tsParticles following the instructions for vanilla javascript in the main project here

Once installed you need one more script to be included in your page (or you can download that from jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.engine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.move.base.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.shape.circle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.color.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.opacity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.out-modes.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.updater.size.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.preset.snow.min.js"></script>

This script MUST be placed after the tsParticles one.

Bundle

A bundled script can also be used, this will include every needed plugin needed by the preset.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/tsparticles.preset.snow.bundle.min.js"></script>

Usage

Once the scripts are loaded you can set up tsParticles like this:

(async () => {
  await loadSnowPreset(tsParticles); // this is required only if you are not using the bundle script

  await tsParticles.load("tsparticles", {
    preset: "snow",
  });
})();

Customization

Important ⚠️ You can override all the options defining the properties like in any standard tsParticles installation.

tsParticles.load("tsparticles", {
  particles: {
    shape: {
      type: "square", // starting from v2, this require the square shape script
    },
  },
  preset: "snow",
});

Like in the sample above, the circles will be replaced by squares.

React.js / Preact / Inferno

The syntax for React.js, Preact and Inferno is the same.

This sample uses the class component syntax, but you can use hooks as well (if the library supports it).

import Particles from "react-particles";
import type { Engine } from "tsparticles-engine";
import { loadSnowPreset } from "tsparticles-preset-snow";

export class ParticlesContainer extends React.PureComponent<IProps> {
  // this customizes the component tsParticles installation
  async customInit(engine: Engine): Promise<void> {
    // this adds the preset to tsParticles, you can safely use the
    await loadSnowPreset(engine);
  }

  render() {
    const options = {
      preset: "snow",
    };

    return <Particles options={options} init={this.customInit} />;
  }
}

Vue (2.x and 3.x)

The syntax for Vue.js 2.x and 3.x is the same

<Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />
const particlesOptions = {
  preset: "snow",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadSnowPreset(engine);
}

Angular

<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
const particlesOptions = {
  preset: "snow",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadSnowPreset(engine);
}

Svelte


<Particles
        id="tsparticles"
        options={particlesOptions}
        particlesInit={particlesInit}
/>
let particlesOptions = {
  preset: "bubbles",
};

let particlesInit = async (engine) => {
  await loadSnowPreset(engine);
};

General

License
MIT
Typescript Types
Built-in
Tree-shakeable
Yes

Popularity

GitHub Stargazers
4,032
Community Interest
2,895
Number of Forks
472

Maintenance

Commits
10/219/2201,500
Last Commit
Open Issues
15
Closed Issues
313
Open Pull Requests
8
Closed Pull Requests
312

Versions

Versions Released
10/219/22015
Latest Version Released
Jul 28, 2022
Current Tags
latest2.1.4
beta2.0.0-beta.5
next2.0.4
alpha2.0.0-alpha.7

Contributors

matteobruni
matteobruni
Commits: 2,835
VincentGarreau
VincentGarreau
Commits: 624
Wufe
Wufe
Commits: 198
roslaneshellanoo
roslaneshellanoo
Commits: 72
renovate-bot
renovate-bot
Commits: 59
progers
progers
Commits: 57
PieceMaker
PieceMaker
Commits: 52
code-factor
code-factor
Commits: 26
TylerBurnett
TylerBurnett
Commits: 19
Himanshunitrr
Himanshunitrr
Commits: 15
SidiBecker
SidiBecker
Commits: 13
matteoums
matteoums
Commits: 10
Enhmunh-E
Enhmunh-E
Commits: 9
gabrielbarker
gabrielbarker
Commits: 7
gaurang7goel
gaurang7goel
Commits: 6