Awesome

riot-particles

Official tsParticles RiotJS component

<a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>

Installation

npm install riot-particles

or

yarn add riot-particles

Usage

<riot-particles
    id="tsparticles"
    options='{{
        background: {
            color: "#000"
        },
        fullScreen: {
            enable: true
        },
        particles: {
            links: {
                enable: true
            },
            move: {
                enable: true
            }
        }
    }}'
    particlesInit="{async (main) => {
        console.log(main);
        
        // this loads the tsparticles package bundle, it is the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        await loadFull(main); 
    }}"
    particlesLoaded="{(container) => console.log(container)}"
/>

<script>
    import RiotParticles from "riot-particles";
    import { loadFull } from "tsparticles";

    export default {
        components: {
            RiotParticles,
        },
    };
</script>

<!-- or -->

<riot-particles
    id="tsparticles"
    url="https://foo.bar/particles.json"
    particlesInit="{async (main) => {
        console.log(main);
        
        // this loads the tsparticles package bundle, it is the easiest method for getting everything ready
        // starting from v2 you can add only the features you need reducing the bundle size
        await loadFull(main); 
    }}"
    particlesLoaded="{(container) => console.log(container)}"
/>
/>

Demos

The demo website is here

https://particles.js.org

There's also a CodePen collection actively maintained and updated here

https://codepen.io/collection/DPOage