Skip to content

tsparticles/riot

Folders and files

NameName
Last commit message
Last commit date
Jan 21, 2024
Dec 29, 2022
Jan 22, 2024
Sep 10, 2024
Dec 29, 2022
Dec 29, 2022
Sep 10, 2024
Jan 22, 2024
Jan 22, 2024
Jan 22, 2024
Feb 22, 2023
Jan 5, 2023

Repository files navigation

banner

riot-particles

npm npm downloads GitHub Sponsors

Official tsParticles RiotJS component

Discord Telegram

tsParticles Product Hunt

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