astro-particles

Official tsParticles Astro component

Installation

npm install astro-particles

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 { tsParticles } from "@tsparticles/engine";
    import { loadFull } from "tsparticles";

    (async () => {
        await loadFull(tsParticles);
    })();
</script>

<Particles id="tsparticles" options={options} />

Props

Prop	Type	Definition
id	string	The id of the element.
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