tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno.

Overview

banner

tsParticles - TypeScript Particles

A lightweight TypeScript library for creating particles. Dependency free (*) and browser ready!

Particles.js converted in TypeScript, dependency free (*), improved with new cool 😎 features and various bugs fixed and it's actively maintained!

jsDelivr Cdnjs npmjs npm lerna CodeFactor Codacy Badge Gitpod Ready-to-Code Run on Repl.it

Do you want to use it on your website?

This library is available on the two 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.min.js) and all files splitted for import syntax.

If you are still interested some lines below there are some instructions for migrating from the old particles.js library.

Library installation

Hosting / CDN

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

jsDelivr

jsDelivr

cdnjs

Cdnjs

unpkg

https://unpkg.com/tsparticles/


npm

npmjs npmjs

npm install tsparticles

yarn

yarn add tsparticles

Import and require

Starting from version 1.12.11 import and require can be used to import tsParticles .

Now you can write something like this

const tsParticles = require("tsparticles");

// or

import { tsParticles } from "tsparticles";

The imported tsParticles is the same instance you have when including the script.


NuGet

Nuget


Usage

Load tsParticles and configure the particles:

tsParticles demo

index.html

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

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

app.js

// @path-json can be an object or an array, the first will be loaded directly, the object from the array will be random selected
/* tsParticles.loadJSON(@dom-id, @path-json, @callback (optional)); */

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

//or

/* tsParticles.load(@dom-id, @options); */

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

//or

/* tsParticles.loadFromArray(@dom-id, @options, @index (optional)); */

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

tsParticles.loadFromArray(
  "tsparticles",
  [
    {
      /* options here */
    },
    {
      /* other options here */
    },
  ],
  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

ng-particles

npm npm

You can find the instructions here

Inferno

inferno-particles

npm npm

You can find the instructions here

jQuery

jquery-particles

npm npm

You can find the instructions here

Preact

preact-particles

npm npm

You can find the instructions here

ReactJS

react-tsparticles

npm npm

You can find the instructions here

Svelte

svelte-particles

npm npm downloads

You can find the instructions here

VueJS 2.x

particles.vue

npm npm

You can find the instructions here

VueJS 3.x

particles.vue3

npm npm

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 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

Particles demo


Characters as particles

Particles chars demo


Mouse hover connections

Particles mouse connections demo


Polygon mask

tsParticles Polygon Mask demo


Animated stars

Particles NASA demo


Nyan cat flying on scrolling stars

Particles Nyan Cat demo


Snow particles

tsParticles Snow demo


Background Mask particles

tsParticles Background Mask demo


COVID-19 SARS-CoV-2 particles

tsParticles COVID-19 demo

Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!

COVID-19 is a serious disease. Please stay at home, wear a mask and stay safe!


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 checkout my profile

Otherwise there's the demo page link below. Just click/tap the Coronavirus below, don't be scared. It's safe 😷 .

tsParticles demo

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

yarn install && yarn start

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

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

Dependencies

You may have notices the * near dependency free. Well almost all features works without any dependency, but... Well there's a little but. The Polygon Mask feature requires pathseg for some browsers to work fine, and obviously the Icon Fonts (like FontAwesome ) must be included in your page.


Migrating from Particles.js

tsParticles library is fully compatible with the particles.js configuration.

Seriously, you just need to change the script source 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...


API Docs

Documentation and Development references here 📖


Slack Discord tsParticles Product Hunt


JetBrains JetBrains

Huge thanks to JetBrains for the 2020 Open Source License!

JetBrains WebStorm is used to maintain this project.

Huge thanks to SauceLabs for the Open Source License!

Testing Powered By SauceLabs

Comments
  • Localized READMEs and documentation

    Localized READMEs and documentation

    This project documentation can be improved localizing it in multiple languages so it can be clearer to new users or for those who can't read/speak English how to use the library and all its features.

    READMEs could be localized too for the same reason.

    I can only contribute to English and Italian, any other language is welcome.

    documentation help wanted good first issue up-for-grabs no-issue-activity Hacktoberfest 
    opened by matteobruni 32
  • [Bug]: Interruption in particle motion (defect in movement) after build in react

    [Bug]: Interruption in particle motion (defect in movement) after build in react

    Contact Details

    [email protected]

    What happened?

    everything works fine when I use npm run start, but after build (npm run build) there is Interruption in particle motion.

    my react version is 17.0.2 and use typescript.

    Version

    1.38.0

    Which library are you using?

    React.js (react-tsparticles, react-particles-js)

    tsParticles Configuration

    const options: ISourceOptions = 
      {
        retina_detect: false,
        detectRetina: false,
        "background": {
          "color": {
            "value": "#00000095"
          },
          "position": "50% 50%",
          "repeat": "no-repeat",
          "size": "cover",
          "opacity": 1,
          "image": "url('/img/bg1.jpg')"
        },
    
        "backgroundMask": {
          "composite": "destination-out",
          "cover": {
            "color": {
              "value": {
                "r": 255,
                "g": 255,
                "b": 255
              }
            },
            "opacity": 1
          },
          "enable": true
        },
    
        "fullScreen": {
          "enable": false,
          "zIndex": -10
        },
        "interactivity": {
          "events": {
            "onClick": {
              "enable": true,
              "mode": "push"
            },
            "onDiv": {
              "selectors": "#repulse-div",
              "mode": "repulse"
            },
            "onHover": {
              "enable": true,
              "mode": "bubble",
              "parallax": {
                "force": 60
              }
            }
          },
          "modes": {
            "bubble": {
              "distance": 400,
              "duration": 2,
              "opacity": 0.8,
              "size": 40
            },
            "grab": {
              "distance": 400
            },
            "slow": {
              "factor": 1,
              "radius": 0
            }
          }
        },
        "particles": {
          "color": {
            "value": "#ffffff"
          },
          "links": {
            "color": {
              "value": "#ffffff"
            },
            "distance": 150,
            "enable": true,
            "opacity": 0.4,
            "shadow": {
              "color": {
                "value": "lime"
              }
            }
          },
          "move": {
            "attract": {
              "rotate": {
                "x": 600,
                "y": 1200
              }
            },
            "enable": true,
            "outModes": {
              "bottom": "out",
              "left": "out",
              "right": "out",
              "top": "out",
              "default": "none"
            },
            "direction": "right",
            "speed": 2
          },
          "number": {
            "density": {
              "enable": true,
            },
            "value": 60
          },
          "opacity": {
            "value": {
              "min": 0.1,
              "max": 0.5
            },
            "animation": {
              "enable": true,
              "speed": 1,
              "minimumValue": 0.1
            }
          },
          "shape": {
            "options": {
              "polygon": {
                "sides": 5
              },
              "star": {
                "sides": 5
              },
            },
            "type": "square"
          },
    
          "size": {
            "random": {
              "enable": true,
              "minimumValue": 0,
            },
            "value": {
              "min": 5,
              "max": 20
            },
            "animation": {
              "speed": 10,
              "minimumValue": 0.1
            }
          },
        }
      };
    
    
    <Particles
              id="tsparticles"
              init={particlesInit}
              loaded={particlesLoaded}
              options={options} />
    

    What browsers are you seeing the problem on?

    In most browsers

    Relevant log output

    No response

    Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    bug triage 
    opened by hamed-lohi 26
  • Update Readme files

    Update Readme files

    All the README needs updates, this is a good point to start contributing this project.

    Some good contributions:

    • Fixing broken links
    • Adding more samples
    • Translate or fix translations
    • Improve code samples with other useful samples
    help wanted good first issue up-for-grabs Hacktoberfest triage 
    opened by matteobruni 25
  • How to make tsParticles full width and height of a container and not the whole page?

    How to make tsParticles full width and height of a container and not the whole page?

    I have been struggling trying to get particles.js to be the background of a given element. That library seems to position the canvas weirdly and it always makes the canvas wider and longer than the element, and hacking around with top and left doesn't really work well either. As far as I can tell it assumes you only ever want the whole page background to be it's canvas. so I decided to look into tsParticles.

    Does tsParticles properly support working with an arbitrary element and it's width and height, e.g. it would use these values to create the canvas correctly? If the div is 100px wide and 100px in height, the canvas would be 100px wide and 100px in height.

    For example, I have a div in the center. I'd like tsParticles to render only inside the div and underneath the text:

    image

    Would it be possible to get an example of this?

    question 
    opened by lloydjatkinson 18
  • Border-radius option in the JS particles library?

    Border-radius option in the JS particles library?

    Hi,

    First of all thanks for the JS particles library. It is a very cool library (using 1.18.11). I'm curious of it is possible to create a rectangle with a smooth border. Just like in CSS: border-radius: 10px (for example). I cannot find something like this on CodePen or on Google for this plugin.

    Thanks.

    documentation enhancement help wanted good first issue up-for-grabs plugin no-issue-activity Core 
    opened by Henama 17
  • [Bug]: `exports is not defined` with out-of-the-box Svelte project

    [Bug]: `exports is not defined` with out-of-the-box Svelte project

    Contact Details

    [email protected]

    What happened?

    Following the readme for svelte-particles, loading the site results in an exports is not defined error, even with a fresh project skeleton. Rollup is also complaining about circular dependencies, so it might be the source of the problem. Using https://github.com/sveltejs/template/commit/8d350b693fb4bd8ecf340841eac22a1cb85d7986.

    Version

    1.40.1

    Which library are you using?

    Svelte (svelte-particles)

    tsParticles Configuration

    none needed, it throws immediately on loading the module
    

    What browsers are you seeing the problem on?

    Microsoft Edge

    Relevant log output

    (!) Circular dependencies
    node_modules\tsparticles\Core\index.js -> node_modules\tsparticles\Core\Canvas.js -> node_modules\tsparticles\Utils\index.js -> node_modules\tsparticles\Utils\CanvasUtils.js -> node_modules\tsparticles\Utils\ColorUtils.js -> node_modules\tsparticles\Utils\NumberUtils.js -> node_modules\tsparticles\Core\index.js
    node_modules\tsparticles\Core\index.js -> node_modules\tsparticles\Core\Canvas.js -> node_modules\tsparticles\Utils\index.js -> node_modules\tsparticles\Utils\CanvasUtils.js -> node_modules\tsparticles\Utils\ColorUtils.js -> node_modules\tsparticles\Utils\NumberUtils.js -> G:\Code\tsParticles test\node_modules\tsparticles\Core\index.js?commonjs-proxy -> node_modules\tsparticles\Core\index.js
    node_modules\tsparticles\Core\index.js -> node_modules\tsparticles\Core\Canvas.js -> node_modules\tsparticles\Utils\index.js -> node_modules\tsparticles\Utils\CanvasUtils.js -> node_modules\tsparticles\Utils\ColorUtils.js -> node_modules\tsparticles\Core\index.js
    node_modules\tsparticles\Core\index.js -> node_modules\tsparticles\Core\Canvas.js -> node_modules\tsparticles\Utils\index.js -> node_modules\tsparticles\Utils\CanvasUtils.js -> node_modules\tsparticles\Utils\ColorUtils.js -> node_modules\tsparticles\Utils\Utils.js -> node_modules\tsparticles\Core\index.js
    

    Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    bug triage 
    opened by longnguyen2004 16
  • Minimum Size without animation

    Minimum Size without animation

    Is your feature request related to a problem? Please describe. Not a problem, just a request

    Describe the solution you'd like I would like to set a range for the sizes. Maybe particles.size.value accepts a Number / Object

    Number would be for what it is now, a maximum size. Object could be:

    {
      'min': 10,
      'max': 35
    }
    

    Describe alternatives you've considered No alternatives...

    Additional context This is a thread from the repo this project was branched from that had no response. https://github.com/VincentGarreau/particles.js/issues/320

    opened by robhuska 16
  • Particles to have a soft collision option (with a radius)

    Particles to have a soft collision option (with a radius)

    Which version are you using? 1.18.11

    Is the latest version affected?

    • [x] Yes
    • [ ] No

    Which library are you using?

    • [ ] Vanilla JS (tsparticles)
    • [x] React (react-tsparticles)
    • [ ] Vue.js 2.x (particles.vue)
    • [ ] Vue.js 3.x (particles.vue3)
    • [ ] Angular (ng-particles)
    • [ ] Svelte (svelte-particles)
    • [ ] Preact (preact-particles)
    • [ ] Inferno (inferno-particles)
    • [ ] jQuery (jquery-particles)

    Is your feature request related to a problem? Please describe. This is what I'm going for: IMG_1255

    And this is how it's currently looking (it's random, but you get the idea): IMG_1257

    Describe the solution you'd like I want the particles to be a bit more spread out. Avoid clumping, or all being on one side etc..

    duplicate 
    opened by mattjis 14
  • feat: add repulse to particles

    feat: add repulse to particles

    Adds very simple repulse radius to particles #609

    Something to consider: should there be an option to slow the particles down while inside each others' repulse radius and collide when they only touch each other? I.e. apply a force that pushes the particles apart from each other.

    size/L hacktoberfest-accepted 
    opened by Pingviinituutti 14
  • TS issue when importing a local options JSON file or JS Object

    TS issue when importing a local options JSON file or JS Object

    Contact Details

    No response

    What do you need?

    Hi there, I'm trying to load my option from a local JSON file, something like: import options from "../../tsparticles/config.json"; <Particles options={options} />

    It is working but I'm getting a ts error in the options property of . I tried exporting a js object and the same error occurs:

    (JSX attribute) options?: RecursivePartial<IOptions> | undefined
    
    Type '{ autoPlay: boolean; background: { color: { value: string; }; image: string; position: string; repeat: string; size: string; opacity: number; }; backgroundMask: { composite: string; cover: { color: { value: string; }; opacity: number; }; enable: boolean; }; ... 12 more ...; zLayers: number; }' is not assignable to type 'RecursivePartial<IOptions>'.
      The types of 'interactivity.detectsOn' are incompatible between these types.
        Type 'string' is not assignable to type '"window" | InteractivityDetect | "canvas" | "parent" | undefined'.ts(2322)
    index.d.ts(17, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<IParticlesProps, IParticlesState, any>> & Readonly<...> & Readonly<...>'
    

    Version

    nextjs 12

    Which library are you using?

    React.js (react-tsparticles, react-particles-js)

    Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    triage 
    opened by tenosh 13
  • Why is this limited to just backgrounds?

    Why is this limited to just backgrounds?

    Contact Details

    No response

    What do you need?

    Is there some technical reason why the scope if this project is bounded to just backgrounds? I was hoping it would be possible to, for example, animate a particle emitter around the edge of a button to create sparks, for example.

    Version

    1.34.1

    Which library are you using?

    Vanilla (tsparticles)

    Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    enhancement help wanted good first issue up-for-grabs plugin pinned Hacktoberfest Core triage 
    opened by Bilge 13
  • Version 3.0 Plan

    Version 3.0 Plan

    These are the changes expected in version 3.0.0:

    documentation enhancement help wanted good first issue dependencies up-for-grabs plugin feature_request pinned Angular Inferno Preact React Svelte Vue 2 Vue 3 Core Solid Wordpress 
    opened by matteobruni 0
  • Multitouch support

    Multitouch support

    Contact Details

    [email protected]

    What is your request?

    Currently only a single touch event works at one time for events, it would be nice if all available touch events would be handled.

    tsParticles Version

    2.5.1

    Which library are you using?

    React.js (react-particles, react-tsparticles, react-particles-js)

    Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    enhancement help wanted good first issue up-for-grabs feature_request pinned Core 
    opened by magikarp28 0
  • Improve Readme files and documentation

    Improve Readme files and documentation

    Contact Details

    [email protected]

    What do you need?

    Greetings,

    During Hacktoberfest, I would love to work on making changes in the ReadMe/documentation files present in the repository. These changes can help make the repository look better! I would like if you can assign this issue to me!

    tsParticles Version

    v2

    Which library are you using?

    Vanilla (tsparticles)

    Code of Conduct

    • [X] I agree to follow this project's Code of Conduct
    documentation enhancement help wanted good first issue up-for-grabs Hacktoberfest 
    opened by krupalitrivedi 5
  • New Website Design

    New Website Design

    The website needs some improvements, there's already a PR (#1262) that I started working on. Any help is welcome. I don't have guidelines about that, be creative and we'll review ideas together.

    You can find a forum post on the Discord here: https://discord.com/channels/872061157379301416/1022815383209660447

    This is an open-source library with almost no revenues, all the work here is done for free. There's no way to pay anyone for their contribution for the moment.

    documentation enhancement help wanted good first issue up-for-grabs pinned Hacktoberfest 
    opened by matteobruni 5
svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.

svgMap svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country. Live demo: h

Stephan Wagner 155 Dec 25, 2022
Minimalistic, animated SVG gauge. Zero dependencies

SVG Gauge Minmalistic, configurable, animated SVG gauge. Zero dependencies Buy me a coffee ☕ If you like my work please consider making a small donati

Aniket Naik 264 Dec 17, 2022
Data visualization library for depicting quantities as animated liquid blobs

liquidity.js A data visualization library for depicting quantities as animated liquid blobs. For a demonstration of what the final product can look li

N Halloran 91 Sep 20, 2022
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
📊 A highly interactive data-driven visualization grammar for statistical charts.

English | 简体中文 G2 A highly interactive data-driven visualization grammar for statistical charts. Website • Tutorial Docs • Blog • G2Plot G2 is a visua

AntV team 11.5k Dec 30, 2022
React components for Chart.js, the most popular charting library

react-chartjs-2 React components for Chart.js, the most popular charting library. Supports Chart.js v3 and v2. Quickstart • Docs • Slack • Stack Overf

null 5.6k Jan 4, 2023
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 238 Dec 31, 2022
IBM Gantt Chart Component, integrable in Vanilla, jQuery, or React Framework.

@ibm/gantt-chart IBM Gantt Chart Component, integrable in Vanilla, jQuery, or React Framework. Getting started Documentation and Examples are availabl

International Business Machines 169 Dec 20, 2022
JAVASCRIPT library with which you can easily draw CANVAS HTML

easycanvas Quick start Documentation: gaidadei.ru/easycanvas Download: gaidadei.ru/easycanvas/easyc.zip Buy premium: gaidadei.ru/easycanvas/premium (A

null 18 Nov 12, 2022
Easily compose images together without messing around with canvas

merge-images Easily compose images together without messing around with canvas Canvas can be kind of a pain to work with sometimes, especially if you

Luke Childs 1.5k Dec 30, 2022
📊 Vue.js wrapper for Chart.js

vue-chartjs vue-chartjs is a wrapper for Chart.js in vue. You can easily create reuseable chart components. Demo & Docs ?? Demo ?? Docs Compatibility

Jakub 5k Jan 7, 2023
Create beautiful JavaScript charts with one line of React

React Chartkick Create beautiful JavaScript charts with one line of React See it in action Supports Chart.js, Google Charts, and Highcharts Quick Star

Andrew Kane 1.2k Dec 28, 2022
dhtmlxGantt with Angular 7

DHTMLX Gantt and Angular Demo Demo of Gantt chart component for Angular framework How to start clone the repository or download files install dependen

null 33 Nov 18, 2022
:bar_chart: Declarative Charting Framework for Angular

ngx-charts Declarative Charting Framework for Angular! ngx-charts is unique because we don't merely wrap d3, nor any other chart engine for that matte

Swimlane 4.2k Dec 27, 2022
Beautiful charts for Angular based on Chart.js

ng2-charts slack Beautiful charts for Angular based on Chart.js Usage & Demo Samples using ng2-charts https://valor-software.com/ng2-charts/ Installat

Valor Software 2.2k Jan 4, 2023
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Jan 9, 2023
Compose complex, data-driven visualizations from reusable charts and components with d3

d3.compose Compose rich, data-bound charts from charts (like Lines and Bars) and components (like Axis, Title, and Legend) with d3 and d3.chart. Advan

Cornerstone Systems 702 Jan 3, 2023
Data Visualization Components

react-vis | Demos | Docs A COMPOSABLE VISUALIZATION SYSTEM Overview A collection of react components to render common data visualization charts, such

Uber Open Source 8.4k Jan 2, 2023