This package has been deprecated

Author message:

@tsparticles/preset-firefly is the new package, please use that

tsparticles-preset-firefly
TypeScript icon, indicating that this package has built-in type declarations

2.12.0 • Public • Published

banner

tsParticles Firefly Preset

jsDelivr npmjs npmjs GitHub Sponsors

tsParticles preset for a mouse trail made with small fading particles like little fireflies.

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-trail@2/tsparticles.interaction.external.trail.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-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-size@2/tsparticles.updater.size.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles-preset-firefly@2/tsparticles.preset.firefly.min.js"></script>

This script MUST be placed after the tsParticles one.

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-firefly@2/tsparticles.preset.firefly.bundle.min.js"></script>

Usage

Once the scripts are loaded you can set up tsParticles like this:

(async () => {
  await loadFireflyPreset(tsParticles); // this is required only if you are not using the bundle script

  await tsParticles.load("tsparticles", {
    preset: "firefly",
  });
})();

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: "firefly",
});

Like in the sample above, the circles will be replaced by squares.

React.js / Preact / react-particles

The syntax for React.js, Preact and react-particles 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 { loadFireflyPreset } from "tsparticles-preset-firefly";

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 loadFireflyPreset(engine);
  }

  render() {
    const options = {
      preset: "firefly",
    };

    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" />
let particlesOptions = {
  preset: "firefly",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFireflyPreset(engine);
}

Angular

<ng-particles [id]="id" [options]="particlesOptions" [particlesInit]="particlesInit"></ng-particles>
const particlesOptions = {
  preset: "firefly",
};

async function particlesInit(engine: Engine): Promise<void> {
  await loadFireflyPreset(engine);
}

Svelte


<Particles
        id="tsparticles"
        options={particlesOptions}
        particlesInit="{particlesInit}"
/>
let particlesOptions = {
  preset: "firefly",
};

let particlesInit = async (engine) => {
  await loadFireflyPreset(main);
};

flowchart TD

subgraph i [Interactions]

subgraph ie [Externals]
iet[Trail]
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]
prff[Firefly]
end

e --> pr

iet & mb & sc & uc & uop & uou & usi --> prff

Package Sidebar

Install

npm i tsparticles-preset-firefly

Weekly Downloads

22

Version

2.12.0

License

MIT

Unpacked Size

654 kB

Total Files

25

Last publish

Collaborators

  • ar3s
  • matteobruni