Почему мой холст из Tsparticles ничего не показывает? ⇐ Javascript

[Anonymous]

Я вижу тег и элемент Canvas внутри DOM, но я ничего не вижу. Я искал онлайн везде, но, кажется, это не исправляет. У меня есть эффект свечения мыши, поэтому я попытался выключить это, так как холст, который мог бы мешать, но он все еще не работает.import styles from './Hero.module.css';
import { useEffect, useRef } from 'react';
import Typed from 'typed.js';
import Particles from '@tsparticles/react';
import { loadSlim } from '@tsparticles/slim';

export default function Hero() {
const typedRef = useRef(null);
const typedInstance = useRef(null);

const particlesInit = async(main) => {
await loadSlim(main);
};

const particlesLoaded = (container) => {
console.log(container);

}

useEffect(() => {
typedInstance.current = new Typed(typedRef.current, {
strings: ['software engineer.', ' student.'],
typeSpeed: 90,
backSpeed: 30,
backDelay: 1000,
loop: true,
cursorChar: '|'
});

return () => {
typedInstance.current.destroy();
};
}, []);
return (

id="tsparticles"
init={particlesInit}
loaded={particlesLoaded}
options={{
background: {
color: {
value: "transparent",
},
},
fpsLimit: 120,
interactivity: {
events: {
onClick: {
enable: false,
mode: "push",
},
onHover: {
enable: false,
mode: "repulse",
},
resize: true,
},
modes: {
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: false,
},
move: {
direction: "none",
enable: true,
outModes: {
default: "bounce",
},
random: true,
speed: 0.5,
straight: false,
},
number: {
density: {
enable: true,
area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
value: { min: 1, max: 3 },
random: true,
},
},
detectRetina: true,
}}
/>

Hi, I am
bob
I am a


);
}

< /code>
И это мой css < /p>
.heroContainer {
position:relative;
overflow:hidden;

display:flex;
flex-direction:column;
justify-content: center;

max-width:100%;
height:100vh;
background-color:#171b22;
}

#tsparticles {
position:absolute;
top:0;
left:0;

width:100%;
height:100%;
z-index:-1;
}

.main {
position: relative;
z-index: 2;

display:flex;
flex-direction:column;
justify-content:center;
width:100%;
max-width:clamp(600px, 1200px, 1500px);

margin-left:auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;

text-align:left;
color:#e0e0e0;

}

.greeting, .nameContainer, .secondaryText{
padding: 0px;
margin: 0px;
transition: transform 0.3s ease-in-out;
}

.greeting:hover, .nameContainer:hover, .secondaryText:hover {
transform: scale(1.05);
}

h1 {
font-size: 80px;
}

.secondaryText {
font-size: 25px;
color:#e0e0e0;
}

p {
font-size:20px;
color:#e0e0e0;
}

.name {
background:linear-gradient(90deg, #ffde0e 10%, #e4a053 60%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;

text-shadow: 0 0 3px rgba(255, 222, 14, 0.4), 0 0 5px rgba(228, 160, 83, 0.4);
}

h1, h2, p {
margin: 0px;
}


Подробнее здесь: https://stackoverflow.com/questions/796 ... g-anything