### Install color4bg

Source: https://github.com/winterx/color4bg.js/blob/main/README.md

Installation commands for different package managers.

```bash
npm install color4bg
```

```bash
yarn add color4bg
```

```bash
pnpm add color4bg
```

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

### Basic Spinning Cube Example

Source: https://github.com/winterx/color4bg.js/blob/main/src/ogl/README.md

Renders a spinning white cube using Renderer, Camera, Transform, Box, Program, and Mesh. Requires basic setup for rendering and animation.

```javascript
import { Renderer, Camera, Transform, Box, Program, Mesh } from 'ogl';

{
    const renderer = new Renderer();
    const gl = renderer.gl;
    document.body.appendChild(gl.canvas);

    const camera = new Camera(gl);
    camera.position.z = 5;

    function resize() {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.perspective({
            aspect: gl.canvas.width / gl.canvas.height,
        });
    }
    window.addEventListener('resize', resize, false);
    resize();

    const scene = new Transform();

    const geometry = new Box(gl);

    const program = new Program(gl, {
        vertex: /* glsl */ `
            attribute vec3 position;

            uniform mat4 modelViewMatrix;
            uniform mat4 projectionMatrix;

            void main() {
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
            }
        `,
        fragment: /* glsl */ `
            void main() {
                gl_FragColor = vec4(1.0);
            }
        `,
    });

    const mesh = new Mesh(gl, { geometry, program });
    mesh.setParent(scene);

    requestAnimationFrame(update);
    function update(t) {
        requestAnimationFrame(update);

        mesh.rotation.y -= 0.04;
        mesh.rotation.x += 0.03;

        renderer.render({ scene, camera });
    }
}
```

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

### Install @color4bg/react with npm

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Use npm to install the React package. This package requires React 16.8.0 or higher.

```bash
npm install @color4bg/react
```

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

### React Integration

Source: https://github.com/winterx/color4bg.js/blob/main/README.md

Installation and usage of the React component wrapper.

```bash
npm install @color4bg/react
```

```jsx
import { Color4Bg } from '@color4bg/react'

function App() {
  return (
    <div style={{ width: '100%', height: '100vh', position: 'relative' }}>
      <Color4Bg style="abstract-shape" />
      <h1>Your content here</h1>
    </div>
  )
}
```

```jsx
<Color4Bg 
  style="aesthetic-fluid"
  colors={["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"]}
  loop={true}
  seed={1000}
/>
```

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

### Install @color4bg/react with yarn

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Use yarn to install the React package. This package requires React 16.8.0 or higher.

```bash
yarn add @color4bg/react
```

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

### Install @color4bg/react with pnpm

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Use pnpm to install the React package. This package requires React 16.8.0 or higher.

```bash
pnpm add @color4bg/react
```

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

### Install OGL via Package Managers

Source: https://github.com/winterx/color4bg.js/blob/main/src/ogl/README.md

Use npm or yarn to add the OGL library to your project dependencies.

```bash
npm i ogl
```

```bash
yarn add ogl
```

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

### Import from Node Modules

Source: https://github.com/winterx/color4bg.js/blob/main/src/ogl/README.md

Import components directly from the installed 'ogl' node module.

```javascript
import { ... } from 'ogl';
```

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

### Color4Bg Component Usage

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Demonstrates how to install and use the Color4Bg component in a React application.

```APIDOC
## Installation

Install the React package using npm, yarn, or pnpm:

```bash
npm install @color4bg/react
```

```bash
yarn add @color4bg/react
```

```bash
pnpm add @color4bg/react
```

**Note:** Requires React 16.8.0 or higher.

## Basic Usage

Import and use the `Color4Bg` component within a container element.

```jsx
import { Color4Bg } from '@color4bg/react'

function App() {
  return (
    <div id="container" style={{ width: '100%', height: '100vh' }}>
      <Color4Bg style="abstract-shape" />
      <h1>Your content here</h1>
    </div>
  )
}
```

## Props

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `style` | `string` | ✅ Yes | - | Background type (see available styles below) |
| `colors` | `string[]` | ❌ No | `[]` | Array of up to 6 hexadecimal color values |
| `seed` | `number` | ❌ No | `1000` | Random seed for consistent patterns |
| `loop` | `boolean` | ❌ No | `false` | Whether the background should animate in a loop |
| `options` | `object` | ❌ No | `{}` | Background-specific options |

## Available Background Styles

- `abstract-shape`
- `aesthetic-fluid`
- `ambient-light`
- `big-blob`
- `blur-dot`
- `blur-gradient`
- `chaos-waves`
- `curve-gradient`
- `grid-array`
- `random-cubes`
- `step-gradient`
- `swirling-curves`
- `triangles-mosaic`
- `wavy-waves`

## Examples

### With Custom Colors

```jsx
<Color4Bg 
  style="aesthetic-fluid"
  colors={["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"]}
/>
```

### With Animation Loop and Seed

```jsx
<Color4Bg 
  style="chaos-waves"
  loop={true}
  seed={1000}
/>
```

### With Custom Options

```jsx
<Color4Bg 
  style="abstract-shape"
  options={{
    noise: 0.1,
    wavy: 15
  }}
/>
```

### Options Examples for Specific Styles

**abstract-shape:**
```jsx
<Color4Bg 
  style="abstract-shape"
  options={{
    noise: 0.1,  // Noise amount (0.0 - 0.5)
    wavy: 15     // Wavy effect strength (0 - 20)
  }}
/>
```

**chaos-waves:**
```jsx
<Color4Bg 
  style="chaos-waves"
  options={{
    noise: 0.1,  // Noise amount
    speed: 5     // Animation speed (1 - 20)
  }}
/>
```

**grid-array:**
```jsx
<Color4Bg 
  style="grid-array"
  options={{
    scale: 100,      // Grid scale (1 - 200)
    amplitude: 0.5,  // Wave amplitude (0.0 - 5.0)
    speed: 5         // Animation speed (1 - 10)
  }}
/>
```

## Important Notes

1.  **Parent Container**: Ensure the parent container has a defined size (width and height).
2.  **Position**: The parent container will automatically get `position: relative` if no position style is set.
3.  **Component Placement**: Place `<Color4Bg />` as a child of the desired background container.
4.  **Dynamic Updates**: The component automatically updates when props like `colors`, `seed`, `loop`, and `options` change.
```

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

### Quick Start: Basic Color4Bg Component

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Integrate the Color4Bg component into your React app. Ensure the parent container has defined dimensions.

```jsx
import { Color4Bg } from '@color4bg/react'

function App() {
  return (
    <div id="container" style={{ width: '100%', height: '100vh' }}>
      <Color4Bg style="abstract-shape" />
      <h1>Your content here</h1>
    </div>
  )
}
```

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

### HTML Script Tag Usage for Color4bg

Source: https://context7.com/winterx/color4bg.js/llms.txt

This example shows how to include and use color4bg in non-module environments via script tags. It initializes an AestheticFluidBg instance and sets up an event listener to regenerate the pattern on click.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #background-container {
      width: 100vw;
      height: 100vh;
      position: relative;
    }
    .content {
      position: relative;
      z-index: 1;
      padding: 40px;
      color: white;
    }
  </style>
</head>
<body>
  <div id="background-container">
    <div class="content">
      <h1>My Website</h1>
      <p>Beautiful WebGL background</p>
    </div>
  </div>

  <script type="module">
    import { AestheticFluidBg } from './build/jsm/AestheticFluidBg.module.js'

    const bg = new AestheticFluidBg({
      dom: "background-container",
      colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"],
      seed: Date.now(),
      loop: true
    })

    // Regenerate on click
    document.querySelector('.content').addEventListener('click', () => {
      bg.reset(Math.floor(Math.random() * 10000))
    })
  </script>
</body>
</html>

```

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

### ColorBg Base Class

Source: https://context7.com/winterx/color4bg.js/llms.txt

The base ColorBg class handles WebGL initialization, canvas management, color palette setup, and the animation loop. All specific background classes extend this base.

```APIDOC
## ColorBg Base Class

### Description
The `ColorBg` class is the base class for all background types. It handles WebGL initialization, canvas management, color palette setup, and the animation loop. All specific background classes extend this base.

### Configuration Options

- **dom** (string) - Required - ID of DOM element to mount canvas (without #)
- **colors** (Array<string>) - Optional - Up to 6 hex colors for the palette
- **seed** (number) - Optional - Random seed for consistent patterns
- **loop** (boolean) - Optional - Enable animation loop

### Instance Methods

- **colors(newColors: Array<string>)**: Updates the color palette.
- **reset(newSeed?: number)**: Resets the background with an optional new seed.
- **destroy()**: Cleans up and removes the canvas.
```

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

### Import from Local Project

Source: https://github.com/winterx/color4bg.js/blob/main/src/ogl/README.md

Import necessary components from the local project's entry point.

```javascript
import { ... } from './path/to/src/index.js';
```

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

### Initialize AestheticFluidBg

Source: https://github.com/winterx/color4bg.js/blob/main/README.md

Import and instantiate the AestheticFluidBg class with custom configuration.

```javascript
import { AestheticFluidBg } from "color4bg"
```

```javascript
let colorbg = new AestheticFluidBg({
    dom: "box",
    colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"],
    seed: 1000,
    loop: true
})
```

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

### Initialize AmbientLightBg

Source: https://github.com/winterx/color4bg.js/blob/main/examples/demo-embed-js.html

Instantiates the AmbientLightBg class with specific colors, seed, and loop settings.

```javascript
let colorbg = new Color4Bg.AmbientLightBg({ dom: "box", colors: ["#F00911", "#F3AA00", "#F6EE0B", "#39E90D", "#195ED2", "#F00911"], seed: 1000, loop: true })
```

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

### Initialize CurveGradientBg

Source: https://github.com/winterx/color4bg.js/blob/main/examples/demo-module-js.html

Imports necessary modules and initializes the background with specific color palettes and animation settings.

```javascript
import { Colors, Options, Bgs } from "./data.js" import { UI, getBgTypeFromUrl } from "./ui.js" // import { CurveGradientBg } from "../build/jsm/CurveGradientBg.module.js" import { CurveGradientBg } from "../src/color4bg/AbstractBackground/CurveGradientBg.js" const palette = Colors["pastelglossy"] let colorbg = getBgTypeFromUrl(Bgs) if (!colorbg) { colorbg = new CurveGradientBg({ dom: "box", // DOM that you want to add color background colors: ["#FE8BFC", "#BD9FFB", "#8EDBFD", "#C4F5EF", "#E7F9FE", "#E9FFE0"], // 6 Hex colors seed: 1000, // Random seed loop: true, // Whether the background would be loop animated, }) } const ui = new UI(Colors, Bgs, Options, colorbg, palette)
```

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

### Additional Background Types Usage

Source: https://context7.com/winterx/color4bg.js/llms.txt

Demonstrates importing and initializing additional background types like BlurGradientBg and TrianglesMosaicBg.

```javascript
import {
  BlurDotBg,         // Blurred dot patterns
  BlurGradientBg,    // Blurred gradient effects
  StepGradientBg,    // Step gradient transitions
  TrianglesMosaicBg, // Triangle mosaic patterns
  WavyWavesBg,       // Wavy wave patterns
  RandomCubesBg      // Random 3D cube patterns
} from "color4bg"

// BlurGradientBg with noise option
const blurGradient = new BlurGradientBg({
  dom: "blur-container",
  colors: ["#FE8BFC", "#BD9FFB", "#8EDBFD"],
  seed: 7000,
  loop: false
})
blurGradient.update("noise", 0.2)

// TrianglesMosaicBg with animation
const triangles = new TrianglesMosaicBg({
  dom: "mosaic-container",
  colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"],
  seed: 8000,
  loop: true
})
triangles.update("noise", 0.15)
triangles.update("speed", 5)
```

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

### Initialize and Customize AmbientLightBg

Source: https://context7.com/winterx/color4bg.js/llms.txt

Creates ambient lighting effects with controls for brightness, blur, and background darkness.

```javascript
import { AmbientLightBg } from "color4bg"

const lightBg = new AmbientLightBg({
  dom: "ambient-section",
  colors: ["#F00911", "#F3AA00", "#F6EE0B", "#39E90D", "#195ED2", "#F00911"],
  seed: 6000,
  loop: true
})

// Customize lighting parameters
lightBg.update("speed", 3)           // Animation speed (1 - 10)
lightBg.update("pattern scale", 0.8) // Pattern scale (0.0 - 1.0)
lightBg.update("edge blur", 0.2)     // Edge blur amount (0.0 - 1.0)
lightBg.update("brightness", 0.4)    // Shape brightness (0.0 - 1.2)
lightBg.update("darkness", 0.1)      // Background darkness (0.0 - 1.0)
```

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

### Import Available Background Classes

Source: https://github.com/winterx/color4bg.js/blob/main/README.md

List of all available background generator classes provided by the library.

```javascript
import {
  AbstractShapeBg,
  AestheticFluidBg,
  AmbientLightBg,
  BigBlobBg,
  BlurDotBg,
  BlurGradientBg,
  ChaosWavesBg,
  CurveGradientBg,
  GridArrayBg,
  RandomCubesBg,
  StepGradientBg,
  SwirlingCurvesBg,
  TrianglesMosaicBg,
  WavyWavesBg,
  ColorBg  // Base class
} from "color4bg"
```

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

### Initialize and Customize GridArrayBg

Source: https://context7.com/winterx/color4bg.js/llms.txt

Creates an animated grid pattern and demonstrates how to update its visual properties using the update method.

```javascript
import { GridArrayBg } from "color4bg"

const gridBg = new GridArrayBg({
  dom: "grid-section",
  colors: ["#007FFE", "#3099FE", "#60B2FE", "#90CCFE", "#C0E5FE", "#F0FFFE"],
  seed: 3000,
  loop: true
})

// Extensive customization options
gridBg.update("scale", 100)        // Grid scale (1 - 200)
gridBg.update("u_w", 0.8)          // Cell width (0.1 - 0.99)
gridBg.update("u_h", 0.8)          // Cell height (0.1 - 0.99)
gridBg.update("amplitude", 0.5)    // Wave amplitude (0.0 - 5.0)
gridBg.update("radius", 0.1)       // Corner radius (0.0 - 1.0)
gridBg.update("borderwidth", 0.02) // Border width (0.01 - 0.1)
gridBg.update("rotateCanvas", 45)  // Canvas rotation (0 - 360)
gridBg.update("rotateUnit", 30)    // Unit rotation (0 - 360)
gridBg.update("speed", 5)          // Animation speed (1 - 10)
```

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

### Import from CDN

Source: https://github.com/winterx/color4bg.js/blob/main/src/ogl/README.md

Import components from a CDN using jsdelivr, unpkg, or skypack. It's recommended to specify a version to avoid breaking changes.

```javascript
import { ... } from 'https://cdn.jsdelivr.net/npm/ogl';
```

```javascript
import { ... } from 'https://unpkg.com/ogl';
```

```javascript
import { ... } from 'https://cdn.skypack.dev/ogl';
```

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

### Initialize and Configure ColorBg Base Class

Source: https://context7.com/winterx/color4bg.js/llms.txt

The base class for all background types, providing shared configuration for DOM mounting, color palettes, and animation loops.

```javascript
import { ColorBg } from "color4bg"

// Base configuration options available for all background types
const config = {
  dom: "container",        // ID of DOM element to mount canvas (without #)
  colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"], // Up to 6 hex colors
  seed: 1000,              // Random seed for consistent patterns
  loop: true               // Enable animation loop
}

// Instance methods available on all background types:
// colorbg.colors(["#FF0000", "#00FF00", ...]) - Update color palette
// colorbg.reset(newSeed)                       - Reset with optional new seed
// colorbg.destroy()                            - Clean up and remove canvas
```

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

### Initialize and Customize CurveGradientBg

Source: https://context7.com/winterx/color4bg.js/llms.txt

Generates a curved gradient pattern with configurable noise, speed, and scale.

```javascript
import { CurveGradientBg } from "color4bg"

const curveBg = new CurveGradientBg({
  dom: "curve-section",
  colors: ["#FE8BFC", "#BD9FFB", "#8EDBFD", "#C4F5EF", "#E7F9FE", "#E9FFE0"],
  seed: 5000,
  loop: true
})

// Adjust gradient curve parameters
curveBg.update("noise", 0.1)   // Noise amount (0.0 - 0.5)
curveBg.update("speed", 5)     // Animation speed (1 - 20)
curveBg.update("scale", 2.0)   // Pattern scale (0.01 - 4.0)
```

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

### Full-Screen Shader with Custom Geometry

Source: https://github.com/winterx/color4bg.js/blob/main/src/ogl/README.md

Creates a full-screen shader without a scene graph or camera, demonstrating custom geometry creation. Includes vertex and fragment shaders with time-based color manipulation.

```javascript
import { Renderer, Geometry, Program, Mesh } from 'ogl';

{
    const renderer = new Renderer({
        width: window.innerWidth,
        height: window.innerHeight,
    });
    const gl = renderer.gl;
    document.body.appendChild(gl.canvas);

    // Triangle that covers viewport, with UVs that still span 0 > 1 across viewport
    const geometry = new Geometry(gl, {
        position: { size: 2, data: new Float32Array([-1, -1, 3, -1, -1, 3]) },
        uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) },
    });
    // Alternatively, you could use the Triangle class.

    const program = new Program(gl, {
        vertex: /* glsl */ `
            attribute vec2 uv;
            attribute vec2 position;

            varying vec2 vUv;

            void main() {
                vUv = uv;
                gl_Position = vec4(position, 0, 1);
            }
        `,
        fragment: /* glsl */ `
            precision highp float;

            uniform float uTime;

            varying vec2 vUv;

            void main() {
                gl_FragColor.rgb = vec3(0.8, 0.7, 1.0) + 0.3 * cos(vUv.xyx + uTime);
                gl_FragColor.a = 1.0;
            }
        `,
        uniforms: {
            uTime: { value: 0 },
        },
    });

    const mesh = new Mesh(gl, { geometry, program });

    requestAnimationFrame(update);
    function update(t) {
        requestAnimationFrame(update);

        program.uniforms.uTime.value = t * 0.001;

        // Don't need a camera if camera uniforms aren't required
        renderer.render({ scene: mesh });
    }
}
```

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

### Color4Bg with Animation Loop and Seed

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Enable animation looping and set a specific seed for consistent pattern generation. The `loop` prop defaults to `false` and `seed` to `1000`.

```jsx
import { Color4Bg } from '@color4bg/react'

function MyComponent() {
  return (
    <div className="container">
      <Color4Bg 
        style="chaos-waves"
        loop={true}
        seed={1000}
      />
    </div>
  )
}
```

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

### Initialize and Customize SwirlingCurvesBg

Source: https://context7.com/winterx/color4bg.js/llms.txt

Creates a swirling curve pattern with adjustable density and scale parameters.

```javascript
import { SwirlingCurvesBg } from "color4bg"

const swirlingBg = new SwirlingCurvesBg({
  dom: "swirl-container",
  colors: ["#FE8BFC", "#BD9FFB", "#8EDBFD", "#C4F5EF", "#E7F9FE", "#E9FFE0"],
  seed: 4000,
  loop: true
})

// Customize swirling effect
swirlingBg.update("noise", 0.1)    // Noise level (0.0 - 0.5)
swirlingBg.update("speed", 0.5)    // Animation speed (0.1 - 5.0)
swirlingBg.update("density", 1500) // Curve density (100 - 2000)
swirlingBg.update("scale", 8.0)    // Pattern scale (0.1 - 50)
```

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

### Implement AbstractShapeBg with Wavy Effects

Source: https://context7.com/winterx/color4bg.js/llms.txt

Creates abstract shapes with distortion effects. Supports dynamic updates to noise and wavy parameters at runtime.

```javascript
import { AbstractShapeBg } from "color4bg"

const bg = new AbstractShapeBg({
  dom: "hero-section",
  colors: ["#007FFE", "#3099FE", "#60B2FE", "#90CCFE", "#C0E5FE", "#F0FFFE"],
  seed: 42,
  loop: true,
  options: {
    noise: 0.1   // Noise amount (0.0 - 0.5)
  }
})

// Update options dynamically
bg.update("noise", 0.25)  // Increase noise effect
bg.update("wavy", 15)     // Adjust wavy distortion (0 - 20)

// Change colors at runtime
bg.colors(["#FF6B6B", "#4ECDC4", "#45B7D1", "#96CEB4", "#FFEAA7", "#DDA0DD"])

// Reset pattern with new seed
bg.reset(999)

// Cleanup when done
bg.destroy()
```

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

### Color4Bg Options for chaos-waves style

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Customize the 'chaos-waves' background with options for `noise` and `speed`. The `speed` parameter ranges from 1 to 20.

```jsx
<Color4Bg 
  style="chaos-waves"
  options={{
    noise: 0.1,  // Noise amount
    speed: 5     // Animation speed (1 - 20)
  }}
/>
```

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

### Implement full page background

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Configures the component to cover the entire viewport while maintaining content layering with z-index.

```jsx
import { Color4Bg } from '@color4bg/react'

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh', position: 'relative' }}>
      <Color4Bg style="aesthetic-fluid" loop={true} />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <h1>Your Content</h1>
      </div>
    </div>
  )
}
```

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

### Implement AestheticFluidBg Patterns

Source: https://context7.com/winterx/color4bg.js/llms.txt

Generates fluid patterns with blurred dots. Use the update method to adjust the scale of the wave effect.

```javascript
import { AestheticFluidBg } from "color4bg"

const fluidBg = new AestheticFluidBg({
  dom: "background",
  colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"],
  seed: 1000,
  loop: true,
  radius_inner: 0.1,  // Inner radius of blur dots
  radius_outer: 0.3   // Outer radius of blur dots
})

// Adjust the wave magnitude/scale
fluidBg.update("scale", 0.2)  // Scale range: 0.01 - 0.3
```

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

### Update Color4Bg props dynamically

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Demonstrates how to trigger background updates by modifying the seed and colors state variables.

```jsx
import { useState } from 'react'
import { Color4Bg } from '@color4bg/react'

function MyComponent() {
  const [seed, setSeed] = useState(1000)
  const [colors, setColors] = useState(["#FF0000", "#00FF00"])

  return (
    <div className="container">
      <Color4Bg 
        style="abstract-shape"
        seed={seed}
        colors={colors}
        loop={true}
      />
      <button onClick={() => setSeed(Math.random() * 10000)}>
        Change Seed
      </button>
      <button onClick={() => setColors(["#0000FF", "#FFFF00"])}>
        Change Colors
      </button>
    </div>
  )
}
```

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

### React Component Integration

Source: https://context7.com/winterx/color4bg.js/llms.txt

Shows basic and advanced usage of the Color4Bg React component for lifecycle-managed background rendering.

```jsx
import { Color4Bg } from '@color4bg/react'

// Basic usage - component mounts canvas to parent container
function HeroSection() {
  return (
    <div style={{ width: '100%', height: '100vh', position: 'relative' }}>
      <Color4Bg style="aesthetic-fluid" />
      <div style={{ position: 'relative', zIndex: 1 }}>
        <h1>Welcome</h1>
      </div>
    </div>
  )
}

// Full configuration with all props
function AdvancedBackground() {
  return (
    <div style={{ width: '100%', height: '500px' }}>
      <Color4Bg
        style="abstract-shape"
        colors={["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"]}
        seed={1000}
        loop={true}
        options={{
          noise: 0.1,
          wavy: 15
        }}
      />
    </div>
  )
}
```

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

### Color4Bg Options for grid-array style

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Adjust the 'grid-array' background using options for `scale`, `amplitude`, and `speed`. `scale` is between 1-200, `amplitude` between 0.0-5.0, and `speed` between 1-10.

```jsx
<Color4Bg 
  style="grid-array"
  options={{
    scale: 100,      // Grid scale (1 - 200)
    amplitude: 0.5,  // Wave amplitude (0.0 - 5.0)
    speed: 5         // Animation speed (1 - 10)
  }}
/>
```

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

### Implement ChaosWavesBg Patterns

Source: https://context7.com/winterx/color4bg.js/llms.txt

Generates overlapping wave patterns. Parameters like noise and animation speed can be tuned via the update method.

```javascript
import { ChaosWavesBg } from "color4bg"

const wavesBg = new ChaosWavesBg({
  dom: "waves-container",
  colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"],
  seed: 1500,
  loop: true
})

// Adjust wave parameters
wavesBg.update("noise", 0.3)   // Noise level (0.0 - 0.5)
wavesBg.update("speed", 10)    // Animation speed (1 - 20)
```

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

### Implement section background

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Applies a background to a specific container element with defined dimensions and custom color palettes.

```jsx
import { Color4Bg } from '@color4bg/react'

function Section() {
  return (
    <section style={{ width: '100%', height: '500px', position: 'relative' }}>
      <Color4Bg 
        style="curve-gradient"
        colors={["#FE8BFC", "#BD9FFB", "#8EDBFD"]}
      />
      <div style={{ position: 'relative', zIndex: 1, padding: '2rem' }}>
        <h2>Section Title</h2>
        <p>Section content...</p>
      </div>
    </section>
  )
}
```

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

### CSS Styles for Color4Bg Demo

Source: https://github.com/winterx/color4bg.js/blob/main/examples/demo-embed-js.html

Required CSS for layout and scrollbar styling of the background list container.

```css
html, body { width: 100%; height: 100%; } .bg-item { margin-bottom: 1rem; width: 100%; } .bg-item img { display: block; } .bg-item .title { font-size: 14px; } #bg_list::-webkit-scrollbar { width: 5px; } #bg_list::-webkit-scrollbar-track { margin: 20px; } #bg_list::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 4px; } .colors-list-box { transform-origin: 100% 0; transform: scale(0); opacity: 0; } .colors-list-box.show { transform: scale(1); opacity: 1; }
```

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

### Color4Bg Options for abstract-shape style

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Configure the 'abstract-shape' background with specific options. `noise` controls the noise amount (0.0 - 0.5) and `wavy` adjusts the wave effect strength (0 - 20).

```jsx
<Color4Bg 
  style="abstract-shape"
  options={{
    noise: 0.1,  // Noise amount (0.0 - 0.5)
    wavy: 15     // Wavy effect strength (0 - 20)
  }}
/>
```

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

### React Dynamic Background Component

Source: https://context7.com/winterx/color4bg.js/llms.txt

This React component demonstrates dynamic prop updates for interactive backgrounds using the @color4bg/react package. It allows for randomization of patterns, animation control, and color preset selection.

```jsx
import { useState } from 'react'
import { Color4Bg } from '@color4bg/react'

function InteractiveBackground() {
  const [seed, setSeed] = useState(1000)
  const [loop, setLoop] = useState(true)
  const [colors, setColors] = useState([
    "#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"
  ])

  const colorPresets = {
    pastel: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"],
    vivid: ["#F00911", "#F3AA00", "#F6EE0B", "#39E90D", "#195ED2", "#F00911"],
    blue: ["#007FFE", "#3099FE", "#60B2FE", "#90CCFE", "#C0E5FE", "#F0FFFE"],
    glossy: ["#FE8BFC", "#BD9FFB", "#8EDBFD", "#C4F5EF", "#E7F9FE", "#E9FFE0"]
  }

  return (
    <div style={{ width: '100%', height: '100vh', position: 'relative' }}>
      <Color4Bg
        style="chaos-waves"
        colors={colors}
        seed={seed}
        loop={loop}
        options={{ noise: 0.15, speed: 5 }}
      />

      <div style={{ position: 'relative', zIndex: 1, padding: '20px' }}>
        <button onClick={() => setSeed(Math.floor(Math.random() * 10000))}>
          Randomize Pattern
        </button>
        <button onClick={() => setLoop(!loop)}>
          {loop ? 'Stop' : 'Start'} Animation
        </button>
        <button onClick={() => setColors(colorPresets.vivid)}>
          Vivid Colors
        </button>
        <button onClick={() => setColors(colorPresets.blue)}>
          Blue Gradient
        </button>
      </div>
    </div>
  )
}

```

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

### Implement BigBlobBg 3D Shapes

Source: https://context7.com/winterx/color4bg.js/llms.txt

Renders large 3D blob shapes with morphing deformations. The reset method generates new random blob configurations.

```javascript
import { BigBlobBg } from "color4bg"

const blobBg = new BigBlobBg({
  dom: "main-content",
  colors: ["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"],
  seed: 2500,
  loop: true
})

// Blob automatically animates when loop is true
// Reset creates new random blob deformations
blobBg.reset(Math.floor(Math.random() * 10000))
```

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

### ChaosWavesBg

Source: https://context7.com/winterx/color4bg.js/llms.txt

Generates chaotic, overlapping wave patterns with customizable noise and animation speed.

```APIDOC
## ChaosWavesBg

### Description
Generates chaotic, overlapping wave patterns with customizable noise and animation speed.

### Constructor Options

- **dom** (string) - Required - ID of DOM element to mount canvas (without #)
- **colors** (Array<string>) - Optional - Up to 6 hex colors for the palette
- **seed** (number) - Optional - Random seed for consistent patterns
- **loop** (boolean) - Optional - Enable animation loop

### Instance Methods

- **update(key: string, value: any)**: Updates specific options dynamically (e.g., `noise`, `speed`).
- **reset(newSeed?: number)**: Resets the background with an optional new seed.
- **destroy()**: Cleans up and removes the canvas.
```

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

### Color4Bg with Custom Options for abstract-shape

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Apply custom options to tailor the 'abstract-shape' background style. Options like `noise` and `wavy` can be adjusted.

```jsx
import { Color4Bg } from '@color4bg/react'

function MyComponent() {
  return (
    <div className="container">
      <Color4Bg 
        style="abstract-shape"
        options={{
          noise: 0.1,
          wavy: 15
        }}
      />
    </div>
  )
}
```

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

### CSS Styling for Background Containers

Source: https://github.com/winterx/color4bg.js/blob/main/examples/demo-module-js.html

Defines the layout and scrollbar appearance for the background list and visibility transitions for UI boxes.

```css
html, body { width: 100%; height: 100%; } #bg_list::-webkit-scrollbar { width: 5px; } #bg_list::-webkit-scrollbar-track { margin: 20px; } #bg_list::-webkit-scrollbar-thumb { background-color: #e5e7eb; border-radius: 4px; } .colors-list-box { display: none; transform-origin: 100% 0; transform: scale(0); opacity: 0; } .colors-list-box.show { transform: scale(1); opacity: 1; } .options-list-box { display: none; transform-origin: 100% 0; transform: scale(0); opacity: 0; } .options-list-box.show { transform: scale(1); opacity: 1; }
```

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

### Basic Color4Bg Component Usage

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Place the Color4Bg component within the desired container. The component will automatically mount a canvas to its parent.

```jsx
import { Color4Bg } from '@color4bg/react'

function MyComponent() {
  return (
    <div className="container">
      <Color4Bg style="abstract-shape" />
      {/* Your content */}
    </div>
  )
}
```

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

### BigBlobBg

Source: https://context7.com/winterx/color4bg.js/llms.txt

Creates large 3D blob shapes using sphere geometry with morphing deformations. Features dynamic lighting and fluid texture mapping.

```APIDOC
## BigBlobBg

### Description
Creates large 3D blob shapes using sphere geometry with morphing deformations. Features dynamic lighting and fluid texture mapping.

### Constructor Options

- **dom** (string) - Required - ID of DOM element to mount canvas (without #)
- **colors** (Array<string>) - Optional - Up to 6 hex colors for the palette
- **seed** (number) - Optional - Random seed for consistent patterns
- **loop** (boolean) - Optional - Enable animation loop

### Instance Methods

- **reset(newSeed?: number)**: Resets the background with an optional new seed.
- **destroy()**: Cleans up and removes the canvas.
```

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

### AbstractShapeBg

Source: https://context7.com/winterx/color4bg.js/llms.txt

Creates abstract shapes with a wavy distortion effect and optional noise. Uses canvas-based shape generation with WebGL rendering.

```APIDOC
## AbstractShapeBg

### Description
Creates abstract shapes with a wavy distortion effect and optional noise. Uses canvas-based shape generation with WebGL rendering.

### Constructor Options

- **dom** (string) - Required - ID of DOM element to mount canvas (without #)
- **colors** (Array<string>) - Optional - Up to 6 hex colors for the palette
- **seed** (number) - Optional - Random seed for consistent patterns
- **loop** (boolean) - Optional - Enable animation loop
- **options** (object) - Optional - Specific options for AbstractShapeBg:
  - **noise** (number) - Optional - Noise amount (0.0 - 0.5)

### Instance Methods

- **update(key: string, value: any)**: Updates specific options dynamically (e.g., `noise`, `wavy`).
- **colors(newColors: Array<string>)**: Updates the color palette.
- **reset(newSeed?: number)**: Resets the background with an optional new seed.
- **destroy()**: Cleans up and removes the canvas.
```

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

### Color4Bg with Custom Colors

Source: https://github.com/winterx/color4bg.js/blob/main/packages/react/README.md

Customize the background with an array of up to 6 hexadecimal color values. The component supports dynamic updates to this prop.

```jsx
import { Color4Bg } from '@color4bg/react'

function MyComponent() {
  return (
    <div className="container">
      <Color4Bg 
        style="aesthetic-fluid"
        colors={["#D1ADFF", "#98D69B", "#FAE390", "#FFACD8", "#7DD5FF", "#D1ADFF"]}
      />
    </div>
  )
}
```

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

### AestheticFluidBg

Source: https://context7.com/winterx/color4bg.js/llms.txt

Generates smooth, fluid patterns with blurred color dots and wavy texture distortion. Creates a modern, glossy aesthetic.

```APIDOC
## AestheticFluidBg

### Description
Generates smooth, fluid patterns with blurred color dots and wavy texture distortion. Creates a modern, glossy aesthetic.

### Constructor Options

- **dom** (string) - Required - ID of DOM element to mount canvas (without #)
- **colors** (Array<string>) - Optional - Up to 6 hex colors for the palette
- **seed** (number) - Optional - Random seed for consistent patterns
- **loop** (boolean) - Optional - Enable animation loop
- **radius_inner** (number) - Optional - Inner radius of blur dots
- **radius_outer** (number) - Optional - Outer radius of blur dots

### Instance Methods

- **update(key: string, value: any)**: Updates specific options dynamically (e.g., `scale`).
- **colors(newColors: Array<string>)**: Updates the color palette.
- **reset(newSeed?: number)**: Resets the background with an optional new seed.
- **destroy()**: Cleans up and removes the canvas.
```

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