tsparticles
@tsparticles/angular
Official tsParticles Angular component
How to use it
Install
$ npm install @tsparticles/angular @tsparticles/engineor
$ yarn add @tsparticles/angular @tsparticles/engineUsage
template.html
<ngx-particles [id]="id" [options]="particlesOptions" (particlesLoaded)="particlesLoaded($event)"></ngx-particles>
<!-- or -->
<ngx-particles [id]="id" [url]="particlesUrl" (particlesLoaded)="particlesLoaded($event)"></ngx-particles>app.ts
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.
import { NgParticlesService } from "@tsparticles/angular";
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,
};
constructor(private readonly ngParticlesService: NgParticlesService) {}
ngOnInit(): void {
this.ngParticlesService.init(async () => {
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);
});
}
particlesLoaded(container: Container): void {
console.log(container);
}
}app.module.ts
import { NgxParticlesModule } from "@tsparticles/angular";
import { NgModule } from "@angular/core";
@NgModule({
declarations: [
/* AppComponent */
],
imports: [/* other imports */ NgxParticlesModule /* NgxParticlesModule is required*/],
providers: [],
bootstrap: [
/* AppComponent */
],
})
export class AppModule {}Demos
The demo website is here
There's also a CodePen collection actively maintained and updated here