astro-particles

2.10.0 • Public • Published

banner

astro-particles

npm npm GitHub Sponsors

Official tsParticles Astro component

Slack 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
    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

Package Sidebar

Install

npm i astro-particles

Weekly Downloads

136

Version

2.10.0

License

MIT

Unpacked Size

9.74 kB

Total Files

9

Last publish

Collaborators

  • matteobruni