# ng-particles
> Official tsParticles Angular Component - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website. Ready to use components available also for Web Components, React, Vue.js (2.x and
Latest version **3.12.0** (published 2023-08-04) · MIT license · 1.7K weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install ng-particles
pnpm add ng-particles
yarn add ng-particles
bun add ng-particles
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 3.12.0 |
| Published | 2023-08-04 |
| First published | 2020-05-21 |
| Weekly downloads | 1.7K |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 34.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 42 |
| Author | Matteo Bruni |
| Maintainers | ar3s, matteobruni |
| Keywords | front-end, frontend, tsparticles, particles.js, particlesjs, particles, particle, canvas, jsparticles, xparticles, particles-js, particles-bg, particles-bg-vue, particles-ts, particles.ts, react-particles-js, react-particles.js, react-particles, react, reactjs, vue-particles, ngx-particles, angular-particles, particleground, vue, vuejs, preact, preactjs, jquery, angularjs, angular, typescript, javascript, animation, web, html5, web-design, webdesign, css, html, css3, animated, background, confetti, canvas, fireworks, fireworks-js, confetti-js, confettijs, fireworksjs, canvas-confetti |
## Links
- npm: https://www.npmjs.com/package/ng-particles
- Repository: https://github.com/tsparticles/angular
- Homepage: https://particles.js.org
- Issues: https://github.com/tsparticles/angular/issues
- Funding: https://github.com/sponsors/matteobruni
- npm.io page: https://npm.io/package/ng-particles
## Dependencies (1)
- [tslib](https://npm.io/package/tslib.md) ^2.4.1
## Alternatives
- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads
## Recent versions
- 3.12.0 (latest) — 2023-08-04
- 3.0.4 (next) — 2022-04-06
- 3.0.0-beta.5 (beta) — 2022-01-30
- 3.0.0-alpha.7 (alpha) — 2021-04-11
- 3.11.0 — 2023-07-15
- 3.10.1 — 2023-06-04
- 3.10.0 — 2023-06-04
- 3.9.3 — 2023-02-12
- 3.9.2 — 2023-02-12
- 3.9.1 — 2023-02-11
- 3.9.0 — 2023-02-10
- 3.8.0 — 2023-01-18
- 3.7.1 — 2022-12-25
- 3.7.0 — 2022-12-23
- 3.6.0 — 2022-12-06
- … 192 more at https://npm.io/package/ng-particles/versions
## README
[](https://particles.js.org)
# ng-particles
[](https://www.npmjs.com/package/ng-particles) [](https://www.npmjs.com/package/ng-particles) [](https://github.com/sponsors/matteobruni)
Official [tsParticles](https://github.com/matteobruni/tsparticles) Angular component
[](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 
## How to use it
### Install
```shell
$ npm install ng-particles tsparticles-engine
```
or
```shell
$ yarn add ng-particles tsparticles-engine
```
### Usage
_template.html_
```html
```
_app.ts_
```typescript
import { MoveDirection, ClickMode, HoverMode, OutMode } from "tsparticles-engine";
//import { loadFull } from "tsparticles"; // if you are going to use `loadFull`, install the "tsparticles" package too.
import { loadSlim } from "tsparticles-slim"; // if you are going to use `loadSlim`, install the "tsparticles-slim" package too.
export class AppComponent {
id = "tsparticles";
/* Starting from 1.19.0 you can use a remote url (AJAX request) to a JSON with the configuration */
particlesUrl = "http://foo.bar/particles.json";
/* or the classic JavaScript object */
particlesOptions = {
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: true,
mode: ClickMode.push,
},
onHover: {
enable: true,
mode: HoverMode.repulse,
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
move: {
direction: MoveDirection.none,
enable: true,
outModes: {
default: OutMode.bounce,
},
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 5 },
},
},
detectRetina: true,
};
particlesLoaded(container: Container): void {
console.log(container);
}
async particlesInit(engine: Engine): Promise {
console.log(engine);
// Starting from 1.19.0 you can add custom presets or shape here, using the current tsParticles instance (main)
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
//await loadFull(engine);
await loadSlim(engine);
}
}
```
_app.module.ts_
```typescript
import { NgParticlesModule } from "ng-particles";
import { NgModule } from "@angular/core";
@NgModule({
declarations: [
/* AppComponent */
],
imports: [/* other imports */ NgParticlesModule /* NgParticlesModule is required*/],
providers: [],
bootstrap: [
/* AppComponent */
],
})
export class AppModule {}
```
## Demos
The demo website is [here](https://particles.js.org)
There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)
---
_Source: https://npm.io/package/ng-particles · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._