
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
tsparticles-preset-fireworks
Advanced tools
tsParticles preset for fireworks effect.
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/tsparticles-engine@2/tsparticles.engine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-move-base@2/tsparticles.move.base.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-plugin-emitters@2/tsparticles.plugin.emitters.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-shape-circle@2/tsparticles.shape.circle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-shape-line@2/tsparticles.shape.line.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-angle@2/tsparticles.updater.angle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-color@2/tsparticles.updater.color.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-life@2/tsparticles.updater.life.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-opacity@2/tsparticles.updater.opacity.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-out-modes@2/tsparticles.updater.out-modes.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-size@2/tsparticles.updater.size.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-updater-stroke-color@2/tsparticles.updater.stroke-color.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-fireworks@2/tsparticles.preset.fireworks.min.js"></script>
This script MUST be placed after the tsParticles
one.
A bundled script can also be used, this will include every needed plugin needed by the preset.
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-fireworks@2/tsparticles.preset.fireworks.bundle.min.js"></script>
Once the scripts are loaded you can set up tsParticles
like this:
(async () => {
await loadFireworksPreset(tsParticles); // this is required only if you are not using the bundle script
await tsParticles.load("tsparticles", {
preset: "fireworks",
});
})();
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: "fireworks",
});
Like in the sample above, the circles will be replaced by squares.
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 { loadFireworksPreset } from "tsparticles-preset-fireworks";
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 loadFireworksPreset(engine);
}
render() {
const options = {
preset: "fireworks",
};
return <Particles options={options} init={this.customInit} />;
}
}
The syntax for Vue.js 2.x
and 3.x
is the same
<Particles id="tsparticles" :particlesInit="particlesInit" :options="particlesOptions" />
const particlesOptions = {
preset: "fireworks",
};
async function particlesInit(engine: Engine): Promise<void> {
await loadFireworksPreset(engine);
}
<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
const particlesOptions = {
preset: "fireworks",
};
async function particlesInit(engine: Engine): Promise<void> {
await loadFireworksPreset(engine);
}
<Particles
id="tsparticles"
options={particlesOptions}
particlesInit={particlesInit}
/>
let particlesOptions = {
preset: "fireworks",
};
let particlesInit = async (engine) => {
await loadFireworksPreset(engine);
};
flowchart TD
subgraph m [Movers]
mb[Base]
end
e[tsParticles Engine] --> m
subgraph pl [Plugins]
ple[Emitters]
end
e --> pl
subgraph s [Shapes]
sc[Circle]
sl[Line]
end
e --> s
subgraph u [Updaters]
ua[Angle]
uc[Color]
ud[Destroy]
ul[Life]
uop[Opacity]
uou[Out Modes]
usi[Size]
ust[Stroke Color]
end
e --> u
subgraph pr [Presets]
prfw[Fireworks]
end
e --> pr
mb & ple & sc & sl & ua & uc & ud & ul & uop & uou & usi & ust --> prfw
FAQs
tsParticles fireworks preset
The npm package tsparticles-preset-fireworks receives a total of 149 weekly downloads. As such, tsparticles-preset-fireworks popularity was classified as not popular.
We found that tsparticles-preset-fireworks demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.