# How to use effects from vanta js

EXAMPLE:  

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1741596215060/5193eda9-c0c5-4497-96fa-e208eba15e62.png align="center")

Here we have used vanta dots in the main background and vanta trunk in in the image background.

cdns required

```html

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.trunk.min.js"></script>
```

for ease and reuseability, i have created a hooks:  
  

```javascript
import { useState, useEffect } from 'react';
//@ts-ignore
import DOTS from 'vanta/src/vanta.dots';

const useVantaDots = (selector: string) => {
  const [dots, setDots] = useState<any>(null);

  useEffect(() => {
    if (!dots) {
      setDots(
        DOTS({
          el: selector,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 300.0,
          minWidth: 200.0,
          scale: 1.0,
          scaleMobile: 1.0,
          color: 0x64ffda,
          color2: 0x204aff,
          backgroundColor: 0x0a192f,
          size: 2.8,
          spacing: 20,
          showLines: false,
        })
      );
    }

    return () => {
      if (dots) {
        dots.destroy();
        setDots(null);
      }
    };
  }, []);

  return dots;
};

export default useVantaDots;
```

```javascript
import { useState, useEffect } from 'react';
//@ts-ignore
import TRUNK from 'vanta/src/vanta.trunk';

const useVantaTrunk = (selector: string) => {
  const [trunk, setTrunk] = useState<any>(null);

  useEffect(() => {
    if (!trunk) {
      setTrunk(
        TRUNK({
          el: selector,
          mouseControls: true,
          touchControls: true,
          gyroControls: false,
          minHeight: 200.0,
          minWidth: 200.0,
          scale: 1.0,
          scaleMobile: 1.0,
          color: 0x64ffda,
          backgroundColor: 0x112240,
          spacing: 0,
          chaos: 4.0,
        })
      );
    }

    return () => {
      if (trunk) {
        trunk.destroy();
        setTrunk(null);
      }
    };
  }, []);
// }, [trunk, selector]);

  return trunk;
};

export default useVantaTrunk;
```

```javascript
import useVantaDots from '../hooks/useVantaDots';
import useVantaTrunk from '../hooks/useVantaTrunk';  useVantaDots("#bg");
    useVantaTrunk("#photo");
```

```javascript
  useVantaDots("#bg");
  useVantaTrunk("#photo");

//provide the id as input

<div className="flex items-center" id='bg'>
</div>



<div className='' id='photo'>
        <img className='' src="/assets/bhavikProfile.avif" alt="Bhavik Bhuva" />
        </div>

```