JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Tsparticles

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

    • 🔾64%Overall
    • 2,832
    • 7 hours
    • 🕩325
    • 👥3

    banner

    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

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

    Slack Discord Telegram

    tsParticles Product Hunt


    Table of Contents


    Do you want to use it on your website?

    Documentation and Development references here 📖

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

    RiotJS

    riot-particles

    npm npm

    You can find the instructions here

    SolidJS

    solid-particles

    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

    Web Components

    web-particles

    npm npm

    You can find the instructions here

    WordPress

    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
    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 have also a bundle file that contains everything needed to run.

    Big Circles

    jsDelivr npmjs npmjs

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

    demo

    You can find the instructions here

    Bubbles

    jsDelivr npmjs npmjs

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

    demo

    You can find the instructions here

    Confetti

    jsDelivr npmjs npmjs

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

    demo

    You can find the instructions here

    Fire

    jsDelivr npmjs npmjs

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

    demo

    You can find the instructions here

    Firefly

    jsDelivr npmjs npmjs

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

    demo

    You can find the instructions here

    Fireworks

    jsDelivr npmjs npmjs

    This preset loads a beautiful fireworks effect.

    demo

    You can find the instructions here

    Fountain

    jsDelivr npmjs npmjs

    demo

    You can find the instructions here

    jsDelivr npmjs npmjs

    demo

    You can find the instructions here

    Sea Anemone

    jsDelivr npmjs npmjs

    demo

    You can find the instructions here

    Snow

    jsDelivr npmjs npmjs

    demo

    You can find the instructions here

    Stars

    jsDelivr npmjs npmjs

    demo

    You can find the instructions here

    Triangles

    jsDelivr npmjs npmjs

    demo

    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.


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




    JetBrains


    JetBrains

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

    JetBrains WebStorm is used to maintain this project.

    Show All