astro-particles

Official tsParticles Astro component

Installation

npm install astro-particles

or

yarn add astro-particles

How to use

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

<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
    window.particlesInit = async function (engine: Engine) {
        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" />

Props

Prop	Type	Definition
id	string	The id of the element.
init	string	The name of the function to call when the particles instance is ready.
loaded	string	The name of the function to call when the particles are loaded.
options	object	The options of the particles instance.
url	string	The remote options url, called using an AJAX request

particles.json

Find all configuration options here.

You can find sample json configurations here 📖

Demos

Preset demos can be found here

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

Report bugs and issues here

tsParticle Website