tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components

tsParticles - TypeScript Particles

Do you want to use it on your website?

Documentation and Development references here 📖

This library is available on two of the most popular CDNs and it's easy and ready to use, if you were using particles.js it's even easier.

You'll find the instructions below, with all the links you need, and don't be scared by TypeScript, it's just the source language.

The output files are just JavaScript. 🤩

CDNs and npm have all the sources you need in Javascript, a bundle browser ready (tsparticles.engine.min.js), and all files splitted for import syntax.

If you are interested there are some simple instructions just below to guide you to migrate from the old particles.js library.

Library installation

Hosting / CDN

Please use these hosts or your own to load tsParticles on your projects

jsDelivr

cdnjs

unpkg

https://unpkg.com/@tsparticles/confetti/ https://unpkg.com/@tsparticles/engine/ https://unpkg.com/@tsparticles/fireworks/ https://unpkg.com/@tsparticles/basic/ https://unpkg.com/@tsparticles/slim/ https://unpkg.com/tsparticles/ https://unpkg.com/@tsparticles/all/

npm

tsParticles Confetti

tsParticles Engine

tsParticles Fireworks

tsParticles Basic

tsParticles Slim

tsParticles

tsParticles All

npm install @tsparticles/engine

yarn

yarn add @tsparticles/engine

pnpm

pnpm install @tsparticles/engine

Import and require

const tsParticles = require("@tsparticles/engine");

// or

import { tsParticles } from "@tsparticles/engine";

The imported tsParticles is the same instance you have when including the script in the page using the <script> tag.

Usage

Load tsParticles and configure the particles:

index.html

<div id="tsparticles"></div>

<script src="tsparticles.engine.min.js"></script>

app.js

// @path-json can be an object or an array, the first will be loaded directly, and the object from the array will be randomly selected
/* tsParticles.load(@params); */

tsParticles
    .load({
        id: "tsparticles",
        url: "presets/default.json",
    })
    .then(container => {
        console.log("callback - tsparticles config loaded");
    })
    .catch(error => {
        console.error(error);
    });

//or

tsParticles.load({
    id: "tsparticles",
    options: {
        /* options here */
    },
});

//or

tsParticles.load({
    id: "tsparticles",
    options: [
        {
            /* options here */
        },
        {
            /* other options here */
        },
    ],
});
//random object

tsParticles.load({
    id: "tsparticles",
    options: [
        {
            /* options here */
        },
        {
            /* other options here */
        },
    ],
    index: 1,
}); //the second one
// Important! If the index is not in range 0...<array.length, the index will be ignored.

// after initialization this can be used.

/* tsParticles.setOnClickHandler(@callback); */

/* this will be fired from all particles loaded */

tsParticles.setOnClickHandler((event, particles) => {
    /* custom on click handler */
});

// now you can control the animations too, it's possible to pause and resume the animations
// these methods don't change the config so you're safe with all your configurations
// domItem(0) returns the first tsParticles instance loaded in the dom
const particles = tsParticles.domItem(0);

// play will start the animations, if the move is not enabled it won't enable it, it just updates the frame
particles.play();

// pause will stop the animations
particles.pause();

Official components for some of the most used frameworks

Angular

`@tsparticles/angular`

Instructions available here

Astro

`astro-particles`

Instructions available here

Ember.js

`ember-tsparticles`

Instructions available here

Inferno

`inferno-particles`

Instructions available here

jQuery

`jquery-particles`

Instructions available here

Preact

`preact-particles`

Instructions available here

ReactJS

`@tsparticles/react`

Instructions available here

RiotJS

`riot-particles`

You can find the instructions here

SolidJS

`solid-particles`

You can find the instructions here

Svelte

`@tsparticles/svelte`

Instructions available here

VueJS 2.x

`@tsparticles/vue2`

Instructions available here

VueJS 3.x

`@tsparticles/vue3`

Instruction available here

Web Components

`web-particles`

You can find the instructions here

WordPress

`@tsparticles/wordpress`

The plugin page hosted on WordPress.org can be found here

Elementor

Actually, an official tsParticles plugin isn't existing, but I have a collaboration with the Premium Addons for Elementor plugin collection.

Premium Addons for Elementor is one of the most common plugins for Elementor that offers more than 55 highly customizable Elementor Widgets and Section Add-ons. tsParticles is exclusively included in Premium Particles Section Add-on for Elementor Page Builder. Check It Now.
Use Premium Addons for Elementor Page Builder and get the chance to include tsParticles in your next WordPress website without the need to write a single line of code. See a Live Example.

Presets

There are some presets ready to be used in this repository, and they also have a bundle file that contains everything needed to run.

Big Circles

This preset loads big colored circles moving upwards on a white background.

You can find the instructions here

Bubbles

This preset loads colored bubbles coming from the bottom of the screen on a white background.

You can find the instructions here

Confetti

This preset loads white and red confetti launched from the screen center on a transparent background.

You can find the instructions here

Fire

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

You can find the instructions here

Firefly

This preset loads a mouse trail made with small fading particles like little fireflies.

You can find the instructions here

Fireworks

This preset loads a beautiful fireworks effect.

You can find the instructions here

Fountain

You can find the instructions here

Links

You can find the instructions here

Sea Anemone

You can find the instructions here

Snow

You can find the instructions here

Stars

You can find the instructions here

Triangles

You can find the instructions here

Templates and Resources

You can find some tsParticles related templates here. The templates are created for Vanilla Javascript, ReactJS, VueJS, Angular, SvelteJS, and other frameworks.

The templates will vary, new ones can be created or older ones updated with the latest features or changed to a better style. Check them out once in a while.

If you created some good design with tsParticles feel free to submit a pull request with your cool template, you'll be credited as the template author!

https://github.com/tsparticles/templates

Demo / Generator

https://particles.js.org/samples

Video Tutorials

You can find all video tutorials on the website here: https://particles.js.org/video.html

More videos are coming soon! Check every day if there are some new contents.

Characters as particles

Polygon mask

Animated stars

Nyan cat flying on scrolling stars

Snow particles

Background Mask particles

particles.json

You can find some config samples here 📖

Options

You can find all options available here 📖

Want to see it in action and try it?

I've created a tsParticles collection on CodePen 😮 or you can check out my profile

Otherwise, there's the demo page link below.

Want to see even more demos? Clone the repository on your computer and follow these instructions

$ pnpm i
$ pnpm run build
$ cd demo/vanilla
$ pnpm start

Boom! 💥 http://localhost:3000 and you can check out other demos.

If you are brave enough you can switch to the dev branch for trying the features under development.

Migrating from Particles.js

tsParticles has a package that makes this library 100% compatible with the particles.js configuration.

Seriously, you just need to change the script from particles.js to the bundled compatibility package, et-voilà, you're ready 🧙!

You can read more here

Want to know 5 reasons to do the switch? Read here

Below you can find all the information you need to install tsParticles and its new syntax.

Plugins/Customizations

tsParticles now supports some customizations 🥳.

You can create your own plugins

Read more here...

Dependency Graph

flowchart TD

  subgraph core [Core]
    engine[tsParticles Engine]
    perlin-noise[Perlin Noise Lib]
    simplex-noise[Simplex Noise Lib]
    configs[tsParticles Configs]
  end

  subgraph bundle-basic [tsParticles Basic]

    subgraph basic-movers [Movers]
      move-base[Base]
    end

    subgraph basic-shapes [Shapes]
      shape-circle[Circle]
    end

    subgraph basic-updates [Updaters]
      updater-color[Color]
      updater-opacity[Opacity]
      updater-out-modes[Out Modes]
      updater-size[Size]
    end

  end

  engine --> bundle-basic

  subgraph bundle-confetti [tsParticles Confetti]

    subgraph confetti-plugins [Plugins]
      plugin-emitters
      plugin-motion
    end

    subgraph confetti-shapes [Shapes]
      shape-cards
      shape-emoji
      shape-heart
      shape-image
      shape-polygon
      shape-square
      shape-star
    end

    subgraph confetti-updaters [Updaters]
      updater-life
      updater-roll
      updater-rotate
      updater-tilt
      updater-wobble
    end

  end

  bundle-basic --> bundle-confetti

  subgraph bundle-slim [tsParticles Slim]

    subgraph slim-interactions [Interactions]

      subgraph slim-interactions-external [Externals]
        interaction-external-attract[Attract]
        interaction-external-bounce[Bounce]
        interaction-external-bubble[Bubble]
        interaction-external-connect[Connect]
        interaction-external-grab[Grab]
        interaction-external-pause[Pause]
        interaction-external-push[Push]
        interaction-external-remove[Remove]
        interaction-external-repulse[Repulse]
        interaction-external-slow[Slow]
      end

      subgraph slim-interactions-particles [Particles]
        interaction-particles-attract[Attract]
        interaction-particles-collisions[Collisions]
        interaction-particles-links[Links]
      end

    end

    subgraph slim-movers [Movers]
      move-parallax[Parallax]
    end

    subgraph slim-plugins [Plugins]

      subgraph slim-plugins-easings [Easings]
        plugin-easing-quad[Quad]
      end

    end

    subgraph slim-shapes [Shapes]
      shape-emoji[Emoji]
      shape-image[Image]
      shape-line[Line]
      shape-polygon[Polygon]
      shape-square[Square]
      shape-star[Star]
    end

    subgraph slim-updaters [Updaters]
      updater-life[Life]
      updater-rotate[Rotate]
      updater-stroke-color[Stroke Color]
    end

  end

  bundle-basic --> bundle-slim

  subgraph bundle-fireworks [tsParticles Fireworks]

    subgraph fireworks-effects [Effects]
      effect-trail
    end

    subgraph fireworks-plugins [Plugins]
      plugin-emitters

      subgraph fireworks-plugin-emitters-shapes [Emitters Shapes]
        plugin-emitters-shape-square
      end

      plugin-sounds
    end

    subgraph fireworks-updaters [Updaters]
      updater-destroy
      updater-life
      updater-rotate
    end

  end

  bundle-basic --> bundle-fireworks

  subgraph bundle-full [tsParticles]

    subgraph full-interactions [Interactions]

      subgraph full-interactions-external [Externals]
        interaction-external-trail[Trail]
      end

    end

    subgraph full-plugins [Plugins]
      plugin-absorbers[Absorbers]
      plugin-emitters[Emitters]

      subgraph full-plugin-emitters-shapes [Emitters Shapes]
        plugin-emitters-shape-circle[Circle]
        plugin-emitters-shape-square[Square]
      end

    end

    subgraph full-shapes [Shapes]
      shape-text[Text]
    end

    subgraph full-updaters [Updaters]
      updater-destroy[Destroy]
      updater-roll[Roll]
      updater-tilt[Tilt]
      updater-twinkle[Twinkle]
      updater-wobble[Wobble]
    end

  end

  bundle-slim --> bundle-full

  subgraph bundle-all [tsParticles All]

    bundle-pjs[tsParticles Particles.js Compatibility]

    subgraph all-effects [Effects]
      effect-bubble[Bubble]
      effect-trail[Trail]
    end

    subgraph all-interactions [Interactions]
      subgraph all-interactions-external [External]
        interaction-external-particle[Particle]
        interaction-external-pop[Pop]
      end

      interaction-light[Light]

      subgraph all-interactions-particles [Particles]
        interaction-particles-repulse[Repulse]
      end
    end

    subgraph all-paths [Paths]
      path-curl-noise[Curl Noise]
      path-curves[Curves]
      path-perlin-noise[Perlin Noise]
      path-polygon[Polygon]
      path-simplex-noise[Simplex Noise]
      path-svg[SVG]
    end

    subgraph all-plugins [Plugins]
      plugin-canvas-mask[Canvas Mask]

      subgraph all-plugins-easings [Easings]
        plugin-easing-back[Back]
        plugin-easing-circ[Circ]
        plugin-easing-cubic[Cubic]
        plugin-easing-expo[Expo]
        plugin-easing-linear[Linear]
        plugin-easing-quart[Quart]
        plugin-easing-quint[Quint]
        plugin-easing-sine[Sine]
      end

      subgraph all-plugin-emitters-shapes [Emitters Shapes]
        plugin-emitters-shape-canvas[Canvas]
        plugin-emitters-shape-path[Path]
        plugin-emitters-shape-polygon[Polygon]
      end

      subgraph all-plugins-exports [Exports]
        plugin-export-image[Image]
        plugin-export-json[JSON]
        plugin-export-video[Video]
      end

      plugin-hsv-color[HSV Color]
      plugin-infection[Infection]
      plugin-motion[Motion]
      plugin-poisson-disc[Poisson Disc]
      plugin-polygon-mask[Polygon Mask]
      plugin-sounds[Sounds]
    end

    subgraph all-shapes [Shapes]
      shape-arrow[Arrow]
      shape-cards[Cards]
      shape-cog[Cog]
      shape-heart[Heart]
      shape-path[Path]
      shape-rounded-polygon[Rounded Polygon]
      shape-rounded-rect[Rounded Rect]
      shape-spiral[Spiral]
    end

    subgraph all-updaters [Updaters]
      updater-gradient[Gradient]
      updater-orbit[Orbit]
    end

    simplex-noise --> path-curl-noise
    perlin-noise --> path-perlin-noise
    simplex-noise --> path-simplex-noise

  end

  bundle-full --> bundle-all

Sponsors

JetBrains

Huge thanks to JetBrains for the 2020-2022 Open Source Licenses!

JetBrains WebStorm is used to maintain this project.

[BUG?] TypeError: interactor.init is not a function

Hello
I tried the steps in the readme
I can't get this to work with my Astro code, am I doing this correclty? Browser throws this:

InteractionManager.js:31 Uncaught (in promise) TypeError: interactor.init is not a function
at InteractionManager.init (InteractionManager.js:31:24)
at Particles.init (Particles.js:155:34)
at Container.init (Container.js:301:24)
at async Container.start (Container.js:404:9)
at async Engine._loadParams (Engine.js:278:9)
at async Particles.astro:40:33

---
import BaseLayout from "../layouts/BaseLayout.astro";
import HorizontalCard from "../components/HorizontalCard.astro";
import { projects } from "../data/projects";

import Particles from "astro-particles";
import type { ISourceOptions } from "tsparticles-engine";

const options: ISourceOptions = {
  background: {
    color: "#000",
  },
  fullScreen: {
    zIndex: -1,
  },
  particles: {
    number: {
      value: 100,
    },
    move: {
      enable: true,
    },
  },
};
---

<BaseLayout sideBarActiveItemID="home">
  <div class="pb-12 mt-5">
    <div class="text-xl py-1">Hey there 👋</div>
    <div class="text-5xl font-bold">
      <dynamic-name>
        <span>Ali Umar</span>
      </dynamic-name>
    </div>
    <div class="text-3xl py-3 font-bold">
      Software Engineer and Technology Enthusiast
    </div>
    <div class="py-2">
      <text class="text-lg"> </text>
    </div>
    <div class="mt-8">
      <a
        class="btn btn-outline"
        href="https://twitter.com/alilikestech"
        target="_blank"
      >
        Let's connect!</a
      >
      <a
        href="https://github.com/ArmyaAli"
        target="_blank"
        class="btn btn-outline ml-5"
      >
        View my GitHub
      </a>
    </div>
  </div>

  <div>
    <div class="text-3xl w-full font-bold mb-2">
      Some cool projects... {"</>"}
    </div>
  </div>

  <div>
    {
      projects.map((entry, i) => {
        return (
          <HorizontalCard
            title={entry.title}
            img={entry.icon}
            desc={entry.description}
            url={entry.link}
            badge={entry.type}
          />
        );
      })
    }
  </div>
</BaseLayout>
<script>
  // This piece of code animates "Ali Umar" by adding chars to DynamicName.text
  // When one complete cycle is reached, we only cycle Ali Uma + r repeatedly
  class DynamicName extends HTMLElement {
    text = "A";
    count = 1;
    constructor() {
      super();
      const span = this.querySelector("span");
      setInterval(() => {
        const name = "Ali Umar";
        if (span) span.textContent = this.text;
        if (this.text != name) this.text += name[this.count++];
        else {
          this.count = name.length - 1;
          this.text = "Ali Uma";
        }
      }, 500);
    }
  }
  customElements.define("dynamic-name", DynamicName);
</script>
<script>
  import { type Container, type Engine, tsParticles } from "tsparticles-engine";
  import { loadFull } from "tsparticles";

  // the function name is the parameter passed to the init attribute
  // required
  // add the function to window is mandatory, it will be searched there
  declare global {
    interface Window {
      particlesInit: (engine: Engine) => Promise<void>;
      particlesLoaded: (container: Container) => void;
    }
  }

  window.particlesInit = async function (engine: any) {
    await loadFull(engine);
  };

  // the function name is the parameter passed to the loaded attribute
  // optional
  // add the function to window is mandatory, it will be searched there
  window.particlesLoaded = function (container: Container) {
    console.log("particlesLoaded callback");
  };
</script>
<Particles id="tsparticles" options={options} init="particlesInit" />

package.json

{
  "name": "portfolio",
  "description": "Ali's Portfolio",
  "type": "module",
  "version": "3.0.0",
  "private": true,
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
    "build": "astro build",
    "preview": "astro preview",
    "astro": "astro"
  },
  "dependencies": {
    "@astrojs/mdx": "^2.0.3",
    "@astrojs/rss": "^3.0.0",
    "@astrojs/sitemap": "^3.0.1",
    "@astrojs/tailwind": "^5.0.3",
    "@tailwindcss/typography": "^0.5.10",
    "@tsparticles/engine": "^3.3.0",
    "astro": "^4.0.2",
    "astro-particles": "^2.10.0",
    "daisyui": "^4.4.10",
    "dayjs": "^1.11.9",
    "sharp": "^0.32.6",
    "tailwindcss": "^3.3.5",
    "tsparticles": "^3.3.0",
    "typescript": "^5.4.2"
  },
  "devDependencies": {
    "prettier": "^3.2.5",
    "prettier-plugin-astro": "^0.13.0"
  }
}

Seems like it's catching here:

Thank you!
Ali

tsparticles / astro Goto Github PK

astro's Introduction

tsParticles - TypeScript Particles

Table of Contents

Do you want to use it on your website?

Library installation

Hosting / CDN

jsDelivr

cdnjs

unpkg

npm

yarn

pnpm

Import and require

Usage

Official components for some of the most used frameworks

Angular

@tsparticles/angular

Astro

astro-particles

Ember.js

ember-tsparticles

Inferno

inferno-particles

jQuery

jquery-particles

Preact

preact-particles

ReactJS

@tsparticles/react

RiotJS

riot-particles

SolidJS

solid-particles

Svelte

@tsparticles/svelte

VueJS 2.x

@tsparticles/vue2

VueJS 3.x

@tsparticles/vue3

Web Components

web-particles

WordPress

@tsparticles/wordpress

Elementor

Presets

Big Circles

Bubbles

Confetti

Fire

Firefly

Fireworks

Fountain

Links

Sea Anemone

Snow

Stars

Triangles

Templates and Resources

Demo / Generator

Video Tutorials

Characters as particles

Polygon mask

Animated stars

Nyan cat flying on scrolling stars

Snow particles

Background Mask particles

Options

Want to see it in action and try it?

Migrating from Particles.js

Plugins/Customizations

Dependency Graph

Sponsors

JetBrains

astro's People

Contributors

Stargazers

Watchers

Forkers

astro's Issues

`@tsparticles/angular`

`astro-particles`

`ember-tsparticles`

`inferno-particles`

`jquery-particles`

`preact-particles`

`@tsparticles/react`

`riot-particles`

`solid-particles`

`@tsparticles/svelte`

`@tsparticles/vue2`

`@tsparticles/vue3`

`web-particles`

`@tsparticles/wordpress`