### Import and Initialize Gradient

Source: https://github.com/jordienr/whatamesh/blob/master/README.md

Import the Gradient class and initialize it with the ID of your canvas element. This is the basic setup for creating a gradient.

```javascript
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");
```

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

### initGradient Method

Source: https://context7.com/jordienr/whatamesh/llms.txt

Explains how to use the `initGradient` method to initialize the animated gradient on a specified canvas element, including HTML and CSS setup.

```APIDOC
## initGradient(selector)

### Description
Initializes the gradient animation on the specified canvas element. This is the primary method to start the gradient effect. It reads CSS custom properties for colors and sets up the WebGL context.

### Method
`initGradient(selector: string)`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Endpoint
This method is called on a `Gradient` instance.

### Request Example
```html
<!-- HTML: Create a canvas element with an ID -->
<canvas id="gradient-canvas"></canvas>

<!-- CSS: Define gradient colors via custom properties -->
<style>
#gradient-canvas {
  width: 100%;
  height: 100%;
  --gradient-color-1: #c3e4ff;
  --gradient-color-2: #6ec3f4;
  --gradient-color-3: #eae2ff;
  --gradient-color-4: #b9beff;
}
</style>

<!-- JavaScript: Initialize the gradient -->
<script type="module">
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");
</script>
```

### Response
This method does not return a value. It initializes the gradient on the canvas.
```

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

### HTML Canvas and CSS for Gradient Setup

Source: https://context7.com/jordienr/whatamesh/llms.txt

Define a canvas element in HTML and set its dimensions and gradient colors using CSS custom properties. Then, initialize the gradient using JavaScript.

```html
<!-- HTML: Create a canvas element with an ID -->
<canvas id="gradient-canvas"></canvas>

<!-- CSS: Define gradient colors via custom properties -->
<style>
#gradient-canvas {
  width: 100%;
  height: 100%;
  --gradient-color-1: #c3e4ff;
  --gradient-color-2: #6ec3f4;
  --gradient-color-3: #eae2ff;
  --gradient-color-4: #b9beff;
}
</style>

<!-- JavaScript: Initialize the gradient -->
<script type="module">
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");
</script>
```

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

### Gradient Class Initialization and Control

Source: https://context7.com/jordienr/whatamesh/llms.txt

Demonstrates how to import the Gradient class, initialize it on a canvas element, and control animation playback and color toggling.

```APIDOC
## Gradient Class Usage

### Description
This section details the usage of the `Gradient` class from the Whatamesh library, including initialization, animation control, and color manipulation.

### Method
`import { Gradient } from "whatamesh";`

### Initialization
```javascript
const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");
```

### Animation Control
```javascript
gradient.pause();   // Pause the animation
gradient.play();    // Resume the animation
```

### Color Toggling
```javascript
gradient.toggleColor(0);  // Toggle first color layer (index 0-3)
gradient.toggleColor(2);  // Toggle third color layer (index 0-3)
```

### Legend Control
```javascript
gradient.showGradientLegend();
gradient.hideGradientLegend();
```
```

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

### play() and pause() Methods

Source: https://context7.com/jordienr/whatamesh/llms.txt

Details the `play()` and `pause()` methods for controlling the animation playback dynamically without destroying the WebGL context.

```APIDOC
## play() and pause()

### Description
Control methods for starting and stopping the gradient animation without destroying the WebGL context. `pause()` stops the animation frame loop, and `play()` resumes it.

### Method
`play(): void`
`pause(): void`

### Parameters
None

### Endpoint
These methods are called on a `Gradient` instance.

### Request Example
```javascript
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");

// Example: Toggle button functionality
const toggleButton = document.getElementById("toggle-btn");
let isPlaying = true;

toggleButton.addEventListener("click", () => {
  if (isPlaying) {
    gradient.pause();
    toggleButton.textContent = "Play";
  } else {
    gradient.play();
    toggleButton.textContent = "Pause";
  }
  isPlaying = !isPlaying;
});

// Example: Pause when element is not visible for performance
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      gradient.play();
    } else {
      gradient.pause();
    }
  });
});

observer.observe(document.getElementById("gradient-canvas"));
```

### Response
These methods do not return a value. They control the animation state.
```

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

### Initialize and Control Gradient Animation

Source: https://context7.com/jordienr/whatamesh/llms.txt

Import the Gradient class and use its methods to initialize, play, pause, and toggle colors on a canvas element. Ensure the canvas element exists and CSS custom properties are defined.

```javascript
import { Gradient } from "whatamesh";

// Create a new Gradient instance
const gradient = new Gradient();

// Initialize the gradient on a canvas element
gradient.initGradient("#gradient-canvas");

// Control animation playback
gradient.pause();   // Pause the animation
gradient.play();    // Resume the animation

// Toggle individual color layers (index 0-3)
gradient.toggleColor(0);  // Toggle first color layer
gradient.toggleColor(2);  // Toggle third color layer

// Show/hide gradient legend
gradient.showGradientLegend();
gradient.hideGradientLegend();
```

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

### Initialize Gradient Canvas

Source: https://github.com/jordienr/whatamesh/blob/master/README.md

Include this HTML element in your page to render the gradient. CSS variables are used to define the gradient colors.

```html
<canvas id="gradient-canvas"></canvas>
```

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

### Dynamic Play/Pause and Intersection Observer

Source: https://context7.com/jordienr/whatamesh/llms.txt

Implement play/pause functionality for the gradient animation using button clicks and optimize performance by pausing the animation when the canvas is not in view using an Intersection Observer.

```javascript
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");

// Create play/pause toggle button
const toggleButton = document.getElementById("toggle-btn");
let isPlaying = true;

toggleButton.addEventListener("click", () => {
  if (isPlaying) {
    gradient.pause();
    toggleButton.textContent = "Play";
  } else {
    gradient.play();
    toggleButton.textContent = "Pause";
  }
  isPlaying = !isPlaying;
});

// Pause when element is not visible (performance optimization)
const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      gradient.play();
    } else {
      gradient.pause();
    }
  });
});

observer.observe(document.getElementById("gradient-canvas"));
```

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

### Implement Full Page Animated Gradient Background

Source: https://context7.com/jordienr/whatamesh/llms.txt

Uses a fixed-position canvas element behind content with CSS custom properties for gradient colors. Includes a toggle mechanism to pause or play the animation via the JavaScript API.

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Animated Gradient Background</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      overflow-x: hidden;
    }

    #gradient-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
      --gradient-color-1: #08AEEA;
      --gradient-color-2: #2AF598;
      --gradient-color-3: #FEE140;
      --gradient-color-4: #FA709A;
    }

    .content {
      position: relative;
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      padding: 2rem;
      color: white;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }

    h1 {
      font-size: 4rem;
      margin-bottom: 1rem;
    }

    .btn {
      padding: 1rem 2rem;
      font-size: 1.2rem;
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid white;
      color: white;
      cursor: pointer;
      backdrop-filter: blur(10px);
    }
  </style>
</head>
<body>
  <canvas id="gradient-canvas" data-js-darken-top></canvas>

  <div class="content">
    <h1>Welcome</h1>
    <p>Beautiful animated mesh gradient background</p>
    <button class="btn" id="toggle">Toggle Animation</button>
  </div>

  <script type="module">
    import { Gradient } from "whatamesh";

    const gradient = new Gradient();
    gradient.initGradient("#gradient-canvas");

    let playing = true;
    document.getElementById("toggle").addEventListener("click", () => {
      playing ? gradient.pause() : gradient.play();
      playing = !playing;
    });
  </script>
</body>
</html>
```

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

### Configure Gradient Colors with CSS Custom Properties

Source: https://context7.com/jordienr/whatamesh/llms.txt

Define gradient colors using CSS custom properties on the canvas element. The library reads these values to configure the WebGL shader colors. Supports standard and shorthand hex values.

```html
<canvas id="gradient-canvas"></canvas>

<style>
/* Static color scheme */
#gradient-canvas {
  width: 100%;
  height: 600px;
  --gradient-color-1: #449ce4;
  --gradient-color-2: #2f8bc1;
  --gradient-color-3: #ccbeee;
  --gradient-color-4: #4c57f6;
}

/* Dark theme colors */
#gradient-canvas.dark-theme {
  --gradient-color-1: #1a1a2e;
  --gradient-color-2: #16213e;
  --gradient-color-3: #0f3460;
  --gradient-color-4: #533483;
}

/* Warm theme colors */
#gradient-canvas.warm-theme {
  --gradient-color-1: #ff6b6b;
  --gradient-color-2: #feca57;
  --gradient-color-3: #ff9ff3;
  --gradient-color-4: #f368e0;
}
</style>

<script type="module">
import { Gradient } from "whatamesh";

const gradient = new Gradient();
const canvas = document.getElementById("gradient-canvas");

// Initialize gradient
gradient.initGradient("#gradient-canvas");

// Dynamically change colors via JavaScript
function setTheme(theme) {
  canvas.className = theme;
  // Reinitialize to pick up new colors
  gradient.initGradient("#gradient-canvas");
}

// Change to dark theme
setTheme("dark-theme");

// Or update individual colors dynamically
canvas.style.setProperty("--gradient-color-1", "#ff0000");
canvas.style.setProperty("--gradient-color-2", "#00ff00");
gradient.initGradient("#gradient-canvas");
</script>
```

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

### Style Gradient Canvas with CSS Variables

Source: https://github.com/jordienr/whatamesh/blob/master/README.md

Style the canvas element and define the gradient colors using CSS variables. These variables are used by the Whatamesh library to generate the gradient.

```css
#gradient-canvas {
  width: 100%;
  height: 100%;
  --gradient-color-1: #449ce4;
  --gradient-color-2: #2f8bc1;
  --gradient-color-3: #ccbeee;
  --gradient-color-4: #4c57f6;
}
```

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

### Toggle Gradient Color Layer Visibility

Source: https://context7.com/jordienr/whatamesh/llms.txt

Use this method to enable or disable specific color layers (0-3) in the gradient animation. This allows for dynamic color scheme adjustments without reinitializing the entire gradient.

```javascript
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");

// Create color toggle controls
const colorButtons = ["color1", "color2", "color3", "color4"];

colorButtons.forEach((id, index) => {
  const button = document.getElementById(id);
  let active = true;

  button.addEventListener("click", () => {
    gradient.toggleColor(index);
    active = !active;
    button.classList.toggle("inactive", !active);
  });
});

// Example: Create a two-color gradient by disabling layers 2 and 3
gradient.toggleColor(2);
gradient.toggleColor(3);
```

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

### CSS Custom Properties for Colors

Source: https://context7.com/jordienr/whatamesh/llms.txt

Define gradient colors using CSS custom properties on the canvas element. The library reads these values to configure the WebGL shader colors. Supports hex values and dynamic updates.

```APIDOC
## CSS Custom Properties for Colors

### Description
Define gradient colors using CSS custom properties on the canvas element. The library reads these values to configure the WebGL shader colors. Four CSS custom properties control the gradient colors: `--gradient-color-1` through `--gradient-color-4`. These can be set in stylesheets or dynamically via JavaScript. Supports both standard 6-character hex values and shorthand 3-character hex values. Colors are automatically converted to normalized WebGL format internally.

### Parameters
#### CSS Custom Properties
- **--gradient-color-1** (string) - Required - Defines the first color of the gradient.
- **--gradient-color-2** (string) - Required - Defines the second color of the gradient.
- **--gradient-color-3** (string) - Optional - Defines the third color of the gradient.
- **--gradient-color-4** (string) - Optional - Defines the fourth color of the gradient.

### Request Example
```html
<canvas id="gradient-canvas"></canvas>

<style>
#gradient-canvas {
  width: 100%;
  height: 600px;
  --gradient-color-1: #449ce4;
  --gradient-color-2: #2f8bc1;
  --gradient-color-3: #ccbeee;
  --gradient-color-4: #4c57f6;
}
</style>

<script type="module">
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");

// Dynamically change colors via JavaScript
const canvas = document.getElementById("gradient-canvas");
canvas.style.setProperty("--gradient-color-1", "#ff0000");
gradient.initGradient("#gradient-canvas");
</script>
```

### Response
This feature configures the gradient's appearance and does not have a direct response.
```

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

### toggleColor(index)

Source: https://context7.com/jordienr/whatamesh/llms.txt

Toggles the visibility of a specific color layer in the gradient animation. Allows for dynamic color scheme changes by enabling or disabling individual color layers (0-3).

```APIDOC
## toggleColor(index)

### Description
Toggles the visibility of a specific color layer in the gradient animation. The gradient consists of up to 4 color layers (indices 0-3). Each layer can be independently enabled or disabled using this method. When a color layer is toggled off, it no longer contributes to the final gradient composition. This allows for dynamic color scheme changes without reinitializing the entire gradient.

### Parameters
#### Path Parameters
- **index** (number) - Required - The index of the color layer to toggle (0-3).

### Request Example
```javascript
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");

// Example: Create a two-color gradient by disabling layers 2 and 3
gradient.toggleColor(2);
gradient.toggleColor(3);
```

### Response
This method does not return a value.
```

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

### Apply Darken Top Effect to Gradient

Source: https://context7.com/jordienr/whatamesh/llms.txt

Enable a darkening effect on the top portion of the gradient by adding the `data-js-darken-top` attribute to the canvas element. This enhances text readability when overlaying content.

```html
<!-- With darken top effect enabled -->
<canvas id="gradient-canvas" data-js-darken-top></canvas>

<!-- Without darken top effect -->
<canvas id="gradient-canvas"></canvas>

<style>
#gradient-canvas {
  width: 100%;
  height: 100vh;
  --gradient-color-1: #c3e4ff;
  --gradient-color-2: #6ec3f4;
  --gradient-color-3: #eae2ff;
  --gradient-color-4: #b9beff;
}
</style>

<script type="module">
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");

// Toggle darken top effect dynamically
function toggleDarkenTop() {
  const canvas = document.getElementById("gradient-canvas");

  if (canvas.hasAttribute("data-js-darken-top")) {
    canvas.removeAttribute("data-js-darken-top");
  } else {
    canvas.setAttribute("data-js-darken-top", "");
  }

  // Reinitialize to apply the change
  gradient.initGradient("#gradient-canvas");
}

document.getElementById("toggle-darken").addEventListener("click", toggleDarkenTop);
</script>
```

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

### Darken Top Effect

Source: https://context7.com/jordienr/whatamesh/llms.txt

Apply a darkening effect to the top portion of the gradient using the `data-js-darken-top` attribute on the canvas element. This creates visual depth and improves text readability.

```APIDOC
## Darken Top Effect

### Description
Apply a darkening effect to the top portion of the gradient using the `data-js-darken-top` attribute. When this attribute is present on the canvas element, the shader applies a shadow effect that darkens the upper portion of the gradient. This creates visual depth and is useful for ensuring text readability when overlaying content on the gradient.

### Parameters
#### HTML Attribute
- **data-js-darken-top** (boolean) - Optional - If present, enables the darken top effect.

### Request Example
```html
<!-- With darken top effect enabled -->
<canvas id="gradient-canvas" data-js-darken-top></canvas>

<script type="module">
import { Gradient } from "whatamesh";

const gradient = new Gradient();
gradient.initGradient("#gradient-canvas");

// Toggle darken top effect dynamically
function toggleDarkenTop() {
  const canvas = document.getElementById("gradient-canvas");

  if (canvas.hasAttribute("data-js-darken-top")) {
    canvas.removeAttribute("data-js-darken-top");
  } else {
    canvas.setAttribute("data-js-darken-top", "");
  }

  // Reinitialize to apply the change
  gradient.initGradient("#gradient-canvas");
}

document.getElementById("toggle-darken").addEventListener("click", toggleDarkenTop);
</script>
```

### Response
This feature configures the gradient's appearance and does not have a direct response.
```

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