Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tsparticles/astro
tsParticles Astro official component
https://github.com/tsparticles/astro
astro hacktoberfest javascript tsparticles typescript
Last synced: 7 days ago
JSON representation
tsParticles Astro official component
- Host: GitHub
- URL: https://github.com/tsparticles/astro
- Owner: tsparticles
- License: mit
- Created: 2023-01-25T08:26:39.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-12-09T08:38:04.000Z (about 2 months ago)
- Last Synced: 2025-01-14T17:49:30.135Z (14 days ago)
- Topics: astro, hacktoberfest, javascript, tsparticles, typescript
- Language: Astro
- Homepage:
- Size: 209 KB
- Stars: 43
- Watchers: 4
- Forks: 5
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://particles.js.org)
# astro-particles
[](https://www.npmjs.com/package/astro-particles) [](https://www.npmjs.com/package/astro-particles) [](https://github.com/sponsors/matteobruni)
Official [tsParticles](https://github.com/matteobruni/tsparticles) Astro component
[](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 
## Installation
```shell
npm install astro-particles
```
or
```shell
yarn add astro-particles
```
## How to use
```astro
---
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
}
}
};
---
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");
}
```
### 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](https://particles.js.org/docs/interfaces/tsParticles_Engine.Options_Interfaces_IOptions.IOptions.html).
You can find sample json
configurations [here](https://github.com/matteobruni/tsparticles/tree/main/websites/particles.js.org/presets) 📖
## Demos
Preset demos can be found [here](https://particles.js.org/samples/presets/index.html)
There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)
Report bugs and issues [here](https://github.com/matteobruni/tsparticles/issues)
[tsParticle Website](https://particles.js.org)