Skip to content

tsparticles/astro

Repository files navigation

banner

astro-particles

npm npm GitHub Sponsors

Official tsParticles Astro component

Discord Telegram

tsParticles Product Hunt

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