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
    window.particlesInit = async function (engine: Engine) {
        await loadFull(engine);
    }
    
    // the function name is the parameter passed to the loaded attribute
    // optional
    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