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?
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
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:
My component use case:
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: