tsParticles Fire Preset
tsParticles preset for a faded red to black background with particles colored like fire and ash sparks.
Sample
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/tsparticles-engine@2/tsparticles.engine.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-interaction-external-push@2/tsparticles.interaction.external.push.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-shape-circle@2/tsparticles.shape.circle.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-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-preset-fire@2/tsparticles.preset.fire.min.js"></script>
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/tsparticles-preset-fire@2/tsparticles.preset.fire.bundle.min.js"></script>
Usage
Once the scripts are loaded you can set up tsParticles
like this:
(async () => {
await loadFirePreset(tsParticles);
await tsParticles.load("tsparticles", {
preset: "fire",
});
})();
Customization
Important tsParticles
installation.
tsParticles.load("tsparticles", {
particles: {
shape: {
type: "square", // starting from v2, this require the square shape script
},
},
preset: "fire",
});
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 { loadFirePreset } from "tsparticles-preset-fire";
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 loadFirePreset(engine);
}
render() {
const options = {
preset: "fire",
};
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: "fire",
};
async function particlesInit(engine: Engine): Promise<void> {
await loadFirePreset(engine);
}
Angular
<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
const particlesOptions = {
preset: "fire",
};
async function particlesInit(engine: Engine): Promise<void> {
await loadFirePreset(engine);
}
Svelte
<Particles
id="tsparticles"
options={particlesOptions}
particlesInit={particlesInit}
/>
let particlesOptions = {
preset: "fire",
};
let particlesInit = async (engine) => {
await loadFirePreset(main);
};
flowchart TD
subgraph i [Interactions]
subgraph ie [Externals]
iepu[Push]
end
end
i --> ie
e[tsParticles Engine] --> i
subgraph m [Movers]
mb[Base]
end
e --> m
subgraph s [Shapes]
sc[Circle]
end
e --> s
subgraph u [Updaters]
uc[Color]
uop[Opacity]
uou[Out Modes]
usi[Size]
end
e --> u
subgraph pr [Presets]
prf[Fire]
end
e --> pr
iepu & mb & sc & uc & uop & uou & usi --> prf