### Use DebugLayerMaterial for Real-time Layer Parameter Tweaking in JSX

Source: https://context7.com/pmndrs/lamina/llms.txt

Introduces DebugLayerMaterial, a wrapper that provides a GUI for adjusting layer parameters live. This example shows how to replace LayerMaterial with DebugLayerMaterial and includes Depth and Fresnel layers for demonstration.

```jsx
import { DebugLayerMaterial, Depth, Fresnel } from 'lamina'

function DebugMesh() {
  return (
    <mesh>
      <sphereGeometry args={[1, 64, 64]} />
      <DebugLayerMaterial color="#ffffff" lighting="physical">
        <Depth
          colorA="#810000"
          colorB="#ffd0d0"
          alpha={0.5}
          mode="multiply"
          near={0}
          far={2}
          origin={[1, 1, 1]}
        />
        <Fresnel
          color="#ffffff"
          intensity={2}
          power={3}
          mode="screen"
        />
      </DebugLayerMaterial>
    </mesh>
  )
}

```

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

### Create LayerMaterial with Depth Layer in Vanilla JavaScript

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Shows how to use Lamina's LayerMaterial and Depth layer with vanilla Three.js. This example creates a sphere mesh with a layered material, defining properties and layers programmatically. It highlights the need for color encoding for accurate color representation.

```javascript
import { LayerMaterial, Depth } from 'lamina/vanilla'

const geometry = new THREE.SphereGeometry(1, 128, 64)
const material = new LayerMaterial({
  color: '#d9d9d9',
  lighting: 'physical',
  transmission: 1,
  layers: [
    new Depth({
      colorA: '#002f4b',
      colorB: '#f2fdff',
      alpha: 0.5,
      mode: 'multiply',
      near: 0,
      far: 2,
      origin: new THREE.Vector3(1, 1, 1),
    }),
  ],
})

const mesh = new THREE.Mesh(geometry, material)
```

```javascript
new Depth({
  colorA: new THREE.Color('#002f4b').convertSRGBToLinear(),
  colorB: new THREE.Color('#f2fdff').convertSRGBToLinear(),
  alpha: 0.5,
  mode: 'multiply',
  near: 0,
  far: 2,
  origin: new THREE.Vector3(1, 1, 1),
}),
```

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

### Animate Layer Uniforms Using Refs and useFrame in React

Source: https://context7.com/pmndrs/lamina/llms.txt

Explains how to animate layer properties by accessing them through refs and using the `useFrame` hook from React Three Fiber. This example animates the `origin` of a Depth layer and the `offset` and `strength` of a Displace layer.

```jsx
import { LayerMaterial, Depth, Displace } from 'lamina'
import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'

function AnimatedMaterial() {
  const depthRef = useRef()
  const displaceRef = useRef()

  useFrame(({ clock }) => {
    // Animate depth origin
    depthRef.current.origin.x = Math.sin(clock.elapsedTime)
    depthRef.current.origin.y = Math.cos(clock.elapsedTime)

    // Animate displacement
    displaceRef.current.offset.x += 0.01
    displaceRef.current.strength = Math.sin(clock.elapsedTime) * 0.1 + 0.1
  })

  return (
    <mesh>
      <sphereGeometry args={[1, 128, 128]} />
      <LayerMaterial color="#ffffff" lighting="physical" transmission={1}>
        <Depth
          ref={depthRef}
          colorA="#ff0000"
          colorB="#0000ff"
          near={0}
          far={2}
          origin={[0, 0, 0]}
        />
        <Displace
          ref={displaceRef}
          strength={0.1}
          scale={5}
          offset={[0, 0, 0]}
        />
      </LayerMaterial>
    </mesh>
  )
}

```

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

### Gradient Component

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Applies a linear gradient based on distance from a start to an end point along a specified axis. Colors are interpolated based on this distance.

```APIDOC
## Gradient Component

### Description
Applies a linear gradient based on distance from a start to an end point along a specified axis. Colors are interpolated based on this distance.

### Method
Not Applicable (Component Configuration)

### Endpoint
Not Applicable (Component Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **colorA** (THREE.ColorRepresentation | THREE.Color) - Optional - The starting color of the gradient, defaults to "white".
- **colorB** (THREE.ColorRepresentation | THREE.Color) - Optional - The ending color of the gradient, defaults to "black".
- **alpha** (number) - Optional - The opacity of the gradient, defaults to 1.
- **contrast** (number) - Optional - The contrast of the gradient, defaults to 1.
- **start** (number) - Optional - The starting point on the selected axes for the gradient, defaults to 1.
- **end** (number) - Optional - The ending point on the selected axes for the gradient, defaults to -1.
- **axes** ("x" | "y" | "z") - Optional - The axis along which the gradient is applied, defaults to "x".
- **mapping** ("local" | "world" | "uv") - Optional - The coordinate space for the gradient mapping, defaults to "local".

### Request Example
```json
{
  "colorA": "#ff0000",
  "colorB": "#0000ff",
  "start": 2,
  "end": -2,
  "axes": "y"
}
```

### Response
#### Success Response (200)
This component does not have a direct success response as it's a configuration object.

#### Response Example
N/A
```

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

### Create LayerMaterial with Depth and Fresnel (Vanilla Three.js)

Source: https://context7.com/pmndrs/lamina/llms.txt

Shows how to create a LayerMaterial using the vanilla JavaScript API for Three.js. Layers are provided as an array to the constructor, allowing for programmatic material creation.

```javascript
import { LayerMaterial, Depth, Color, Fresnel } from 'lamina/vanilla'
import * as THREE from 'three'

const geometry = new THREE.SphereGeometry(1, 64, 64)
const material = new LayerMaterial({
  color: new THREE.Color('#ff4eb8'),
  lighting: 'physical',
  transmission: 1,
  roughness: 0.1,
  layers: [
    new Depth({
      far: 3,
      origin: [1, 1, 1],
      colorA: new THREE.Color('#ff00e3').convertSRGBToLinear(),
      colorB: new THREE.Color('#00ffff').convertSRGBToLinear(),
      alpha: 0.5,
      mode: 'multiply',
      mapping: 'vector',
    }),
    new Fresnel({
      color: new THREE.Color('#ffffff'),
      mode: 'softlight',
      intensity: 2,
      power: 3,
    }),
  ],
})

const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
```

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

### Vanilla Three.js Interactive Layer Manipulation

Source: https://context7.com/pmndrs/lamina/llms.txt

Demonstrates interactive layer manipulation in vanilla Three.js using Lamina. Sets up a Three.js scene, creates a layered material with Depth and Fresnel effects, and animates a mesh. Includes event listeners for mouse interaction to update layer origins.

```javascript
import { LayerMaterial, Depth, Color, Fresnel } from 'lamina/vanilla'
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

// Scene setup
const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(3, 0, 0)

const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

// Create layered material
const geometry = new THREE.TorusKnotGeometry(0.4, 0.1, 128, 32)
const material = new LayerMaterial({
  color: new THREE.Color('#ff4eb8'),
  lighting: 'standard',
  layers: [
    new Depth({
      name: 'BaseDepth',
      far: 3,
      origin: [1, 1, 1],
      colorA: new THREE.Color('#ff00e3'),
      colorB: new THREE.Color('#00ffff'),
      alpha: 0.5,
      mode: 'multiply',
    }),
    new Depth({
      name: 'MouseDepth',
      near: 0.25,
      far: 2,
      origin: [0, 0, 0],
      colorA: new THREE.Color('#ffe100'),
      alpha: 0.5,
      mode: 'lighten',
    }),
    new Fresnel({
      mode: 'softlight',
      intensity: 2,
    }),
  ],
})

const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)

// Get layer reference for animation
const mouseDepthLayer = material.layers.find(l => l.name === 'MouseDepth')

// Interactive mouse tracking
window.addEventListener('mousemove', (e) => {
  const x = THREE.MathUtils.mapLinear(e.clientX / window.innerWidth, 0, 1, -1, 1)
  const y = THREE.MathUtils.mapLinear(e.clientY / window.innerHeight, 0, 1, 1, -1)
  mouseDepthLayer.origin = new THREE.Vector3(x, y, 0)
})

// Animation loop
const controls = new OrbitControls(camera, renderer.domElement)
const light = new THREE.DirectionalLight(0xffffff, 1)
light.position.set(5, 5, 5)
scene.add(light)

function animate() {
  requestAnimationFrame(animate)
  mesh.rotation.y += 0.005
  controls.update()
  renderer.render(scene, camera)
}

animate()

```

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

### Create LayerMaterial with Depth Layer in React

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Demonstrates how to create a React component using Lamina's LayerMaterial and Depth layer to achieve a gradient effect on a sphere. It utilizes JSX syntax for defining material properties and layers. Dependencies include 'lamina' and ThreeJS.

```jsx
import { LayerMaterial, Depth } from 'lamina'

function GradientSphere() {
  return (
    <Sphere>
      <LayerMaterial
        color="#ffffff" //
        lighting="physical"
        transmission={1}
      >
        <Depth
          colorA="#810000" //
          colorB="#ffd0d0"
          alpha={0.5}
          mode="multiply"
          near={0}
          far={2}
          origin={[1, 1, 1]}
        />
      </LayerMaterial>
    </Sphere>
  )
}
```

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

### Using DebugLayerMaterial for LayerMaterial Configuration

Source: https://github.com/pmndrs/lamina/blob/main/README.md

This snippet demonstrates how to use the DebugLayerMaterial component to dynamically adjust parameters for a Depth layer. The debugger allows for real-time tweaking of properties like color, alpha, mode, depth range, and origin, simplifying the process of achieving desired visual effects.

```jsx
<DebugLayerMaterial color="#ffffff">
  <Depth
    colorA="#810000" //
    colorB="#ffd0d0"
    alpha={0.5}
    mode="multiply"
    near={0}
    far={2}
    origin={[1, 1, 1]}
  />
</DebugLayerMaterial>
```

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

### Create LayerMaterial with Depth and Fresnel (React Three Fiber)

Source: https://context7.com/pmndrs/lamina/llms.txt

Demonstrates creating a LayerMaterial in React Three Fiber, combining a Depth-based gradient and a Fresnel effect for a sphere. It utilizes JSX syntax for defining layers and their properties.

```jsx
import { LayerMaterial, Depth, Fresnel, Noise } from 'lamina'

function GradientSphere() {
  return (
    <mesh>
      <sphereGeometry args={[1, 64, 64]} />
      <LayerMaterial
        color="#ffffff"
        lighting="physical"
        transmission={1}
        roughness={0.1}
        thickness={2}
      >
        <Depth
          colorA="#810000"
          colorB="#ffd0d0"
          alpha={0.5}
          mode="multiply"
          near={0}
          far={2}
          origin={[1, 1, 1]}
        />
        <Fresnel
          color="#ffffff"
          intensity={2}
          power={3}
          mode="screen"
        />
      </LayerMaterial>
    </mesh>
  )
}
```

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

### Create Custom Layer with Abstract Class in TypeScript

Source: https://context7.com/pmndrs/lamina/llms.txt

Demonstrates how to create a custom shader layer by extending Lamina's Abstract class. It defines uniforms, varyings, and fragment shader logic. The custom layer is then registered and used within a React Three Fiber component.

```typescript
import { Abstract } from 'lamina/vanilla'
import * as THREE from 'three'
import { extend } from '@react-three/fiber'

class WaveLayer extends Abstract {
  // Uniforms with u_ prefix become class properties
  static u_color = new THREE.Color('#ff0000')
  static u_alpha = 1
  static u_frequency = 5
  static u_amplitude = 0.5

  static vertexShader = `
    varying vec3 v_position;

    void main() {
      v_position = position;
    }
  `

  static fragmentShader = `
    uniform vec3 u_color;
    uniform float u_alpha;
    uniform float u_frequency;
    uniform float u_amplitude;

    varying vec3 v_position;

    void main() {
      float f_wave = sin(v_position.x * u_frequency) * u_amplitude;
      float f_intensity = smoothstep(-1.0, 1.0, v_position.y + f_wave);
      vec3 f_finalColor = u_color * f_intensity;
      return vec4(f_finalColor, u_alpha);
    }
  `

  constructor(props) {
    super(WaveLayer, {
      name: 'WaveLayer',
      ...props,
    })
  }
}

// Register for React Three Fiber
extend({ WaveLayer })

// Usage in React
function CustomLayerMesh() {
  return (
    <mesh>
      <planeGeometry args={[4, 4, 32, 32]} />
      <LayerMaterial color="#000000" lighting="basic">
        <waveLayer
          color="#00ff00"
          alpha={1}
          frequency={10}
          amplitude={0.3}
          mode="add"
        />
      </LayerMaterial>
    </mesh>
  )
}

```

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

### Blend Modes

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Lists the available blend modes that can be applied to materials in Lamina.

```APIDOC
## Blend Modes

### Description
Lists the blend modes currently available in Lamina.

### Method
Not Applicable (List of Modes)

### Endpoint
Not Applicable (List of Modes)

### Parameters
None

### Request Example
N/A

### Response
#### Success Response (200)
This section lists available blend modes.

#### Response Example
```
Available Blend Modes:
- normal
- divide
- add
- overlay
- subtract
- screen
- multiply
- softlight
- lighten
- reflect
- darken
- negation
```
```

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

### Apply Fresnel Layer for Rim Lighting (React)

Source: https://context7.com/pmndrs/lamina/llms.txt

Demonstrates applying a Fresnel layer in React Three Fiber to achieve a rim lighting effect, creating glowing edges on surfaces viewed at grazing angles. This is useful for glass-like or ethereal material appearances.

```jsx
import { LayerMaterial, Fresnel, Depth } from 'lamina'

function GlassSphere() {
  return (
    <mesh>
      <sphereGeometry args={[1, 128, 128]} />
      <LayerMaterial
        color="#ffffff"
        lighting="physical"
        transmission={1}
        roughness={0.1}
        thickness={2}
      >
        <Depth
          near={0.4}
          far={0.8}
          origin={[-0.5, 0.4, 0]}
          colorA="#fec5da"
          colorB="#00b8fe"
        />
        <Fresnel
          color="#fefefe"
          bias={-0.35}
          intensity={4}
          power={3.4}
          factor={1.1}
          mode="screen"
        />
      </LayerMaterial>
    </mesh>
  )
}
```

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

### Custom Layer with onParse Event - TypeScript

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Demonstrates creating a custom layer in TypeScript that utilizes the 'onParse' event to inject dynamic shader code based on a 'mapping' parameter. This allows for non-uniform options to be passed and processed during layer initialization.

```typescript
class CustomLayer extends Abstract {
  static u_color = 'red'
  static u_alpha = 1

  static vertexShader = `...`
  static fragmentShader = `
    // ...
    float f_dist = lamina_mapping_template; // Temp value, will be used to inject code later on.
    // ...
  `

  // Get some shader code based off mapping parameter
  static getMapping(mapping) {
    switch (mapping) {
      default:
      case 'uv':
        return `some_shader_code`

      case 'world':
        return `some_other_shader_code`
    }
  }

  // Set non-uniform defaults.
  mapping: 'uv' | 'world' = 'uv'

  // Non unifrom params must be passed to the constructor
  constructor(props) {
    super(
      CustomLayer,
      {
        name: 'CustomLayer',
        ...props,
      },
      // This is onParse callback
      (self: CustomLayer) => {
        // Add to Leva (debugger) schema.
        // This will create a dropdown select component on the debugger.
        self.schema.push({
          value: self.mapping,
          label: 'mapping',
          options: ['uv', 'world'],
        })

        // Get shader chunk based off selected mapping value
        const mapping = CustomLayer.getMapping(self.mapping)

        // Inject shader chunk in current layer's shader code
        self.fragmentShader = self.fragmentShader.replace('lamina_mapping_template', mapping)
      }
    )
  }
}
```

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

### Custom Layer Usage in React - JSX

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Shows how to integrate the custom 'CustomLayer' component within a React application using JSX. It highlights passing non-uniform parameters via the 'args' prop to the constructor.

```jsx
// ...
<LayerMaterial>
  <customLayer
    ref={ref}
    color="green"
    alpha={0.5}
    args={[mapping]} // Non unifrom params must be passed to the constructor using `args`
  />
</LayerMaterial>
```

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

### Implement Depth Layer with Different Mapping Modes (React)

Source: https://context7.com/pmndrs/lamina/llms.txt

Illustrates the use of the Depth layer in React Three Fiber, showcasing its ability to create depth-based gradients using 'vector', 'camera', and 'world' mapping modes. This allows for varied gradient effects based on different reference points.

```jsx
import { LayerMaterial, Depth } from 'lamina'

function DepthGradientMesh() {
  return (
    <mesh>
      <torusKnotGeometry args={[0.4, 0.1, 128, 32]} />
      <LayerMaterial color="#ffffff" lighting="standard">
        {/* Vector mapping - gradient from custom origin point */}
        <Depth
          colorA="#ff0000"
          colorB="#0000ff"
          alpha={1}
          near={0}
          far={2}
          origin={[1, 0, 0]}
          mapping="vector"
          mode="normal"
        />
        {/* Camera mapping - gradient based on camera distance */}
        <Depth
          colorA="#ffff00"
          colorB="#00ffff"
          alpha={0.5}
          near={0.5}
          far={3}
          mapping="camera"
          mode="multiply"
        />
      </LayerMaterial>
    </mesh>
  )
}
```

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

### Apply Matcap Textures for Stylized Lighting with Lamina

Source: https://context7.com/pmndrs/lamina/llms.txt

Applies a matcap (material capture) texture for stylized lighting effects, independent of scene lights. This is useful for achieving specific artistic looks. Requires a texture loader like `@react-three/drei`.

```jsx
import { LayerMaterial, Matcap } from 'lamina'
import { useTexture } from '@react-three/drei'

function MatcapMesh() {
  const matcap = useTexture('/path/to/matcap.png')

  return (
    <mesh>
      <torusGeometry args={[1, 0.4, 32, 64]} />
      <LayerMaterial color="#ffffff" lighting="basic">
        <Matcap map={matcap} alpha={1} mode="normal" />
      </LayerMaterial>
    </mesh>
  )
}

```

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

### Define Custom Layer with Shaders in TypeScript

Source: https://github.com/pmndrs/lamina/blob/main/README.md

This snippet demonstrates how to create a custom layer by extending Lamina's `Abstract` class. It includes defining static uniforms, a fragment shader for color output, and an optional vertex shader for position manipulation. The constructor must call `super` with the class itself.

```typescript
import { Abstract } from 'lamina/vanilla'

// Extend the Abstract layer
class CustomLayer extends Abstract {
  // Define stuff as static properties!

  // Uniforms: Must begin with prefix "u_".
  // Assign them their default value.
  // Any unifroms here will automatically be set as properties on the class as setters and getters.
  // There setters and getters will update the underlying unifrom.
  static u_color = 'red' // Can be accessed as CustomLayer.color
  static u_alpha = 1 // Can be accessed as CustomLayer.alpha

  // Define your fragment shader just like you already do!
  // Only difference is, you must return the final color of this layer
  static fragmentShader = `   
    uniform vec3 u_color;
    uniform float u_alpha;

    // Varyings must be prefixed by "v_"
    varying vec3 v_Position;

    vec4 main() {
      // Local variables must be prefixed by "f_"
      vec4 f_color = vec4(u_color, u_alpha);
      return f_color;
    }
  `

  // Optionally Define a vertex shader!
  // Same rules as fragment shaders, except no blend modes.
  // Return a non-projected vec3 position.
  static vertexShader = `   
    // Varyings must be prefixed by "v_"
    varying vec3 v_Position;

    void main() {
      v_Position = position;
      return position * 2.;
    }
  `

  constructor(props) {
    // You MUST call `super` with the current constructor as the first argument.
    // Second argument is optional and provides non-uniform parameters like blend mode, name and visibility.
    super(CustomLayer, {
      name: 'CustomLayer',
      ...props,
    })
  }
}

```

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

### Create Linear Gradients with Lamina

Source: https://context7.com/pmndrs/lamina/llms.txt

Creates linear gradients along a specified axis (x, y, or z) between two points. Supports local, world, and UV coordinate mappings, along with start/end points, contrast, alpha, and blend mode.

```jsx
import { LayerMaterial, Gradient } from 'lamina'

function GradientBox() {
  return (
    <mesh>
      <boxGeometry args={[2, 2, 2]} />
      <LayerMaterial color="#000000" lighting="basic">
        <Gradient
          colorA="#ff0000"
          colorB="#0000ff"
          axes="y"
          start={1}
          end={-1}
          contrast={1}
          alpha={1}
          mapping="local"
          mode="normal"
        />
      </LayerMaterial>
    </mesh>
  )
}

```

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

### Generate Procedural Noise Patterns with Lamina

Source: https://context7.com/pmndrs/lamina/llms.txt

Generates procedural noise patterns using various algorithms like perlin and simplex. Supports four colors for gradient mapping, alpha blending, scaling, and offset. Can be used in both React (JSX) and vanilla JavaScript.

```jsx
import { LayerMaterial, Noise } from 'lamina'

function NoiseTextureMesh() {
  return (
    <mesh>
      <boxGeometry args={[2, 2, 2]} />
      <LayerMaterial color="#333333" lighting="standard">
        <Noise
          colorA="#ff0000"
          colorB="#00ff00"
          colorC="#0000ff"
          colorD="#ffff00"
          alpha={1}
          scale={2}
          offset={[0, 0, 0]}
          type="perlin"
          mapping="local"
          mode="normal"
        />
      </LayerMaterial>
    </mesh>
  )
}
```

```javascript
// Vanilla usage
import { LayerMaterial, Noise } from 'lamina/vanilla'
import * as THREE from 'three'

const material = new LayerMaterial({
  color: '#333333',
  layers: [
    new Noise({
      colorA: new THREE.Color('#ff0000'),
      colorB: new THREE.Color('#00ff00'),
      colorC: new THREE.Color('#0000ff'),
      colorD: new THREE.Color('#ffff00'),
      scale: 2,
      type: 'simplex',
      mapping: 'world',
    }),
  ],
})

```

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

### Noise Component

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Provides various noise functions for procedural texturing and effects. Supports multiple colors and customizable parameters.

```APIDOC
## Noise Component

### Description
Provides various noise functions for procedural texturing and effects. Supports multiple colors and customizable parameters.

### Method
Not Applicable (Component Configuration)

### Endpoint
Not Applicable (Component Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **colorA** (THREE.ColorRepresentation | THREE.Color) - Optional - The first color for noise generation, defaults to "white".
- **colorB** (THREE.ColorRepresentation | THREE.Color) - Optional - The second color for noise generation, defaults to "black".
- **colorC** (THREE.ColorRepresentation | THREE.Color) - Optional - The third color for noise generation, defaults to "white".
- **colorD** (THREE.ColorRepresentation | THREE.Color) - Optional - The fourth color for noise generation, defaults to "black".
- **alpha** (number) - Optional - The opacity of the noise effect, defaults to 1.
- **scale** (number) - Optional - The scale of the noise pattern, defaults to 1.
- **offset** (THREE.Vector3 | [number, number, number]) - Optional - The offset of the noise pattern, defaults to [0, 0, 0].
- **mapping** ("local" | "world" | "uv") - Optional - The coordinate space for the noise mapping, defaults to "local".
- **type** ("perlin" | "simplex" | "cell" | "curl") - Optional - The type of noise function to use, defaults to "perlin".

### Request Example
```json
{
  "type": "simplex",
  "scale": 5,
  "offset": [1, 1, 1],
  "colorA": "#00ff00",
  "colorB": "#ff0000"
}
```

### Response
#### Success Response (200)
This component does not have a direct success response as it's a configuration object.

#### Response Example
N/A
```

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

### Texture Component

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Applies a standard texture map to the material.

```APIDOC
## Texture Component

### Description
Applies a standard texture map to the material.

### Method
Not Applicable (Component Configuration)

### Endpoint
Not Applicable (Component Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **map** (THREE.Texture) - Required - The texture map to apply.
- **alpha** (number) - Optional - The opacity of the texture, defaults to 1.

### Request Example
```json
{
  "map": "path/to/texture.jpg",
  "alpha": 0.9
}
```

### Response
#### Success Response (200)
This component does not have a direct success response as it's a configuration object.

#### Response Example
N/A
```

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

### Apply Flat Color Layers with Lamina

Source: https://context7.com/pmndrs/lamina/llms.txt

A simple flat color layer for base colors or overlays. Supports alpha blending and various blend modes, allowing for color layering effects combined with depth-based color transitions.

```jsx
import { LayerMaterial, Color, Depth } from 'lamina'

function ColorLayeredMesh() {
  return (
    <mesh>
      <sphereGeometry args={[1, 64, 64]} />
      <LayerMaterial color="#000000" lighting="basic">
        <Color color="#f0aed2" alpha={1} mode="normal" />
        <Depth
          near={0}
          far={300}
          origin={[10, 10, 10]}
          colorA="blue"
          colorB="#00aaff"
          alpha={0.5}
          mode="multiply"
        />
      </LayerMaterial>
    </mesh>
  )
}

```

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

### Apply Image Textures with Lamina

Source: https://context7.com/pmndrs/lamina/llms.txt

Applies an image texture as a layer with blend mode support. This layer can be combined with other layers, such as Depth, to create complex material effects. Requires a texture loader like `@react-three/drei`.

```jsx
import { LayerMaterial, Texture, Depth } from 'lamina'
import { useTexture } from '@react-three/drei'

function TexturedMesh() {
  const texture = useTexture('/path/to/texture.jpg')

  return (
    <mesh>
      <planeGeometry args={[2, 2]} />
      <LayerMaterial color="#ffffff" lighting="standard">
        <Texture map={texture} alpha={1} mode="normal" />
        <Depth
          colorA="#ff0000"
          colorB="#0000ff"
          alpha={0.3}
          mode="overlay"
        />
      </LayerMaterial>
    </mesh>
  )
}

```

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

### Matcap Component

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Applies a Matcap texture to the material. Matcaps are simple, stylized lighting textures.

```APIDOC
## Matcap Component

### Description
Applies a Matcap texture to the material. Matcaps are simple, stylized lighting textures.

### Method
Not Applicable (Component Configuration)

### Endpoint
Not Applicable (Component Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **map** (THREE.Texture) - Required - The Matcap texture to apply.
- **alpha** (number) - Optional - The opacity of the Matcap effect, defaults to 1.

### Request Example
```json
{
  "map": "path/to/matcap.png",
  "alpha": 0.8
}
```

### Response
#### Success Response (200)
This component does not have a direct success response as it's a configuration object.

#### Response Example
N/A
```

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

### Use Custom Layer with React-three-fiber

Source: https://github.com/pmndrs/lamina/blob/main/README.md

This snippet shows how to integrate a custom Lamina layer into a React-three-fiber application. It uses the `extend` function to make the custom layer available as a JSX component and demonstrates how to animate its uniforms using `useRef` and `useFrame`.

```jsx
import { extend } from "@react-three/fiber"

extend({ CustomLayer })

// ...
const ref = useRef();

// Animate uniforms using a ref.
useFrame(({ clock }) => {
  ref.current.color.setRGB(
    Math.sin(clock.elapsedTime),
    Math.cos(clock.elapsedTime),
    Math.sin(clock.elapsedTime),
  )
})

<LayerMaterial>
  <customLayer
    ref={ref}     // Imperative instance of CustomLayer. Can be used to animate unifroms
    color="green" // Uniforms can be set directly
    alpha={0.5}
  />
</LayerMaterial>

```

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

### Displace Mesh Vertices with Lamina

Source: https://context7.com/pmndrs/lamina/llms.txt

A vertex layer that displaces mesh vertices using procedural noise, useful for organic surfaces. It automatically recalculates normals for proper lighting and supports animation by updating the noise offset.

```jsx
import { LayerMaterial, Depth, Displace, Fresnel } from 'lamina'
import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'

function AnimatedBlob() {
  const displaceRef = useRef()

  useFrame(({ clock }, delta) => {
    // Animate the noise offset for animated displacement
    displaceRef.current.offset.x += delta * 0.3
  })

  return (
    <mesh>
      <sphereGeometry args={[1, 128, 128]} />
      <LayerMaterial color="#ffffff" lighting="physical" transmission={1}>
        <Depth
          near={0.4}
          far={0.8}
          origin={[-0.5, 0.4, 0]}
          colorA="#fec5da"
          colorB="#00b8fe"
        />
        <Displace
          ref={displaceRef}
          strength={0.2}
          scale={5}
          offset={[0, 0, 0]}
          type="perlin"
          mapping="local"
        />
        <Fresnel color="#fefefe" intensity={4} power={3} mode="screen" />
      </LayerMaterial>
    </mesh>
  )
}

```

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

### Displace Vertex Layer

Source: https://github.com/pmndrs/lamina/blob/main/README.md

Displaces vertices of a mesh using various noise functions. Affects the vertex shader.

```APIDOC
## Displace Vertex Layer

### Description
Displaces vertices of a mesh using various noise functions. Affects the vertex shader.

### Method
Not Applicable (Component Configuration)

### Endpoint
Not Applicable (Component Configuration)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
- **strength** (number) - Optional - The strength of the displacement, defaults to 1.
- **scale** (number) - Optional - The scale of the noise pattern used for displacement, defaults to 1.
- **mapping** ("local" | "world" | "uv") - Optional - The coordinate space for the displacement mapping, defaults to "local".
- **type** ("perlin" | "simplex" | "cell" | "curl") - Optional - The type of noise function to use for displacement, defaults to "perlin".
- **offset** (THREE.Vector3 | [number,number,number]) - Optional - The offset of the noise pattern, defaults to [0, 0, 0].

### Request Example
```json
{
  "type": "curl",
  "strength": 0.5,
  "scale": 10,
  "mapping": "world"
}
```

### Response
#### Success Response (200)
This component does not have a direct success response as it's a configuration object.

#### Response Example
N/A
```

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