### Basic Vanta.js Integration with Script Tags - HTML

Source: https://github.com/tengbao/vanta/blob/master/README.md

This snippet demonstrates the fundamental way to include and initialize Vanta.js using standard HTML script tags. It loads the three.js library, then the Vanta.js waves effect, and finally initializes the effect on an element with the ID 'my-background'.

```HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta/dist/vanta.waves.min.js"></script>
<script>
  VANTA.WAVES('#my-background')
</script>
```

--------------------------------

### Generic Vanta.js Effect Inclusion and Initialization

Source: https://github.com/tengbao/vanta/blob/master/index.html

This HTML template demonstrates how to include a specific Vanta.js effect from the CDN and provides a placeholder for the JavaScript code required to initialize that effect. Users need to replace '[[EFFECTNAME]]' with the desired effect name and '[[CODE]]' with the effect's initialization script.

```HTML
[[INCLUDE]] <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[[EFFECTNAME]].min.js"></script> <script> [[CODE]] </script>
```

--------------------------------

### Strikingly Vanta.js Effect Inclusion and Initialization

Source: https://github.com/tengbao/vanta/blob/master/index.html

This HTML template provides specific instructions for integrating a Vanta.js effect into a Strikingly.com site. It includes the Vanta.js effect from CDN and a placeholder '[[CODE_STRK]]' for the effect's initialization script, tailored for Strikingly's custom code footer.

```HTML
[[INCLUDE]] <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.[[EFFECTNAME]].min.js"></script> <script> [[CODE_STRK]] </script>
```

--------------------------------

### Updating and Resizing Vanta.js Effects - JavaScript

Source: https://github.com/tengbao/vanta/blob/master/README.md

This snippet illustrates how to interact with an initialized Vanta.js effect. It first initializes the WAVES effect and stores its instance. Subsequently, it demonstrates how to update specific options like color using `setOptions()` and how to force a redraw to adapt to container size changes using `resize()`.

```JavaScript
const effect = VANTA.WAVES({
  el: '#my-background',
  color: 0x000000
})

// Later, when you want to update an animation in progress with new options
effect.setOptions({
  color: 0xff88cc
})

// Later, if the container changes size and you want to force Vanta to redraw at the new canvas size
effect.resize()
```

--------------------------------

### Including p5.js from CDN

Source: https://github.com/tengbao/vanta/blob/master/index.html

This HTML snippet includes the p5.js library (version 1.1.9, minified) from a CDN. p5.js is a prerequisite for certain Vanta.js effects that utilize its creative coding capabilities.

```HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>
```

--------------------------------

### Initializing Vanta.js Waves Effect with Custom Options - JavaScript

Source: https://github.com/tengbao/vanta/blob/master/README.md

This JavaScript snippet shows how to initialize the Vanta.js WAVES effect with a set of custom parameters. It specifies the target element, color, wave height, shininess, wave speed, and zoom level, allowing for fine-grained control over the visual appearance of the animation.

```JavaScript
VANTA.WAVES({
  el: '#my-background', // element selector string or DOM object reference
  color: 0x000000,
  waveHeight: 20,
  shininess: 50,
  waveSpeed: 1.5,
  zoom: 0.75
})
```

--------------------------------

### Using Custom p5.js Instance with Vanta.js in React - JavaScript

Source: https://github.com/tengbao/vanta/blob/master/README.md

This React snippet demonstrates how to provide a custom `p5.js` instance, imported via npm, to a Vanta.js effect. This method allows developers to manage `p5.js` as a module dependency and explicitly pass the `p5` object during effect initialization, rather than relying on a global instance.

```JavaScript
import React from 'react'
import p5 from 'p5'
import TRUNK from 'vanta/dist/vanta.trunk.min'

  componentDidMount() {
    this.vantaEffect = TRUNK({
      el: this.vantaRef.current,
      p5: p5 // use a custom p5 when initializing
    })
  }
```

--------------------------------

### Using Custom Three.js Instance with Vanta.js in React - JavaScript

Source: https://github.com/tengbao/vanta/blob/master/README.md

This React snippet shows how to provide a custom `three.js` instance, imported via npm, to a Vanta.js effect. Instead of relying on a globally available `window.THREE`, this approach allows for better module management by explicitly passing the `THREE` object during effect initialization.

```JavaScript
import React from 'react'
import * as THREE from 'three'
import BIRDS from 'vanta/dist/vanta.birds.min'

  componentDidMount() {
    this.vantaEffect = BIRDS({
      el: this.vantaRef.current,
      THREE: THREE // use a custom THREE when initializing
    })
  }
```

--------------------------------

### Including Three.js r134 from CDN

Source: https://github.com/tengbao/vanta/blob/master/index.html

This HTML snippet includes the Three.js library (version r134, minified) from a CDN. Three.js is a prerequisite for Vanta.js effects that rely on WebGL for 3D rendering.

```HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
```

--------------------------------

### Initializing Google Analytics Tracking

Source: https://github.com/tengbao/vanta/blob/master/index.html

This JavaScript snippet initializes Google Analytics tracking using the gtag.js library. It sets up the dataLayer, defines the gtag function, and configures a Google Analytics property with the ID 'UA-42988408-2'.

```JavaScript
window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-42988408-2');
```

--------------------------------

### Including Three.js r121 from CDN (Alternative)

Source: https://github.com/tengbao/vanta/blob/master/index.html

This HTML snippet includes an alternative version of the Three.js library (r121, minified) from a CDN. This version might be specified for compatibility or specific Vanta.js effect requirements.

```HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
```

--------------------------------

### Integrating Vanta.js Birds Effect with React Classes - JavaScript

Source: https://github.com/tengbao/vanta/blob/master/README.md

This React class component illustrates how to integrate a Vanta.js effect using traditional class-based components. It initializes the Vanta effect in `componentDidMount` and ensures proper cleanup in `componentWillUnmount`, attaching the effect to an element referenced by `React.createRef()`.

```JavaScript
import React from 'react'
import BIRDS from 'vanta/dist/vanta.birds.min'
// Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag

class MyComponent extends React.Component {
  constructor() {
    super()
    this.vantaRef = React.createRef()
  }
  componentDidMount() {
    this.vantaEffect = BIRDS({
      el: this.vantaRef.current
    })
  }
  componentWillUnmount() {
    if (this.vantaEffect) this.vantaEffect.destroy()
  }
  render() {
    return <div ref={this.vantaRef}>
      Foreground content goes here
    </div>
  }
}
```

--------------------------------

### Integrating Vanta.js Birds Effect with Vue 2 SFC - Vue

Source: https://github.com/tengbao/vanta/blob/master/README.md

This Vue 2 Single File Component (SFC) demonstrates how to integrate a Vanta.js effect. The effect is initialized in the `mounted` lifecycle hook, attaching it to a template ref, and is properly destroyed in the `beforeDestroy` hook to manage resources effectively within the Vue component lifecycle.

```Vue
<template>
  <div ref='vantaRef'>
    Foreground content here
  </div>
</template>

<script>
import BIRDS from 'vanta/dist/vanta.birds.min'
// Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag

export default {
  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  }
}
</script>
```

--------------------------------

### Integrating Vanta.js Birds Effect with React Hooks - JavaScript

Source: https://github.com/tengbao/vanta/blob/master/README.md

This React functional component demonstrates how to integrate a Vanta.js effect using React Hooks. It utilizes `useState` to manage the effect instance and `useEffect` for initialization and cleanup, ensuring the effect is created when the component mounts and destroyed when it unmounts, attaching it to a `useRef` element.

```JavaScript
import React, { useState, useEffect, useRef } from 'react'
import BIRDS from 'vanta/dist/vanta.birds.min'
// Make sure window.THREE is defined, e.g. by including three.min.js in the document head using a <script> tag

const MyComponent = (props) => {
  const [vantaEffect, setVantaEffect] = useState(null)
  const myRef = useRef(null)
  useEffect(() => {
    if (!vantaEffect) {
      setVantaEffect(BIRDS({
        el: myRef.current
      }))
    }
    return () => {
      if (vantaEffect) vantaEffect.destroy()
    }
  }, [vantaEffect])
  return <div ref={myRef}>
    Foreground content goes here
  </div>
}
```

--------------------------------

### Destroying Vanta.js Effect Instance - JavaScript

Source: https://github.com/tengbao/vanta/blob/master/README.md

This JavaScript snippet demonstrates how to properly clean up and destroy a Vanta.js effect instance. Calling `effect.destroy()` releases resources and stops the animation, which is crucial for preventing memory leaks, especially in single-page applications or when components unmount.

```JavaScript
const effect = VANTA.WAVES('#my-background')
effect.destroy() // e.g. call this in React's componentWillUnmount
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.