Mesh Gradient

https://meshgradientweb.vercel.app/docs
Admin
Mesh Gradient is a library and tool for generating customizable mesh gradients with options for...
Tokens:11,248
Snippets:123
Trust Score:7.8
Update:9 months ago
Show doc for...
Tokens:
Raw
### Install @mesh-gradient/vue using bun

Source: https://meshgradientweb.vercel.app/docs/vue/quick-start

Installs the @mesh-gradient/vue package using bun. Bun is a fast JavaScript runtime and package manager, suitable for Vue 3 projects.

```bash
bun add @mesh-gradient/vue
```

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

### Install @mesh-gradient/vue using npm

Source: https://meshgradientweb.vercel.app/docs/vue/quick-start

Installs the @mesh-gradient/vue package using npm. This is the first step to integrate Mesh Gradient into your Vue 3 project.

```bash
npm install @mesh-gradient/vue
```

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

### Configure MeshGradient Options in Vue

Source: https://meshgradientweb.vercel.app/docs/vue/quick-start

Shows how to configure the MeshGradient component by passing an 'options' prop. This example sets a specific 'seed' for the gradient pattern.

```vue
<template>
  <MeshGradient :options="{ seed: 1 }" />
</template>
```

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

### Install @mesh-gradient/vue using pnpm

Source: https://meshgradientweb.vercel.app/docs/vue/quick-start

Installs the @mesh-gradient/vue package using pnpm. This command is an alternative to npm for package management in your Vue 3 project.

```bash
pnpm add @mesh-gradient/vue
```

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

### Install @mesh-gradient/vue using yarn

Source: https://meshgradientweb.vercel.app/docs/vue/quick-start

Installs the @mesh-gradient/vue package using yarn. This is another common package manager option for Vue 3 projects.

```bash
yarn add @mesh-gradient/vue
```

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

### Install Mesh Gradient React Package

Source: https://meshgradientweb.vercel.app/docs/react/quick-start

Install the @mesh-gradient/react package using npm, pnpm, yarn, or bun. This package enables the use of Mesh Gradient in React and SSR frameworks.

```shell
npm install @mesh-gradient/react
```

```shell
pnpm add @mesh-gradient/react
```

```shell
yarn add @mesh-gradient/react
```

```shell
bun add @mesh-gradient/react
```

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

### MeshGradient Initialization Callback (onInit)

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Provides an example of using the `onInit` callback prop to access the MeshGradient instance immediately after it has been initialized, allowing for direct interaction.

```html
<MeshGradient 
  onInit={(instance) => {
    console.log('Gradient initialized:', instance)
    // You can call instance methods
  }}
/>
```

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

### Install @mesh-gradient/core with npm, pnpm, yarn, or bun

Source: https://meshgradientweb.vercel.app/docs/quick-start

Installs the core Mesh Gradient library using different package managers. Ensure you have the respective package manager installed.

```shell
npm install @mesh-gradient/core
```

```shell
pnpm add @mesh-gradient/core
```

```shell
yarn add @mesh-gradient/core
```

```shell
bun add @mesh-gradient/core
```

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

### Basic MeshGradient Usage in Vue

Source: https://meshgradientweb.vercel.app/docs/vue/quick-start

Demonstrates the basic usage of the MeshGradient component in a Vue 3 application. It imports the component and renders it with specified dimensions.

```vue
<template>
  <MeshGradient :style="{ width: '10rem', height: '10rem' }" />
</template>
 
<script setup lang="ts">
import { MeshGradient } from '@mesh-gradient/vue'
</script>
```

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

### Basic Mesh Gradient Usage in React

Source: https://meshgradientweb.vercel.app/docs/react/quick-start

Demonstrates how to import and use the MeshGradient component from '@mesh-gradient/react' in a React application. The component is rendered with specified dimensions.

```tsx
import { MeshGradient } from '@mesh-gradient/react'

const App = () => {
  return <MeshGradient style={{ width: '10rem', height: '10rem' }} />
}
```

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

### Configure Mesh Gradient Options in React

Source: https://meshgradientweb.vercel.app/docs/react/quick-start

Shows how to configure the Mesh Gradient component by passing an 'options' prop. This allows for customization of the gradient's appearance, such as setting a specific seed for the pattern.

```tsx
<MeshGradient options={{ seed: 1 }} />
```

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

### Checking MeshGradient Initialization Status in Vue

Source: https://meshgradientweb.vercel.app/docs/vue/use-mesh-gradient

Provides an example of how to check if a MeshGradient instance is initialized before attempting to call its methods. This is done using the `isInitialized` property of the instance.

```vue
<script setup lang="ts">
import { useMeshGradient } from '@mesh-gradient/vue'

const { instance } = useMeshGradient()

// Check if gradient is initialized
if (instance.value?.isInitialized) {
  // Safe to call methods
}
</script>
```

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

### Basic HTML Setup for Mesh Gradient Canvas

Source: https://meshgradientweb.vercel.app/docs/quick-start

Embed a canvas element with a specified ID and dimensions into your HTML body. This canvas will be targeted by the Mesh Gradient library for rendering.

```html
<body>
  <canvas id="canvas" style="width: 10rem; height: 10rem;"></canvas>
</body>
```

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

### Mesh Gradient Vue TypeScript Support

Source: https://meshgradientweb.vercel.app/docs/vue/use-mesh-gradient

This example demonstrates the TypeScript support provided by the `useMeshGradient` composable in Vue.js. It shows how to import types and how the `instance` ref is correctly typed, allowing for type-safe access to the gradient methods like `init`.

```html
<script setup lang="ts">
import { useMeshGradient } from '@mesh-gradient/vue'
import type { MeshGradient } from '@mesh-gradient/core'
 
const { instance } = useMeshGradient()
 
// instance is properly typed as Ref<MeshGradient | null>
if (instance.value) {
  // TypeScript knows instance.value is MeshGradient here
  instance.value.init(/* ... */)
}
</script>
```

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

### Reactive MeshGradient Configuration

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Demonstrates how to make MeshGradient properties reactive using Vue's `reactive` function. This example shows updating the `animationSpeed` prop dynamically in response to a button click.

```vue
<template>
  <div>
    <button @click="updateSpeed">
      Change speed
    </button>
    
    <MeshGradient 
      :options="config"
      :isPaused="config.isPaused"
      :style="{ width: '300px', height: '200px' }"
    />
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { MeshGradient } from '@mesh-gradient/vue'

const config = reactive({
  animationSpeed: 1.0,
  isPaused: false
})

const updateSpeed = () => {
  config.animationSpeed = 2
}
</script>
```

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

### Configure MeshGradient Seed Option

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Sets the seed for the gradient's initial pattern. Providing a seed ensures a consistent starting pattern. If omitted, a random seed is used.

```typescript
const options: MeshGradientOptions = {
  seed: 1,
};
```

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

### Using CSS Variables for MeshGradient Colors

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Provides an example of defining CSS variables for gradient colors and enabling their use within the MeshGradient component via the `cssVariablesFallback` option. This allows for centralized color management.

```css
:root {
  --mesh-gradient-color-1: #ff0080;
  --mesh-gradient-color-2: #0080ff;
  --mesh-gradient-color-3: #80ff00;
  --mesh-gradient-color-4: #ff8000;
}
```

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

### Advanced MeshGradient Control in Vue

Source: https://meshgradientweb.vercel.app/docs/vue/use-mesh-gradient

An advanced example demonstrating interactive control of a MeshGradient instance. It includes buttons to play/pause animation, update colors randomly, and reset the gradient, all managed via the `useMeshGradient` composable.

```vue
<template>
  <div>
    <canvas 
      ref="canvasRef" 
      class="w-full h-64 rounded-lg"
    />
    
    <div class="mt-4 space-x-2">
      <button @click="toggleAnimation">
        {{ isPaused ? 'Play' : 'Pause' }}
      </button>
      <button @click="updateColors">
        Random Colors
      </button>
      <button @click="resetGradient">
        Reset
      </button>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { useMeshGradient } from '@mesh-gradient/vue'
import { ref, onMounted, watch } from 'vue'
 
const { instance } = useMeshGradient()
const canvasRef = ref<HTMLCanvasElement>()
const isPaused = ref(false)
 
// Initialize gradient on mount
onMounted(() => {
  if (!instance.value || !canvasRef.value) return
  
  instance.value.init(canvasRef.value, {
    colors: ['#ff0080', '#0080ff', '#80ff00', '#ff8000'],
    animationSpeed: 1.2,
    seed: 1
  })
})
 
// Watch for pause state changes
watch(isPaused, (paused) => {
  if (!instance.value?.isInitialized) return
  
  if (paused) {
    instance.value.pause()
  } else {
    instance.value.play()
  }
})
 
const toggleAnimation = () => {
  isPaused.value = !isPaused.value
}
 
const updateColors = () => {
  if (!instance.value?.isInitialized) return
  
  const randomColors = [
    '#' + Math.floor(Math.random()*16777215).toString(16),
    '#' + Math.floor(Math.random()*16777215).toString(16),
    '#' + Math.floor(Math.random()*16777215).toString(16),
    '#' + Math.floor(Math.random()*16777215).toString(16)
  ]
  
  instance.value.update({
    colors: randomColors,
    transition: true,
    transitionDuration: 500
  })
}
 
const resetGradient = () => {
  if (!instance.value?.isInitialized) return
  
  instance.value.update({
    colors: ['#ff0080', '#0080ff', '#80ff00', '#ff8000'],
    seed: 1,
    transition: true
  })
}
</script>
```

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

### Responsive MeshGradient Styling

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Example of applying responsive Tailwind CSS classes to the MeshGradient component to adjust its height across different screen sizes, ensuring a consistent look on various devices.

```vue
<template>
  <MeshGradient 
    class="w-full h-64 md:h-96 lg:h-[500px]"
    :options="{
      animationSpeed: 0.8
    }" 
  />
</template>
```

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

### Controlled MeshGradient State Management

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Example of managing MeshGradient's configuration, such as animation speed, using React state and passing it via the `options` prop for dynamic updates.

```javascript
import { useState } from 'react'
 
function ControlledGradient() {
  const [config, setConfig] = useState({
    animationSpeed: 1.0,
    isPaused: false
  })
 
  const updateSpeed = () => {
    setConfig(prev => ({
      ...prev,
      animationSpeed: 2
    }))
  }
 
  return (
    <div>
      <button onClick={updateSpeed}>
        Change speed
      </button>
      
      <MeshGradient 
        options={config}
        isPaused={config.isPaused}
        style={{ width: '300px', height: '200px' }}
      />
    </div>
  )
}
```

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

### MeshGradient with Composition API

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Utilizes Vue's Composition API to manage MeshGradient state and options. This example shows reactive options using `computed`, event handlers for initialization and updates, and toggling animation with `ref`.

```vue
<template>
  <div>
    <button @click="toggleAnimation">
      {{ isPaused ? 'Play' : 'Pause' }}
    </button>
    
    <MeshGradient 
      :options="gradientOptions"
      :isPaused="isPaused"
      @init="handleInit"
      @update="handleUpdate"
      class="w-full h-64"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { MeshGradient } from '@mesh-gradient/vue'

const isPaused = ref(false)
const speed = ref(1.0)

const gradientOptions = computed(() => ({
  colors: ['#8B5CF6', '#06B6D4', '#10B981', '#F59E0B'],
  animationSpeed: speed.value,
  seed: 42
}))

const toggleAnimation = () => {
  isPaused.value = !isPaused.value
}

const handleInit = (instance) => {
  console.log('Gradient initialized:', instance)
}

const handleUpdate = (instance) => {
  console.log('Gradient updated:', instance)
}
</script>
```

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

### Initialize Mesh Gradient Instance

Source: https://meshgradientweb.vercel.app/docs/api

This snippet demonstrates how to create and initialize a MeshGradient instance using the `MeshGradient` class from the '@mesh-gradient/core' package. The `init` method is used to set up the gradient on a specified canvas element or selector.

```javascript
import { MeshGradient } from '@mesh-gradient/core';

const gradient = new MeshGradient();
// To initialize on a canvas element:
// gradient.init('#myCanvas', { colors: ['#ff0000', '#00ff00'] });
```

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

### Configuring Smooth Appearance with MeshGradient

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Shows how to configure the `appearance` and `appearanceDuration` options for a smooth visual transition when the gradient first appears.

```html
<MeshGradient 
  options={{
    appearance: 'smooth',
    appearanceDuration: 500 // 500ms
  }}
/>
```

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

### Handling MeshGradient Initialization Event (@init)

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Demonstrates how to listen for the 'init' event emitted by the MeshGradient component upon successful initialization. The event provides access to the gradient instance, allowing for programmatic interaction.

```vue
<template>
  <MeshGradient 
    @init="onGradientInit"
  />
</template>

<script setup lang="ts">
const onGradientInit = (instance) => {
  console.log('Gradient initialized:', instance)
  // You can call instance methods
}
</script>
```

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

### Basic React Usage of useMeshGradient Hook

Source: https://meshgradientweb.vercel.app/docs/react/use-mesh-gradient

Demonstrates the basic integration of the `useMeshGradient` hook within a React component. It shows how to obtain the `instance` property, which becomes available after the component mounts, allowing for subsequent API calls.

```jsx
import { useMeshGradient } from '@mesh-gradient/react'
 
function MyComponent() {
  const { instance } = useMeshGradient()
  
  // instance is available after component mounts
  // You can call methods on it when needed
  
  return <div>My Component</div>
}
```

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

### MeshGradient Core Methods in Vue

Source: https://meshgradientweb.vercel.app/docs/vue/use-mesh-gradient

Illustrates the core methods available on the MeshGradient instance obtained via `useMeshGradient`. These methods allow for initializing, updating, playing, pausing, and destroying the gradient.

```vue
<script setup lang="ts">
import { useMeshGradient } from '@mesh-gradient/vue'

const { instance } = useMeshGradient()

// Initialize the gradient
instance.value?.init(canvas, options)

// Update gradient options
instance.value?.update(options)

// Play animation
instance.value?.play()

// Pause animation
instance.value?.pause()

// Destroy the gradient
instance.value?.destroy()
</script>
```

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

### Advanced React Usage with Custom Initialization

Source: https://meshgradientweb.vercel.app/docs/react/use-mesh-gradient

Illustrates advanced usage of the `useMeshGradient` hook in React, including custom initialization logic. It shows how to use `useEffect` to initialize the `MeshGradient` instance with specific options once the instance and canvas reference are available.

```jsx
import { useMeshGradient } from '@mesh-gradient/react'
import { useEffect, useRef } from 'react'
 
function AdvancedGradient() {
  const { instance } = useMeshGradient()
 
  const canvasRef = useRef<HTMLCanvasElement>(null)
  
  useEffect(() => {
    if (!instance || !canvasRef.current) return
    
    // Custom initialization logic
    instance.init(canvasRef.current, {
      colors: ['#ff0080', '#0080ff', '#ff0080', '#0080ff'],
      seed: 42
    })
 
  }, [instance, canvasRef])
  
  return <canvas ref={canvasRef} />
}
```

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

### Enabling Smooth Transitions on Update

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Illustrates how to enable smooth transitions between gradient updates by setting the `transition` and `transitionDuration` options.

```html
<MeshGradient 
  options={{
    transition: true,
    transitionDuration: 600 // 600ms
  }}
/>
```

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

### MeshGradient Initialization Check

Source: https://meshgradientweb.vercel.app/docs/react/use-mesh-gradient

Demonstrates how to check if a `MeshGradient` instance has been successfully initialized before attempting to call its methods. This is crucial for preventing errors when interacting with the instance immediately after component mount or during updates.

```javascript
// Check if gradient is initialized
if (instance.isInitialized) {
  // Safe to call methods
}
```

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

### Configure Mesh Gradient Options

Source: https://meshgradientweb.vercel.app/docs/api

This code illustrates how to define and use `MeshGradientOptions` to configure the appearance and behavior of a mesh gradient. Options include color definitions, animation speed, frequency, and static mode.

```javascript
import { MeshGradientOptions } from '@mesh-gradient/core';

const options: MeshGradientOptions = {
  colors: ['#000000', '#ffffff', '#000000', '#ffffff'],
  animationSpeed: 1.5,
  frequency: { x: 0.0001, y: 0.0002 },
  isStatic: false,
  pauseOnOutsideViewport: true
};
```

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

### Configure Mesh Gradient with Options in TypeScript

Source: https://meshgradientweb.vercel.app/docs/quick-start

Initializes the Mesh Gradient with custom configuration options, such as specifying colors. The options object should conform to the MeshGradientOptions type.

```typescript
import { type MeshGradientOptions } from '@mesh-gradient/core';

const options: MeshGradientOptions = {
  colors: ['#043D5D', '#032E46', '#23B684', '#0F595E'],
};

gradient.init('#canvas', options);
```

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

### MeshGradient Core Methods API

Source: https://meshgradientweb.vercel.app/docs/react/use-mesh-gradient

Provides a reference to the core methods available on the `MeshGradient` instance obtained via the `useMeshGradient` hook. These methods allow for full control over the gradient's lifecycle and behavior.

```javascript
// Initialize the gradient
instance.init(canvas, options)

// Update gradient options
instance.update(options)

// Play animation
instance.play()

// Pause animation
instance.pause()

// Destroy the gradient
instance.destroy()
```

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

### Basic MeshGradient Usage in React

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Demonstrates the basic import and usage of the MeshGradient component within a React application. It requires the '@mesh-gradient/react' library.

```javascript
import { MeshGradient } from '@mesh-gradient/react'
 
function App() {
  return (
    <MeshGradient 
      style={{ width: '300px', height: '200px' }} 
    />
  )
}
```

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

### TypeScript Usage with useMeshGradient Hook

Source: https://meshgradientweb.vercel.app/docs/react/use-mesh-gradient

Shows how to leverage TypeScript with the `useMeshGradient` hook for type safety. It demonstrates how the `instance` is correctly typed as `MeshGradient | null`, enabling autocompletion and compile-time checks.

```typescript
import { useMeshGradient } from '@mesh-gradient/react'
import type { MeshGradient } from '@mesh-gradient/core'
 
function TypedGradient() {
  const { instance } = useMeshGradient()
  
  // instance is properly typed as MeshGradient | null
  if (instance) {
    // TypeScript knows instance is MeshGradient here
    instance.init(/* ... */)
  }
}
```

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

### Control Mesh Gradient Lifecycle and Animation

Source: https://meshgradientweb.vercel.app/docs/api

This section details the core methods for managing a Mesh Gradient instance: `update` for applying new configurations, `destroy` for cleanup, and `play`/`pause` for controlling animation. It also covers `toggleAutoPause` for viewport-based animation control.

```javascript
const gradient = new MeshGradient();
gradient.init('#myCanvas');

// Update gradient with new options
gradient.update({ colors: ['#ff0000', '#00ff00', '#0000ff'] });

// Control animation
gradient.play();
gradient.pause();
gradient.toggleAutoPause(true);

// Destroy the gradient instance
gradient.destroy();
```

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

### Basic MeshGradient Usage in Vue

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Demonstrates the basic integration of the MeshGradient component within a Vue.js application. It shows how to import and use the component, setting basic styles for its dimensions.

```vue
<template>
  <MeshGradient :style="{ width: '300px', height: '200px' }" />
</template>

<script setup lang="ts">
import { MeshGradient } from '@mesh-gradient/vue'
</script>
```

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

### Initialize MeshGradient Instance in Vue

Source: https://meshgradientweb.vercel.app/docs/vue/use-mesh-gradient

Demonstrates basic usage of the `useMeshGradient` composable to create and access a MeshGradient instance within a Vue component. The instance is available after the component mounts and can be used for advanced control.

```vue
<template>
  <div>My Component</div>
</template>

<script setup lang="ts">
import { useMeshGradient } from '@mesh-gradient/vue'

const { instance } = useMeshGradient()

// instance is available after component mounts
// You can call methods on it when needed
</script>
```

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

### Custom MeshGradient Initialization with Canvas in Vue

Source: https://meshgradientweb.vercel.app/docs/vue/use-mesh-gradient

Shows how to use `useMeshGradient` with custom initialization logic. It binds the MeshGradient instance to a canvas element after the component mounts, allowing for specific configurations like colors and seed.

```vue
<template>
  <canvas ref="canvasRef" />
</template>

<script setup lang="ts">
import { useMeshGradient } from '@mesh-gradient/vue'
import { ref, onMounted } from 'vue'

const { instance } = useMeshGradient()
const canvasRef = ref<HTMLCanvasElement>()

onMounted(() => {
  if (!instance.value || !canvasRef.value) return
  
  // Custom initialization logic
  instance.value.init(canvasRef.value, {
    colors: ['#ff0080', '#0080ff', '#ff0080', '#0080ff'],
    seed: 42
  })
})
</script>
```

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

### Configuring MeshGradient with HTML Attributes

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Shows how to apply standard HTML attributes like className, style, and id to the MeshGradient component, allowing for styling and identification.

```html
<MeshGradient 
  className="rounded-lg shadow-lg"
  style={{ width: '100%', height: '300px' }}
  id="my-gradient"
/>
```

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

### Configuring Smooth Appearance for MeshGradient

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Shows how to configure the 'smooth' appearance with a specified duration for the MeshGradient component. This prop enhances the visual transition when the gradient initially appears.

```vue
<template>
  <MeshGradient 
    :options="{
      appearance: 'smooth',
      appearanceDuration: 500 // 500ms
    }" 
  />
</template>
```

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

### Enabling Smooth Transitions on MeshGradient Updates

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Demonstrates enabling smooth transitions between gradient updates using the 'transition' and 'transitionDuration' options. This prop ensures a seamless visual change when gradient properties are modified.

```vue
<template>
  <MeshGradient 
    :options="{
      transition: true,
      transitionDuration: 600 // 600ms
    }" 
  />
</template>
```

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

### Configure MeshGradient Options (TypeScript)

Source: https://meshgradientweb.vercel.app/docs/index

Defines the MeshGradientOptions object in TypeScript, specifying an array of colors for the gradient. This configuration can be directly applied to any MeshGradient instance or component.

```typescript
import { type MeshGradientOptions } from '@mesh-gradient/core';

const options: MeshGradientOptions = {
  colors: [
    "#8a519a",
    "#6101c1",
    "#e24097",
    "#f3121d"
  ]
};
```

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

### useMeshGradient Hook

Source: https://meshgradientweb.vercel.app/docs/react/use-mesh-gradient

The `useMeshGradient` hook creates and manages a `MeshGradient` instance, automatically handling its lifecycle and providing access to the core API.

```APIDOC
## `useMeshGradient()`

### Description
The `useMeshGradient` hook creates and manages a `MeshGradient` instance. It automatically handles the lifecycle of the gradient instance and provides access to the core MeshGradient API for advanced use cases.

### Method
`useMeshGradient()`

### Parameters
None

### Return Value
An object with the following property:
- `instance` (`MeshGradient | null`) - The MeshGradient instance or `null` if not yet initialized.

### Basic Usage Example
```javascript
import { useMeshGradient } from '@mesh-gradient/react'
 
function MyComponent() {
  const { instance } = useMeshGradient()
  
  // instance is available after component mounts
  // You can call methods on it when needed
  
  return <div>My Component</div>
}
```

### When to Use
Use `useMeshGradient` when you need:
  * **Direct access** to the MeshGradient instance
  * **Custom initialization logic** beyond the component’s automatic behavior
  * **Advanced control** over gradient lifecycle
  * **Integration** with other libraries or custom logic

### Lifecycle Management
The hook automatically:
  * Creates a new `MeshGradient` instance on mount
  * Destroys the instance when the component unmounts
  * Provides the instance through the `instance` property

### Advanced Usage Example
```javascript
import { useMeshGradient } from '@mesh-gradient/react'
import { useEffect, useRef } from 'react'
 
function AdvancedGradient() {
  const { instance } = useMeshGradient()
  const canvasRef = useRef(null)
  
  useEffect(() => {
    if (!instance || !canvasRef.current) return
    
    // Custom initialization logic
    instance.init(canvasRef.current, {
      colors: ['#ff0080', '#0080ff', '#ff0080', '#0080ff'],
      seed: 42
    })

  }, [instance, canvasRef])
  
  return <canvas ref={canvasRef} />
}
```

### Available Methods on Instance
When you have access to the `instance`, you can call these methods:

#### Core Methods
- `init(canvas, options)`: Initialize the gradient.
- `update(options)`: Update gradient options.
- `play()`: Play animation.
- `pause()`: Pause animation.
- `destroy()`: Destroy the gradient.

#### Properties
- `isInitialized`: Check if gradient is initialized.

### Performance Considerations
  * The hook creates a new instance on every component mount.
  * For frequently mounting/unmounting components, consider using a shared instance.
  * The instance is automatically destroyed on unmount, preventing memory leaks.
  * Use `instance.isInitialized` to check if it’s safe to call methods.

### When NOT to Use
Don’t use `useMeshGradient` if you:
  * Only need basic gradient display (use `<MeshGradient />` component instead).
  * Don’t need direct control over the gradient instance.
  * Want automatic canvas management and lifecycle handling.

### Comparison with `<MeshGradient />` Component
| Feature | `useMeshGradient` | `<MeshGradient />` |
|---|---|---|
| Canvas management | Manual | Automatic |
| Lifecycle control | Full control | Automatic |
| Setup complexity | Higher | Lower |
| Flexibility | High | Medium |
| Use case | Advanced/Integration | Basic display |

### TypeScript Support
The hook is fully typed and provides proper TypeScript support.
```
```

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

### Initialize MeshGradient Instance

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Initializes the gradient on a given HTML canvas element. Supports an optional smooth appearance animation with configurable duration. The element can be passed as a DOM element or a string selector.

```javascript
const gradient = new MeshGradient();

// Alternatively, you can pass the element as a string selector
const canvas = document.getElementById('gradient');

gradient.init(canvas, {
  appearance: 'smooth', // default is 'smooth'
  appearanceDuration: 300, // default is 300ms
});
```

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

### Using CSS Variables for MeshGradient Colors

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Demonstrates how to define CSS variables for gradient colors and enable their use in the MeshGradient component via the `cssVariablesFallback` option.

```css
:root {
  --mesh-gradient-color-1: #ff0080;
  --mesh-gradient-color-2: #0080ff;
  --mesh-gradient-color-3: #80ff00;
  --mesh-gradient-color-4: #ff8000;
}
```

```html
<MeshGradient 
  options={{
    cssVariablesFallback: true
  }}
/>
```

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

### Applying CSS Variables to MeshGradient

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Shows how to configure the MeshGradient component to utilize CSS variables for its colors, with `cssVariablesFallback` enabled. This allows dynamic theming through CSS.

```vue
<template>
  <MeshGradient 
    :options="{
      cssVariablesFallback: true
    }" 
  />
</template>
```

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

### Integrate Mesh Gradient with Vue Reactivity

Source: https://meshgradientweb.vercel.app/docs/vue/use-mesh-gradient

This snippet shows how to use the `useMeshGradient` composable within a Vue.js component. It demonstrates binding UI elements like sliders and checkboxes to control gradient properties such as animation speed and static mode. It also includes lifecycle hooks for initialization and watching for changes to update the gradient instance.

```html
<template>
  <div>
    <canvas ref="canvasRef" class="w-full h-64" />
    
    <div class="mt-4 space-y-2">
      <div>
        <label>Animation Speed: {{ animationSpeed.toFixed(1) }}</label>
        <input 
          v-model.number="animationSpeed" 
          type="range" 
          min="0.1" 
          max="3"
          step="0.1"
        />
      </div>
      
      <div>
        <label>
          <input v-model="isStatic" type="checkbox" />
          Static Mode
        </label>
      </div>
    </div>
  </div>
</template>
 
<script setup lang="ts">
import { useMeshGradient } from '@mesh-gradient/vue'
import { ref, onMounted, watch } from 'vue'
 
const { instance } = useMeshGradient()
const canvasRef = ref<HTMLCanvasElement>()
const animationSpeed = ref(1.0)
const isStatic = ref(false)
 
onMounted(() => {
  if (!instance.value || !canvasRef.value) return
  
  instance.value.init(canvasRef.value)
})
 
// Watch for changes and update gradient
watch([animationSpeed, isStatic], () => {
  if (!instance.value?.isInitialized) return
  
  instance.value.update({
    animationSpeed: animationSpeed.value,
    isStatic: isStatic.value
  })
})
</script>
```

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

### MeshGradient Update Callback (onUpdate)

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Demonstrates the use of the `onUpdate` callback prop, which is triggered whenever the gradient's options are updated, providing access to the instance for further actions.

```html
<MeshGradient 
  onUpdate={(instance) => {
    console.log('Gradient updated:', instance)
  }}
/>
```

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

### Responsive MeshGradient Styling

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Shows how to apply responsive Tailwind CSS classes to the MeshGradient component to adjust its size across different screen breakpoints.

```html
<MeshGradient 
  className="w-full h-64 md:h-96 lg:h-[500px]"
  options={{
    animationSpeed: 0.8
  }}
/>
```

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

### Configure MeshGradient CSS Variables Fallback

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Enables fallback to CSS variables for colors if no explicit colors are provided. This allows for easier theme management via CSS.

```typescript
const options: MeshGradientOptions = {
  cssVariablesFallback: true,
};
```

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

### Configure MeshGradient Pause Observer Options

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Provides custom options for the Intersection Observer used by `pauseOnOutsideViewport`. Allows fine-tuning of when the observer triggers.

```typescript
const options: MeshGradientOptions = {
  pauseObserverOptions: {
    root: document.body,
    rootMargin: '0px',
    threshold: 0.05
  },
};
```

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

### Initialize Mesh Gradient in TypeScript

Source: https://meshgradientweb.vercel.app/docs/quick-start

Imports the MeshGradient class and initializes a new gradient on a specified canvas element. By default, colors and seed are randomized.

```typescript
import { MeshGradient } from '@mesh-gradient/core';

const gradient = new MeshGradient();

gradient.init('#canvas');
```

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

### Update MeshGradient with New Options

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Updates an already initialized gradient with new configuration options. Supports a fade transition between the old and new states, with a configurable transition duration.

```javascript
const gradient = new MeshGradient();

gradient.init('#gradient'); // Initialize the gradient first

gradient.update({
  colors: ["#8a519a", "#6101c1", "#e24097", "#f3121d"],
  transition: true, // default is true
  transitionDuration: 300, // default is 300ms
});
```

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

### Handling MeshGradient Update Event (@update)

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Illustrates listening for the 'update' event, which is emitted whenever the MeshGradient's options are updated. This allows for reacting to configuration changes and accessing the updated gradient instance.

```vue
<template>
  <MeshGradient 
    @update="onGradientUpdate"
  />
</template>

<script setup lang="ts">
const onGradientUpdate = (instance) => {
  console.log('Gradient updated:', instance)
}
</script>
```

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

### MeshGradient with HTML Attributes

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Illustrates how to apply standard HTML attributes like 'class', 'style', and 'id' to the MeshGradient component for styling and identification.

```vue
<template>
  <MeshGradient 
    class="rounded-lg shadow-lg"
    :style="{ width: '100%', height: '300px' }"
    id="my-gradient"
  />
</template>
```

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

### Configure MeshGradient Static Mode

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Enables static mode, which disables animation for the gradient. This option is optimized for performance when animation is not required.

```typescript
const options: MeshGradientOptions = {
  isStatic: true, // No animation, better performance
};
```

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

### Configure MeshGradient Colors Option

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Sets the array of colors for the gradient. Colors should be provided as an array of strings in `#RRGGBB` or `#RGB` format. If omitted, random colors are used.

```typescript
const options: MeshGradientOptions = {
  colors: ['#8a519a', '#6101c1', '#e24097', '#f3121d'],
};
```

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

### Configure MeshGradient Resize Delay

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Sets a delay for gradient updates after the canvas is resized. This helps optimize performance by preventing frequent re-renders during resize operations.

```typescript
const options: MeshGradientOptions = {
  resizeDelay: 300, // 300ms delay after resize
};
```

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

### Control MeshGradient Animation Playback

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Provides methods to control the animation playback of the gradient. `pause()` stops the animation, and `play()` resumes it.

```javascript
const gradient = new MeshGradient();

gradient.pause(); // Pauses the gradient animation
gradient.play(); // Resumes the gradient animation
```

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

### Controlling MeshGradient Playback with isPaused

Source: https://meshgradientweb.vercel.app/docs/react/mesh-gradient

Illustrates how to control the animation of the MeshGradient component using the `isPaused` prop, toggling between playing and paused states via component state.

```javascript
import { useState } from 'react'
 
function App() {
  const [isPaused, setIsPaused] = useState(false)
 
  return (
    <div>
      <button onClick={() => setIsPaused(!isPaused)}>
        {isPaused ? 'Resume' : 'Pause'}
      </button>
      
      <MeshGradient 
        isPaused={isPaused}
        style={{ width: '300px', height: '200px' }}
      />
    </div>
  )
}
```

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

### Controlling MeshGradient Playback (Pause/Resume)

Source: https://meshgradientweb.vercel.app/docs/vue/mesh-gradient

Shows how to control the animation state of the MeshGradient component using the `isPaused` prop and a button to toggle it. This allows for pausing and resuming the gradient animation dynamically.

```vue
<template>
  <div>
    <button @click="togglePause">
      {{ isPaused ? 'Resume' : 'Pause' }}
    </button>
    
    <MeshGradient 
      :isPaused="isPaused"
      :style="{ width: '300px', height: '200px' }"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { MeshGradient } from '@mesh-gradient/vue'

const isPaused = ref(false)

const togglePause = () => {
  isPaused.value = !isPaused.value
}
</script>
```

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

### Configure MeshGradient Active Colors

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Determines which of the four gradient colors are currently visible. Each color can be individually enabled or disabled.

```typescript
const options: MeshGradientOptions = {
  activeColors: {
    1: true,  // First color is active
    2: false, // Second color is inactive
    3: true,  // Third color is active
    4: true,  // Fourth color is active
  },
};
```

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

### Configure MeshGradient Animation Speed

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Adjusts the animation speed multiplier. Higher values increase speed, while lower values decrease it. Performance is unaffected by this setting.

```typescript
const options: MeshGradientOptions = {
  animationSpeed: 1.5, // 1.5x faster than default
};
```

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

### Configure MeshGradient Frequency

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Sets the frequency for the gradient. This can be a single numerical value or an object specifying x, y, and delta properties for more granular control.

```typescript
const options: MeshGradientOptions = {
  // Single number
  frequency: 0.0002,
  
  // Or object with specific values
  frequency: {
    x: 0.00014,
    y: 0.00029,
    delta: 0.0001
  },
};
```

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

### Configure MeshGradient Pause on Outside Viewport

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Enables automatic pausing of the gradient animation when it scrolls out of the viewport. This feature utilizes the Intersection Observer API for efficiency.

```typescript
const options: MeshGradientOptions = {
  pauseOnOutsideViewport: true, // Pause when not visible
};
```

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

### Destroy MeshGradient Instance

Source: https://meshgradientweb.vercel.app/docs/advanced-usage

Destroys an initialized gradient instance to free up memory and prevent potential memory leaks, particularly useful in single-page applications.

```javascript
const gradient = new MeshGradient();

gradient.init('#gradient'); // Initialize the gradient

gradient.destroy();
```
Tokens:
Raw