how to customize vanta js effect in react?

Question

I have imported and used vanta js in my react project using react hook. now i want to customize the vanta effect such as background color. how to do it??

import {Container,Row,Col,Image} from 'react-bootstrap'
import img1 from '../images/mw1.jpg'
import img2 from '../images/mw2.jpg'
import img3 from '../images/mw3.jpg'
import 'aos/dist/aos.css';
import Aos from 'aos';
import React, { useState, useEffect, useRef } from 'react'
import BIRDS from 'vanta/dist/vanta.birds.min'

function Myworks() {
  const [vantaEffect, setVantaEffect] = useState(0)
    const myRef = useRef(null)
    useEffect(() => {
     if (!vantaEffect) {
        setVantaEffect(BIRDS({
          el: myRef.current
      }))        
      }
      return () => {
        if (vantaEffect) vantaEffect.destroy()
      }
    }, [vantaEffect])
  Aos.init({duration:3000})
    return (
        <Container id="mywork" ref={myRef}>
            <h1 data-aos="zoom-in-down" >Portfolio</h1>
            <h3 data-aos="zoom-in-down">My recent works</h3>

how can i change the backgroundcolor of my vanta js effect into black???

Answer 1

according to the documentation here, you can just put it all your preferences directly in the animation you choose, like so:

setVantaEffect(BIRDS(({
  el:myRef.current,
  color1: 0xabadcd,
  color2: 0xded7d2,
  backgroundColor: 0x161515
  //and so on...
})))