hexagons preset is not working for me

[devdouglasferreira]

I'm trying to use the tsParticles (specifically the react-tsparticles) with the latest version of Next.js so far, but when I copy and paste the particle.json e bind it to the <Particles/> component it doesn't behave as expected. All the particles moves fowards its relative position (very similar to the Hyperspace example) instead follow hexagon-shaped path.

Another weird issue that is happning is that is not following the background color from CSS (which also works with others presets)

The TSX files and the css doesn't seem to be the major problem because all other presets and examples works as expected.

How setup the particles.json file to produce the same effect as hexagon preset showed above?

My Component:

'use client'

import { useCallback } from "react";
import Particles from "react-tsparticles";
import { loadFull } from "tsparticles";
import type { Container, Engine } from "tsparticles-engine";

export function ParticleContainer() {
    const particlesInit = useCallback(async (engine: Engine) => {
        console.log(engine);
        await loadFull(engine);
    }, []);

    const particlesLoaded = useCallback(async (container: Container | undefined) => {
        await console.log(container);
    }, []);

    return (
        <Particles
            id="tsparticles"
            init={particlesInit}
            loaded={particlesLoaded}
            canvasClassName="particle-canvas"
            url="/particles.json"
        />
    );
}

My component use case:

import { ParticleContainer } from "../components/particles-container"

export default function About() {
    return (
        <main>
            <div id="carousel-container" className="carousel-container">
                <div id="home-carousel" className="">
                    <div className="carousel-inner">
                        <ParticleContainer/>
                        <div className="carousel-item active">
                            <div className="carousel-caption ">
                                <div className="text-center">
                                    <span className="align-middle">
                                        <h2>My Title</h2>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <section>
                <div className="container col-xxl-8 px-4 py-5">
                    <div className="">
                        <p className="main-text">
                            Content ... Lorem Ipsum... 
                        </p>
                    </div>
                </div>
            </section>
        </main>
    )
}

Example of the rendered page working just fine with other preset:

Expected particle behaviour:

The current json provided by the option of exporting the hexagons preset (In my case I just switch the fullscreen to false):
https://pastebin.com/b8qnJyyG

Faulty behaviour:

[matteobruni]

Duplicate of issue opened on the main repository