I decided to add particles to the wave to make it beautiful. On top of the wave there will be animated text with a description and buttons, every time I try to limit the visibility of the particles I always have them on the whole screen. What am I doing wrong?
HeroImage.svelte
<script lang="ts"> import Particles from '$features/Particles.svelte';</script><div id="wave"><div id="particles-container" style="overflow: hidden;"><Particles /></div><img src="/src/assets/images/wave.svg" alt="wave" id="wave_hero"></div>Particles.svelte
<script lang="ts"> import { particlesInit } from '@tsparticles/svelte'; import { onMount } from 'svelte'; import { loadSlim } from '@tsparticles/slim'; let ParticlesComponent: typeof import('@tsparticles/svelte').default; onMount(async () => { const module = await import('@tsparticles/svelte'); ParticlesComponent = module.default; }); let particlesConfig = { particles: { number: { value: 20, density: { enable: true, value_area: 800 } }, color: { value: "#ffffff" }, shape: { type: "circle", }, opacity: { value: 0.5, random: true, anim: { enable: true, speed: 1, opacity_min: 0.1, sync: false } }, size: { value: 30, random: true, anim: { enable: false, speed: 4, size_min: 0.3, sync: false } }, line_linked: { enable: false, }, move: { enable: true, speed: 0.7, direction: "top" as const, random: false, straight: false, out_mode: "bounce", bounce: false, attract: { enable: false, rotateX: 600, rotateY: 1200 } } }, interactivity: { detect_on: "canvas", events: { onhover: { enable: true, mode: "bubble" }, onclick: { enable: true, mode: "repulse" }, resize: { enable: true } }, modes: { grab: { distance: 400, line_linked: { opacity: 1 } }, bubble: { distance: 200, size: 0, duration: 2, opacity: 0, speed: 3 }, repulse: { distance: 400, duration: 0.4 }, push: { particles_nb: 4 }, remove: { particles_nb: 2 } } }, retina_detect: true, }; let onParticlesLoaded = (event: CustomEvent) => { const particlesContainer = event.detail.particles; console.log(particlesContainer) }; void particlesInit(async (engine) => { await loadSlim(engine); });</script><svelte:component this={ParticlesComponent} id="tsparticles" class="particles" style="" options={particlesConfig} on:particlesLoaded={onParticlesLoaded}/>I tried using overflow: hidden and adding fullscreen: false to the particle config, but nothing changed.Preview