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