Awesome
astro-particles
Official tsParticles Astro component
<a href="https://www.buymeacoffee.com/matteobruni"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a beer&emoji=🍺&slug=matteobruni&button_colour=5F7FFF&font_colour=ffffff&font_family=Arial&outline_colour=000000&coffee_colour=FFDD00"></a>
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