i am trying to change the color of the lines in Vanta NET however only the dots are changing the color

[Potafe]

Here is my code for reference:

const vantaRef = useRef(null);

useEffect(() => {
const vantaEffect = NET({
el: vantaRef.current,
THREE: THREE,
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.0,
minWidth: 200.0,
scale: 1.0,
scaleMobile: 1.0,
color: 0xff3f81,
lineColors: 0xff3f81,
backgroundColor: 0x0,
points: 20.0,
spacing: 17.0,
showDots: true,
maxDistance: 20.0,
});

console.log("Vanta Effect:" , vantaEffect);

return () => {
  if (vantaEffect) vantaEffect.destroy();
};

}, []);

[Potafe]

[joujou144]

I had the same issue with the Birds effect in my NextJs project. All the birds turned white only the backgroundColor changed. In my opinion, implementing Vanta in React/Next (and possibly other frameworks too) is extremely inconvenient. Even more so if you use Typescript. I believe libraries like Vanta is more compatible with vanilla projects.

If you evaluate the code in their src folder, the color value type is a number. And since youre using React for your project (and possibly tailwind), css is unable to read this value type as colors are set as strings e.g "#fff" The Vanta library expects color values as numbers, specifically in hexadecimal format. When converting these hexadecimal color values to formats like RGBA, we need to ensure the output remains a number.

You need to convert a hexadecimal color value to RGBA format and ensure it remains a number (not a string), you can create a function that performs this conversion directly while maintaining the numerical type expected by Vanta.. I created a function for the conversion but it didnt work. I gave up and decided to uninstall Vanta and implement a simple animation using CSS on my Hero component instead.

[Potafe]

Thanks for your reply. Man i was just frustrated with this, atleast now i know that Vanta is the problem