npmpackage.info

Gathering detailed insights and metrics for tsparticles-basic

Other packages similar to tsparticles-basic

@tsparticles/basic

3.8.1

Easily create highly customizable particle animations and use them as animated backgrounds for your website. Ready to use components available also for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Riot.js, Inferno.

Gathering detailed insights and metrics for tsparticles-basic

tsparticles-basic - 2.12.0 | npmpackage.info

tsparticles-basic

tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.

2.12.0

8,336

MIT

TypeScript

606.74 kB

3.8

Installations

npm install tsparticles-basic

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

18.16.0

NPM Version

lerna/7.1.4/node@v18.16.0+arm64 (darwin)

Pull Requests

Open

13

Total

4,760

Closed

420

Merged

4,327

Issues

Open

17

Total

445

Closed

428

Releases

tsParticles 3.0.2

v3.0.2

Updated on Dec 06, 2023

tsParticles 3.0.0

v3.0.0

Updated on Dec 05, 2023

View All 2 releases

Languages

TypeScript

JavaScript

TypeScript (93.2%)

JavaScript (6.8%)

Developer

matteobruni

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

8,336 Stars

14,002 Commits

916 Forks

119 Watchers

21 Branches

75 Contributors

Updated on Jul 17, 2025

Sponsor this package

https://github.com/sponsors/matteobruni https://github.com/sponsors/tsparticles https://www.buymeacoffee.com/matteobruni

Maintainers

View All 75 Contributors

Package Meta Information

Latest Version

2.12.0

Package Id

tsparticles-basic@2.12.0

Unpacked Size

606.74 kB

Size

160.93 kB

File Count

NPM Version

lerna/7.1.4/node@v18.16.0+arm64 (darwin)

Node Version

18.16.0

Published on

Aug 04, 2023

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

tsparticles-engine tsparticles-move-base tsparticles-shape-circle tsparticles-updater-color tsparticles-updater-opacity tsparticles-updater-out-modes tsparticles-updater-size

tsParticles Basic Bundle

tsParticles basic bundle loads the minimum features to a tsparticles-engine instance for having dots moving in the canvas.

Included Packages

How to use it

CDN / Vanilla JS / jQuery

The CDN/Vanilla version JS has two different files:

One is a bundle file with all the scripts included in a single file
One is a file including just the loadBasic function to load the tsParticles basic preset, all dependencies must be included manually

Bundle

Including the tsparticles.basic.bundle.min.js file will work exactly like v1, you can start using the tsParticles instance in the same way.

This is the easiest usage, since it's a single file with the some of the v1 features.

All new features will be added as external packages, this bundle is recommended for migrating from v1 easily.

Not Bundle

This installation requires more work since all dependencies must be included in the page. Some lines above are all specified in the Included Packages section.

Usage

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

1(async () => {
2  await loadBasic(tsParticles); // not needed if using the bundle script, required for any other installation
3
4  await tsParticles.load({
5    id: "tsparticles",
6    options: {
7      /* options */
8    },
9  });
10})();

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).

Class Components

1import React from "react";
2import Particles from "react-particles";
3import type { Engine } from "tsparticles-engine";
4import { loadBasic } from "tsparticles-basic";
5
6export class ParticlesContainer extends PureComponent<unknown> {
7  // this customizes the component tsParticles installation
8  async customInit(engine: Engine) {
9    // this adds the bundle to tsParticles
10    await loadBasic(engine);
11  }
12
13  render() {
14    const options = {
15      /* custom options */
16    };
17
18    return <Particles options={options} init={this.customInit} />;
19  }
20}

Hooks / Functional Components

1import React, { useCallback } from "react";
2import Particles from "react-particles";
3import type { Engine } from "tsparticles-engine";
4import { loadBasic } from "tsparticles-basic";
5
6export function ParticlesContainer(props: unknown) {
7  // this customizes the component tsParticles installation
8  const customInit = useCallback(async (engine: Engine) => {
9    // this adds the bundle to tsParticles
10    await loadBasic(engine);
11  });
12
13  const options = {
14    /* custom options */
15  };
16
17  return <Particles options={options} init={this.customInit} />;
18}

Vue (2.x and 3.x)

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

1<Particles id="tsparticles" :particlesInit="particlesInit" :options="options" />

1const options = {
2    /* custom options */
3};
4
5async function particlesInit(engine: Engine) {
6    await loadBasic(engine);
7}

Angular

1<ng-particles [id]="id" [options]="options" [particlesInit]="particlesInit"></ng-particles>

1const options = {
2  /* custom options */
3};
4
5async function particlesInit(engine: Engine): void {
6  await loadBasic(engine);
7}

Svelte

1
2<Particles
3    id="tsparticles"
4    options={options}
5    particlesInit="{particlesInit}"
6/>

1let options = {
2  /* custom options */
3};
4
5let particlesInit = async (engine) => {
6  await loadBasic(engine);
7};

No vulnerabilities found.

10

Security-Policy

Determines if the project has published a security policy.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

8

SAST

Determines if the project uses static code analysis.

2

Maintained

Determines if the project is "actively maintained".

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Signed-Releases

Determines if the project cryptographically signs release artifacts.

0

Fuzzing

Determines if the project uses fuzzing.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:39: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:54: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:68: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/docs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/docs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/docs.yml:25: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/docs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/docs.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/docs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/lock.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/lock.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:84: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:91: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:94: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:110: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:125: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:28: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:37: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/nodejs.yml:53: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:66: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/nodejs.yml:74: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/nodejs.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/stale.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/tsparticles/tsparticles/stale.yml/main?enable=pin
Info: 0 out of 14 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 7 third-party GitHubAction dependencies pinned

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.8

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More