I want to implement TsParticles in my webisite but it doesn't work.It only show me a black background
This is my package.json :
{
"name": "portfolio",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.5.10",
"@astrojs/svelte": "^5.2.0",
"@astrojs/tailwind": "^5.1.0",
"astro": "^4.5.10",
"astro-particles": "^2.10.0",
"svelte": "^4.2.12",
"tailwindcss": "^3.4.3",
"tsparticles": "^3.3.0",
"tsparticles-engine": "^2.12.0",
"typescript": "^5.4.3"
}
}
I follow de README doc but it only show me a black background :
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.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
},
color: {
value: '#FFFFFF',
},
move: {
enable: true
}
}
};
---
<BaseLayout title="titre" description="description">
<body id="body">
<Particles id="tsparticles" options={options} init="particlesInit" />
<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 (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>
<Header dateColor="#000000" />
<div>
<div>
<h1 class="mx-3 text-5xl font-inter text-black">
NAME <br> SURNAME
</h1>
</div>
</div>
</body>
</BaseLayout>
This is my package.json :
{
"name": "portfolio",
"type": "module",
"version": "0.0.1",
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro check && astro build",
"preview": "astro preview",
"astro": "astro"
},
"dependencies": {
"@astrojs/check": "^0.5.10",
"@astrojs/svelte": "^5.2.0",
"@astrojs/tailwind": "^5.1.0",
"astro": "^4.5.10",
"astro-particles": "^2.10.0",
"svelte": "^4.2.12",
"tailwindcss": "^3.4.3",
"tsparticles": "^3.3.0",
"tsparticles-engine": "^2.12.0",
"typescript": "^5.4.3"
}
}
I follow de README doc but it only show me a black background :
---
import BaseLayout from '../layouts/BaseLayout.astro';
import Header from '../components/Header.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
},
color: {
value: '#FFFFFF',
},
move: {
enable: true
}
}
};
---
<BaseLayout title="titre" description="description">
<body id="body">
<Particles id="tsparticles" options={options} init="particlesInit" />
<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 (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>
<Header dateColor="#000000" />
<div>
<div>
<h1 class="mx-3 text-5xl font-inter text-black">
NAME <br> SURNAME
</h1>
</div>
</div>
</body>
</BaseLayout>
Do you have an idea for resolve this issue.
I know there is a new package for TsParticles but it's not compatible with the AstroJS adapter. I already tried but it doesn't work to.