Exciting release!Introducing "safe npm". Learn more →
Socket
Log inDemoInstall

tsparticles-preset-fire

Package Overview
Dependencies
8
Maintainers
2
Versions
207
Issues
File Explorer

Advanced tools

tsparticles-preset-fire

tsParticles fire preset

    2.9.3latest
    Github

Version published
Maintainers
2
Weekly downloads
173
decreased by-3.35%

Weekly downloads

Readme

Source

banner

tsParticles Fire Preset

jsDelivr npmjs npmjs GitHub Sponsors

tsParticles preset for a faded red to black background with particles colored like fire and ash sparks.

Slack Discord Telegram

tsParticles Product Hunt

Sample

demo

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 ⚠️ 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.

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

Keywords

FAQs

Last updated on 12 Feb 2023

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket
Socket
support@socket.devSocket SOC 2 Logo

Product

  • Package Issues
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc