Official tsParticles Astro component
npm install astro-particles
or
yarn add astro-particles
--- 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" />
| 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 |
Find all configuration options here.
You can find sample json configurations here 📖
Preset demos can be found here
There's also a CodePen collection actively maintained and updated here
Report bugs and issues here