Security News
The Dark Side of Open Source
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
tsparticles-preset-fire
Advanced tools
Readme
tsParticles preset for a faded red to black background with particles colored like fire and ash sparks.
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>
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>
Once the scripts are loaded you can set up tsParticles
like this:
(async () => {
await loadFirePreset(tsParticles);
await tsParticles.load("tsparticles", {
preset: "fire",
});
})();
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: "fire",
});
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 { 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} />;
}
}
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);
}
<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
const particlesOptions = {
preset: "fire",
};
async function particlesInit(engine: Engine): Promise<void> {
await loadFirePreset(engine);
}
<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
FAQs
tsParticles fire preset
The npm package tsparticles-preset-fire receives a total of 28 weekly downloads. As such, tsparticles-preset-fire popularity was classified as not popular.
We found that tsparticles-preset-fire demonstrated a healthy version release cadence and project activity because the last version was released less than 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
At Node Congress, Socket CEO Feross Aboukhadijeh uncovers the darker aspects of open source, where applications that rely heavily on third-party dependencies can be exploited in supply chain attacks.
Research
Security News
The Socket Research team found this npm package includes code for collecting sensitive developer information, including your operating system username, Git username, and Git email.
Security News
OpenJS is warning of social engineering takeovers targeting open source projects after receiving a credible attempt on the foundation.