Intégration animation JS dans le framework Docusaurus

Bonjour à tous! :)

J'ai suivis le tuto permettant de créer des particules 3D connectées avec Three.js.
Je suis allé au bout et je peux maintenant visualiser le résultat.

Je souhaiterais utiliser le canvas d'animation comme fond de Header afin que les utilisateurs interagissent avec l'animation lorsqu'ils viennent cliquer sur le bouton central de la page.

Cependant j'utilise le framework docusaurus et, même si j'ai réussi à isoler l'animation dans un fichier JS puis à l'importer via une fonction dans l'index.js de la page principale du site, ainsi qu'à l'afficher (sous le footer :/ ), aucun moyen de le faire parvenir en fond d'en-tête.

Docusaurus utilise des thèmes prédéfinits mais j'imagine qu'il ya moyen de contourner le truc, j'aurais donc besoin d'un petit coup de main :)

Lorsque j'utilise la balise <script> l'animation s'affiche plusieurs fois.
Idem lorsque j'appelle la fonction particles() seule.

Voici à quoi ressemble la fonction du Index.js qui je pense gère le code html de la page principale Index.html :

function Home() {

  const context = useDocusaurusContext();
  const {siteConfig = {}} = context;
  //document.body.appendChild( renderer.domElement );

  return (

    <Layout
      title={`${siteConfig.title}`}
      description="Documentation for FARO CAM2 - The World’s Smartest 3D Measurement Platform">

      <header className={clsx('hero hero--dark', styles.heroBanner)}>  

          <div className="container">

            <h1 className="hero__title">{siteConfig.title}</h1>
            <p className="hero__subtitle">{siteConfig.tagline}</p>
              <div className={styles.buttons}>
                    <div class="item shadow--tl">
                    <Link
                      className={clsx('button button--outline button--primary button--lg', styles.getStarted,)}
                      to={useBaseUrl('blog/')}>
                      Get Started
                    </Link>
                    </div>
                </div>
              </div>

        </header>

      <main>
        {features && features.length > 0 && (
          <section className={styles.features}>
            <div className="container">
              <div className="row">
                {features.map((props, idx) => (
                  <Feature key={idx} {...props} />
                ))}
              </div>
            </div>
          </section>
        )}
      </main>
    </Layout>
  );
}

export default Home;