### Install the npm package

Source: https://shaders.com/docs/guide/react/quickstart

Install the shaders npm package using npm.

```bash
npm install shaders

```

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

### Example Prompt: Install Shader

Source: https://shaders.com/docs/guide/mcp

Example prompt to install a saved shader.

```text
Install my "Landing Hero" shader in the hero section as a background.
```

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

### Configuring components - Reactive props

Source: https://shaders.com/docs/guide/react/quickstart

Example of using React state (useState) to dynamically control shader properties like angle.

```jsx
import { useState } from 'react'
import { Shader, LinearGradient } from 'shaders/react'

export default function MyShader() {
  const [angle, setAngle] = useState(0)

  return (
    <>
      <Shader className="w-full h-64">
        <LinearGradient colorA="#ff6b6b" colorB="#4ecdc4" angle={angle} />
      </Shader>

      <input
        type="range"
        min={0}
        max={360}
        value={angle}
        onChange={e => setAngle(Number(e.target.value))}
      />
    </>
  )
}


```

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

### React Usage Example

Source: https://shaders.com/docs/components/smokefill

Example of how to use the SmokeFill component within a React Shader setup.

```jsx
<Shader>
  <SmokeFill
    intensity={1}
  />
</Shader>

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/smokefill

Example of how to use the SmokeFill component within a Vue Shader setup.

```html
<Shader>
  <SmokeFill
    :intensity="1"
  />
</Shader>

```

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

### Usage Example

Source: https://shaders.com/docs/components/webcamtexture

Example of using WebcamTexture within a Shader component.

```html
<Shader>
  <WebcamTexture />
</Shader>

```

```html
<Shader>
  <WebcamTexture />
</Shader>

```

```html
<Shader>
  <WebcamTexture />
</Shader>

```

```html
<Shader>
  <WebcamTexture />
</Shader>

```

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

### Example Shader Component

Source: https://shaders.com/docs/guide

This example shows how to use the Shader component with LinearGradient and CursorTrail.

```html
<Shader class="absolute inset-0 -z-10">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

```

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

### Usage Example

Source: https://shaders.com/docs/components/group

Example of using the Group component in various frameworks.

```jsx
<Shader>
  <Group>
    <Circle />
  </Group>
</Shader>
```

```jsx
<Shader>
  <Group>
    <Circle />
  </Group>
</Shader>
```

```jsx
<Shader>
  <Group>
    <Circle />
  </Group>
</Shader>
```

```jsx
<Shader>
  <Group>
    <Circle />
  </Group>
</Shader>
```

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

### Basic Masking Example

Source: https://shaders.com/docs/guide/blending-masking

This example demonstrates how to use a Circle component as a mask for a LinearGradient.

```html
<Shader>
  <!-- This circle acts as the mask -->
  <Circle id="myMask" radius="0.8" :visible="false" />

  <!-- This gradient is masked by the circle -->
  <LinearGradient maskSource="myMask" />
</Shader>
```

```jsx
<Shader>
  {/* This circle acts as the mask */}
  <Circle id="myMask" radius={0.8} visible={false} />

  {/* This gradient is masked by the circle */}
  <LinearGradient maskSource="myMask" />
</Shader>
```

```jsx
<Shader>
  {/* This circle acts as the mask */}
  <Circle id="myMask" radius={0.8} visible={false} />

  {/* This gradient is masked by the circle */}
  <LinearGradient maskSource="myMask" />
</Shader>
```

```jsx
<Shader>
  {/* This circle acts as the mask */}
  <Circle id="myMask" radius={0.8} visible={false} />

  {/* This gradient is masked by the circle */}
  <LinearGradient maskSource="myMask" />
</Shader>
```

```javascript
const shader = await createShader(canvas, {
  components: [
    { type: 'Circle', id: 'myMask', props: { radius: 0.8, visible: false } },
    { type: 'LinearGradient', props: { maskSource: 'myMask' } }
  ]
})
```

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

### SolidColor Initialization Example

Source: https://shaders.com/docs/components/solidcolor

Example of initializing a shader with the SolidColor component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'SolidColor', props: { color: '#5b18ca' } }
  ]
})

```

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

### Solid.js Example

Source: https://shaders.com/docs/guide/hooks-events

Example of using the onReady hook in Solid.js to control the visibility of a shader component.

```javascript
import { createSignal } from 'solid-js'

function App() {
  const [visible, setVisible] = createSignal(false)

  return (
    <Shader
      onReady={() => setVisible(true)}
      style={{ opacity: visible() ? 1 : 0, transition: 'opacity 0.5s' }}
    >
      <Circle color="#ff0088" />
    </Shader>
  )
}


```

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

### Usage Example

Source: https://shaders.com/docs/components/brightnesscontrast

Example of how to use the BrightnessContrast component within a Shader.

```jsx
<Shader>
  <BrightnessContrast>
    <Circle />
  </BrightnessContrast>
</Shader>

```

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

### Usage Example

Source: https://shaders.com/docs/components/paper

Example of how to use the Paper component with a Circle child.

```jsx
<Shader>
  <Paper>
    <Circle />
  </Paper>
</Shader>

```

```jsx
<Shader>
  <Paper>
    <Circle />
  </Paper>
</Shader>

```

```jsx
<Shader>
  <Paper>
    <Circle />
  </Paper>
</Shader>

```

```jsx
<Shader>
  <Paper>
    <Circle />
  </Paper>
</Shader>

```

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

### auto-animate Example (Repeated)

Source: https://shaders.com/docs/guide/dynamic-props

Additional examples demonstrating the 'auto-animate' dynamic prop configuration.

```html
<Shader class="w-full h-64">
  <Circle
    color="#6366f1"
    radius={{
      type: 'auto-animate',
      mode: 'ping-pong',
      outputMin: 0.2,
      outputMax: 0.6,
      speed: 0.8,
      easing: 'sine'
    }}
  />
</Shader>
```

```html
<Shader class="w-full h-64">
  <Circle
    color="#6366f1"
    radius={{
      type: 'auto-animate',
      mode: 'ping-pong',
      outputMin: 0.2,
      outputMax: 0.6,
      speed: 0.8,
      easing: 'sine'
    }}
  />
</Shader>
```

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

### React Usage Example

Source: https://shaders.com/docs/components/cursorripples

Example of how to use the CursorRipples component in a React.js application.

```html
<Shader>
  <CursorRipples
    intensity={10}
    radius={0.5}
  >
    <Circle />
  </CursorRipples>
</Shader>

```

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

### JavaScript Usage Example

Source: https://shaders.com/docs/components/radialgradient

Example of creating a shader with RadialGradient using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'RadialGradient', props: { radius: 1 } }
  ]
})

```

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

### Anchor point examples

Source: https://shaders.com/docs/guide/transforms

Examples demonstrating how to change the anchor point for rotation and scaling in Vue.

```html
<!-- Rotates around the center (default) -->
<Circle :transform="{ rotation: 45 }" />

<!-- Rotates around the top-left corner -->
<Circle :transform="{ rotation: 45, anchorX: 0, anchorY: 0 }" />

<!-- Scales from the top edge -->
<LinearGradient :transform="{ scale: 2, anchorY: 0 }" />
```

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

### Vue.js Examples

Source: https://shaders.com/docs/guide/shape-effects

Examples of using different shapes with Vue.js components.

```html
<!-- Circle (default) -->
<Glass :shape='{ type: "circleSDF", radius: 0.35 }' />

<!-- Six-pointed star -->
<Neon :shape='{ type: "starSDF", radius: 0.35, sides: 6, innerRatio: 0.45 }' />

<!-- Rounded rectangle -->
<Emboss :shape='{ type: "roundedRectSDF", width: 0.4, height: 0.25, rounding: 0.06 }' />
```

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

### JavaScript Usage Example

Source: https://shaders.com/docs/components/sunburst

Example of how to use the SunBurst component programmatically with JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'SunBurst', props: { color: '#ffdd88', radius: 0.8 } }
  ]
})

```

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

### JavaScript Examples

Source: https://shaders.com/docs/guide/shape-effects

Examples of creating shaders with different shapes using JavaScript.

```javascript
// Circle (default)
const shader = await createShader(canvas, {
  components: [
    { type: 'Glass', props: { shape: { type: 'circleSDF', radius: 0.35 } } }
  ]
})

// Six-pointed star
const shader = await createShader(canvas, {
  components: [
    { type: 'Neon', props: { shape: { type: 'starSDF', radius: 0.35, sides: 6, innerRatio: 0.45 } } }
  ]
})

// Rounded rectangle
const shader = await createShader(canvas, {
  components: [
    { type: 'Emboss', props: { shape: { type: 'roundedRectSDF', width: 0.4, height: 0.25, rounding: 0.06 } } }
  ]
})
```

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

### React Example

Source: https://shaders.com/docs/guide/hooks-events

Example of using the onReady hook in React to control the visibility of a shader component.

```javascript
import { useState } from 'react'

function App() {
  const [visible, setVisible] = useState(false)

  return (
    <Shader
      onReady={() => setVisible(true)}
      style={{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }}
    >
      <Circle color="#ff0088" />
    </Shader>
  )
}


```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/sunburst

Example of how to use the SunBurst component in a Vue template.

```html
<Shader>
  <SunBurst
    color="#ffdd88"
    :radius="0.8"
  />
</Shader>

```

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

### Vanilla JavaScript Example

Source: https://shaders.com/docs/guide/hooks-events

Example of using the onReady hook with vanilla JavaScript to control the visibility of a shader component.

```javascript
const canvas = document.getElementById('my-canvas')

// Start hidden
canvas.style.opacity = '0'
canvas.style.transition = 'opacity 0.5s'

const shader = await createShader(canvas, {
  components: [
    { type: 'Circle', id: 'c1', props: { color: '#ff0088' } }
  ]
}, {
  onReady: () => {
    canvas.style.opacity = '1'
  }
})


```

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

### React Usage Example

Source: https://shaders.com/docs/components/liquify

Example of how to use the Liquify component in a React.js application.

```jsx
<Shader>
  <Liquify
    intensity={10}
    radius={1}
  >
    <Circle />
  </Liquify>
</Shader>
```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/liquify

Example of how to use the Liquify component in a Vue.js application.

```html
<Shader>
  <Liquify
    :intensity="10"
    :radius="1"
  >
    <Circle />
  </Liquify>
</Shader>
```

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

### SolidColor Usage Example

Source: https://shaders.com/docs/components/solidcolor

Example of how to use the SolidColor component within a Shader.

```jsx
<Shader>
  <SolidColor
    color="#5b18ca"
  />
</Shader>

```

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

### Vue.js Example

Source: https://shaders.com/docs/guide/hooks-events

Example of using the onReady hook in Vue.js to control the visibility of a shader component.

```html
<template>
  <Shader @ready="onShaderReady" :style="{ opacity: visible ? 1 : 0, transition: 'opacity 0.5s' }">
    <Circle color="#ff0088" />
  </Shader>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

function onShaderReady() {
  visible.value = true
}
</script>

```

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

### React Usage Example

Source: https://shaders.com/docs/components/glasstiles

Example of how to use the GlassTiles component in a React.js application.

```jsx
<Shader>
  <GlassTiles
    intensity={2}
  >
    <Circle />
  </GlassTiles>
</Shader>
```

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

### Edge modes examples

Source: https://shaders.com/docs/guide/transforms

Examples showing how to use different edge modes ('wrap', 'mirror') with transforms in Vue to control out-of-bounds rendering.

```html
<Shader class="w-full h-64">
  <!-- Offset with wrapping — tiles the effect -->
  <LinearGradient :transform="{ offsetX: 0.3, edges: 'wrap' }" />

  <!-- Offset with mirror — reflects the edge -->
  <Swirl :transform="{ offsetX: 0.3, edges: 'mirror' }" />
</Shader>
```

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

### JavaScript Usage Example

Source: https://shaders.com/docs/components/star

Example of creating a shader with the Star component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Star', props: { color: '#ffffff', radius: 0.4 } }
  ]
})

```

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

### Example Prompt: Add Shader with Animation

Source: https://shaders.com/docs/guide/mcp

Example prompt to add a shader with specific visual characteristics.

```text
Add a shader to the background of this card, something blue with a subtle flowing animation.
```

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

### Svelte Example

Source: https://shaders.com/docs/guide/hooks-events

Example of using the onReady hook in Svelte to control the visibility of a shader component.

```javascript
<script>
  let visible = $state(false)
</script>

<Shader onready={() => visible = true} style:opacity={visible ? 1 : 0} style:transition="opacity 0.5s">
  <Circle color="#ff0088" />
</Shader>


```

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

### React Usage Example

Source: https://shaders.com/docs/components/smoke

Example of how to use the Smoke component in a React.js application.

```html
<Shader>
  <Smoke
    intensity={1}
  />
</Shader>

```

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

### Mask Type Example

Source: https://shaders.com/docs/guide/blending-masking

This example shows how to use a Checkerboard as a mask with the 'luminance' maskType.

```html
<Shader>
  <LinearGradient />

  <!-- Hidden checkerboard mask controls visibility -->
  <Checkerboard
    id="mask"
    colorA="#ffffff"
    colorB="#111111"
    :visible="false"
  />

  <!-- Visible where mask is bright -->
  <Circle
    color="#ff0088"
    radius="0.8"
    maskSource="mask"
    maskType="luminance"
  />
</Shader>
```

```jsx
<Shader>
  <LinearGradient />

  {/* Hidden checkerboard mask controls visibility */}
  <Checkerboard
    id="mask"
    colorA="#ffffff"
    colorB="#111111"
    visible={false}
  />

  {/* Visible where mask is bright */}
  <Circle
    color="#ff0088"
    radius={0.8}
    maskSource="mask"
    maskType="luminance"
  />
</Shader>
```

```jsx
<Shader>
  <LinearGradient />

  {/* Hidden checkerboard mask controls visibility */}
  <Checkerboard
    id="mask"
    colorA="#ffffff"
    colorB="#111111"
    visible={false}
  />

  {/* Visible where mask is bright */}
  <Circle
    color="#ff0088"
    radius={0.8}
    maskSource="mask"
    maskType="luminance"
  />
</Shader>
```

```jsx
<Shader>
  <LinearGradient />

  {/* Hidden checkerboard mask controls visibility */}
  <Checkerboard
    id="mask"
    colorA="#ffffff"
    colorB="#111111"
    visible={false}
  />

  {/* Visible where mask is bright */}
  <Circle
    color="#ff0088"
    radius={0.8}
    maskSource="mask"
    maskType="luminance"
  />
</Shader>
```

```javascript
const shader = await createShader(canvas, {
  components: [
    { type: 'LinearGradient', props: {} },
    { type: 'Checkerboard', id: 'mask', props: { colorA: '#ffffff', colorB: '#111111', visible: false } },
    { type: 'Circle', props: { color: '#ff0088', radius: 0.8, maskSource: 'mask', maskType: 'luminance' } }
  ]
})
```

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

### Your first shader

Source: https://shaders.com/docs/guide/react/quickstart

Create a simple shader with a LinearGradient and a CursorTrail effect.

```jsx
<Shader className="w-full h-64">
  <LinearGradient colorA="#0f172a" colorB="#7c3aed" />
  <CursorTrail />
</Shader>

```

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

### Example Prompt: Add Logo with Effect

Source: https://shaders.com/docs/guide/mcp

Example prompt to apply a specific effect to an SVG logo.

```text
Add my logo.svg as a liquid glass effect on top of this shader.
```

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

### Import some components

Source: https://shaders.com/docs/guide/react/quickstart

Import necessary components like Shader, LinearGradient, and CursorTrail from the shaders/react package.

```javascript
import { Shader, LinearGradient, CursorTrail } from 'shaders/react'

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/glasstiles

Example of how to use the GlassTiles component in a Vue.js application.

```html
<Shader>
  <GlassTiles
    :intensity="2"
  >
    <Circle />
  </GlassTiles>
</Shader>
```

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

### Configuring components - Basic props

Source: https://shaders.com/docs/guide/react/quickstart

Configure a LinearGradient component with specific colors, angle, and color space using props.

```jsx
<Shader className="w-full h-64">
  <LinearGradient
    colorA="#ff6b6b"
    colorB="#4ecdc4"
    angle={45}
    colorSpace="oklch"
  />
</Shader>

```

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

### JavaScript Usage Example

Source: https://shaders.com/docs/components/ring

Example of creating a shader with a Ring component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Ring', props: { color: '#ffffff', radius: 0.3 } }
  ]
})

```

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

### Usage Example

Source: https://shaders.com/docs/components/reflectiveplane

Example of how to use the ReflectivePlane component within a Shader.

```jsx
<Shader>
  <ReflectivePlane>
    <Circle />
  </ReflectivePlane>
</Shader>
```

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

### Claude CLI Example (API Key)

Source: https://shaders.com/docs/guide/mcp

Command to add the Shaders MCP server using the Claude CLI with an API key.

```bash
claude mcp add --transport http shaders https://shaders.com/mcp --header "Authorization: Bearer YOUR_API_KEY"
```

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

### Usage Example

Source: https://shaders.com/docs/components/flowfield

Example of how to use the FlowField component with a Circle child.

```jsx
<Shader>
  <FlowField>
    <Circle />
  </FlowField>
</Shader>

```

```jsx
<Shader>
  <FlowField>
    <Circle />
  </FlowField>
</Shader>

```

```jsx
<Shader>
  <FlowField>
    <Circle />
  </FlowField>
</Shader>

```

```jsx
<Shader>
  <FlowField>
    <Circle />
  </FlowField>
</Shader>

```

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

### Claude CLI Example

Source: https://shaders.com/docs/guide/mcp

Command to add the Shaders MCP server using the Claude CLI.

```bash
claude mcp add --transport http shaders https://shaders.com/mcp
```

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

### Sizing the canvas - Fixed dimensions

Source: https://shaders.com/docs/guide/react/quickstart

Configure the Shader component with fixed width and height using inline styles.

```jsx
{/* Fixed dimensions */}
<Shader style={{ width: '600px', height: '400px' }}>
  <LinearGradient />
</Shader>

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/vesica

Example of using the Vesica component in a Vue template.

```html
<Shader>
  <Vesica
    color="#ffffff"
    :radius="0.35"
  />
</Shader>


```

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

### JavaScript Usage Example

Source: https://shaders.com/docs/components/barshift

Example of creating a shader with the BarShift component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'BarShift', props: { intensity: 0.15 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

```

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

### Map prop example with LinearGradient and DotGrid

Source: https://shaders.com/docs/guide/dynamic-props

This example demonstrates how to use the 'map' type to drive the 'dot-size' of a DotGrid component based on the luminance of a LinearGradient layer. The source layer is given an 'id' and then referenced in the driver.

```vue
<Shader class="w-full h-64">
  <!-- Source layer: named 'grad' -->
  <LinearGradient
    id="grad"
    color-a="#000000"
    color-b="#ffffff"
  />

  <!-- DotGrid dot size driven by the gradient's luminance -->
  <DotGrid
    :dot-size="{
      type: 'map',
      source: 'grad',
      channel: 'luminance',
      inputMin: 0,
      inputMax: 1,
      outputMin: 0.02,
      outputMax: 0.12
    }"
  />
</Shader>
```

```vue
<Shader className="w-full h-64">
  <LinearGradient
    id="grad"
    colorA="#000000"
    colorB="#ffffff"
  />
  <DotGrid
    dotSize={{
      type: 'map',
      source: 'grad',
      channel: 'luminance',
      inputMin: 0,
      inputMax: 1,
      outputMin: 0.02,
      outputMax: 0.12
    }}
  />
</Shader>
```

```vue
<Shader class="w-full h-64">
  <LinearGradient
    id="grad"
    colorA="#000000"
    colorB="#ffffff"
  />
  <DotGrid
    dotSize={{
      type: 'map',
      source: 'grad',
      channel: 'luminance',
      inputMin: 0,
      inputMax: 1,
      outputMin: 0.02,
      outputMax: 0.12
    }}
  />
</Shader>
```

```vue
<Shader class="w-full h-64">
  <LinearGradient
    id="grad"
    colorA="#000000"
    colorB="#ffffff"
  />
  <DotGrid
    dotSize={{
      type: 'map',
      source: 'grad',
      channel: 'luminance',
      inputMin: 0,
      inputMax: 1,
      outputMin: 0.02,
      outputMax: 0.12
    }}
  />
</Shader>
```

```javascript
const shader = await createShader(canvas, {
  components: [
    {
      type: 'LinearGradient',
      id: 'grad',
      props: { colorA: '#000000', colorB: '#ffffff' }
    },
    {
      type: 'DotGrid',
      props: {
        dotSize: {
          type: 'map',
          source: 'grad',
          channel: 'luminance',
          inputMin: 0,
          inputMax: 1,
          outputMin: 0,
          outputMax: 1
        }
      }
    }
  ]
})
```

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

### Sizing the canvas - Fluid with aspect ratio

Source: https://shaders.com/docs/guide/react/quickstart

Configure the Shader component to be fluid with a video aspect ratio using Tailwind CSS classes.

```jsx
{/* Fluid with aspect ratio */}
<Shader className="w-full aspect-video">
  <LinearGradient />
</Shader>

```

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

### React Usage Example

Source: https://shaders.com/docs/components/radialgradient

Example of using the RadialGradient component in a React template.

```jsx
<Shader>
  <RadialGradient
    radius={1}
  />
</Shader>

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/radialgradient

Example of using the RadialGradient component in a Vue template.

```html
<Shader>
  <RadialGradient
    :radius="1"
  />
</Shader>

```

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

### JavaScript Usage Example

Source: https://shaders.com/docs/components/flower

Example of creating a shader with the Flower component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Flower', props: { color: '#ffffff', radius: 0.4 } }
  ]
})

```

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

### JavaScript Usage

Source: https://shaders.com/docs/components/webcamtexture

JavaScript example for creating a shader with WebcamTexture component.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'WebcamTexture', props: {} }
  ]
})

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/cursorripples

Example of how to use the CursorRipples component in a Vue.js application.

```html
<Shader>
  <CursorRipples
    :intensity="10"
    :radius="0.5"
  >
    <Circle />
  </CursorRipples>
</Shader>

```

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

### React Usage Example

Source: https://shaders.com/docs/components/bulge

Example of using the Bulge component in React.js.

```jsx
<Shader>
  <Bulge
    radius={1}
  >
    <Circle />
  </Bulge>
</Shader>
```

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

### React Usage

Source: https://shaders.com/docs/components/saturation

Example of using the Saturation component in React.

```React
<Shader>
  <Saturation
    intensity={1}
  >
    <Circle />
  </Saturation>
</Shader>


```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/bulge

Example of using the Bulge component in Vue.js.

```html
<Shader>
  <Bulge
    :radius="1"
  >
    <Circle />
  </Bulge>
</Shader>
```

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

### Vue Usage

Source: https://shaders.com/docs/components/duotone

Example usage of the Duotone component in Vue.

```html
<Shader>
  <Duotone>
    <Circle />
  </Duotone>
</Shader>

```

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

### Usage Example

Source: https://shaders.com/docs/components/chromaticaberration

Example of how to use the ChromaticAberration component within a Shader.

```jsx
<Shader>
  <ChromaticAberration>
    <Circle />
  </ChromaticAberration>
</Shader>

```

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

### Mirror Component Initialization

Source: https://shaders.com/docs/components/mirror

Example of creating a shader with the Mirror component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Mirror', props: {}, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

```

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

### JSX Examples

Source: https://shaders.com/docs/guide/shape-effects

Examples of using different shapes with JSX components.

```jsx
// Circle (default)
<Glass shape={JSON.stringify({ type: "circleSDF", radius: 0.35 })} />

// Six-pointed star
<Neon shape={JSON.stringify({ type: "starSDF", radius: 0.35, sides: 6, innerRatio: 0.45 })} />

// Rounded rectangle
<Emboss shape={JSON.stringify({ type: "roundedRectSDF", width: 0.4, height: 0.25, rounding: 0.06 })} />
```

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

### Fog Component Initialization

Source: https://shaders.com/docs/components/fog

Example of importing and creating a shader with the Fog component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Fog', props: {} }
  ]
})

```

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

### Basic Props - JavaScript

Source: https://shaders.com/docs/guide/props-reactivity

Example of creating a shader with static props using JavaScript.

```JavaScript
const shader = await createShader(canvas, {
  components: [
    { type: 'Circle', props: { color: '#ff0088', radius: 0.5 } }
  ]
})
```

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

### Cross Component Initialization

Source: https://shaders.com/docs/components/cross

Example of initializing the Cross component programmatically using createShader.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Cross', props: { color: '#ffffff', radius: 0.35 } }
  ]
})

```

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

### JavaScript Usage Example

Source: https://shaders.com/docs/components/vesica

Example of creating a shader with a Vesica component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Vesica', props: { color: '#ffffff', radius: 0.35 } }
  ]
})


```

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

### Grid Component Initialization

Source: https://shaders.com/docs/components/grid

Example of initializing a shader with the Grid component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Grid', props: { color: '#ffffff' } }
  ]
})

```

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

### Vignette Usage Example

Source: https://shaders.com/docs/components/vignette

Example of how to use the Vignette component with Vue.js syntax.

```html
<Shader>
  <Vignette
    color="#000000"
    :radius="0.5"
    :intensity="1"
  >
    <Circle />
  </Vignette>
</Shader>

```

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

### Visibility Example

Source: https://shaders.com/docs/guide/blending-masking

Shows how to use the 'visible' prop to completely hide a component from the composition.

```jsx
<Circle visible={false} />
```

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

### React Usage Example

Source: https://shaders.com/docs/components/polarcoordinates

Example of using the PolarCoordinates component in a React.js application.

```jsx
<Shader>
  <PolarCoordinates
    radius={1}
    intensity={1}
  >
    <Circle />
  </PolarCoordinates>
</Shader>

```

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

### JavaScript Usage Example

Source: https://shaders.com/docs/components/reflectiveplane

JavaScript example demonstrating the creation of a shader with a ReflectivePlane component.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'ReflectivePlane', props: {}, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})
```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/polarcoordinates

Example of using the PolarCoordinates component in a Vue.js application.

```vue
<Shader>
  <PolarCoordinates
    :radius="1"
    :intensity="1"
  >
    <Circle />
  </PolarCoordinates>
</Shader>

```

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

### JavaScript Usage

Source: https://shaders.com/docs/components/duotone

Example usage of the Duotone component with JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Duotone', props: {}, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/ring

Example of using the Ring component in a Vue template.

```html
<Shader>
  <Ring
    color="#ffffff"
    :radius="0.3"
  />
</Shader>

```

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

### JavaScript Usage Example

Source: https://shaders.com/docs/components/griddistortion

Example of creating a shader with GridDistortion using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'GridDistortion', props: { intensity: 1, radius: 1 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

```

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

### React Usage Example

Source: https://shaders.com/docs/components/griddistortion

Example of how to use the GridDistortion component in a React application.

```jsx
<Shader>
  <GridDistortion
    intensity={1}
    radius={1}
  >
    <Circle />
  </GridDistortion>
</Shader>

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/griddistortion

Example of how to use the GridDistortion component in a Vue application.

```html
<Shader>
  <GridDistortion
    :intensity="1"
    :radius="1"
  >
    <Circle />
  </GridDistortion>
</Shader>

```

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

### Vue Usage

Source: https://shaders.com/docs/components/saturation

Example of using the Saturation component in Vue.

```Vue
<Shader>
  <Saturation
    :intensity="1"
  >
    <Circle />
  </Saturation>
</Shader>


```

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

### Vue Usage

Source: https://shaders.com/docs/components/solarize

Example of using the Solarize component in Vue.

```html
<Shader>
  <Solarize>
    <Circle />
  </Solarize>
</Shader>

```

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

### React Usage Example

Source: https://shaders.com/docs/components/cursortrail

Example of how to use the CursorTrail component in a React application.

```html
<Shader>
  <CursorTrail
    radius={0.5}
  />
</Shader>

```

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

### React Usage

Source: https://shaders.com/docs/components/tiltshift

Example of using the TiltShift component in React.

```html
<Shader>
  <TiltShift
    intensity={50}
  >
    <Circle />
  </TiltShift>
</Shader>

```

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

### Common Reactive Props - Position and Size

Source: https://shaders.com/docs/guide/props-reactivity

Example of using reactive props for position and size.

```HTML
<Circle :radius="size" :center="{ x: posX, y: posY }" />
```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/cursortrail

Example of how to use the CursorTrail component in a Vue application.

```html
<Shader>
  <CursorTrail
    :radius="0.5"
  />
</Shader>

```

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

### React Usage Example

Source: https://shaders.com/docs/components/barshift

Example of how to use the BarShift component in a React.js application.

```jsx
<Shader>
  <BarShift
    intensity={0.15}
  >
    <Circle />
  </BarShift>
</Shader>

```

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

### DropShadow Initialization with createShader

Source: https://shaders.com/docs/components/dropshadow

Example of initializing DropShadow using the createShader function.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'DropShadow', props: { color: '#000000', intensity: 0.5 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/barshift

Example of how to use the BarShift component in a Vue.js application.

```html
<Shader>
  <BarShift
    :intensity="0.15"
  >
    <Circle />
  </BarShift>
</Shader>

```

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

### JavaScript Usage

Source: https://shaders.com/docs/components/saturation

Example of using the Saturation component with JavaScript.

```JavaScript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Saturation', props: { intensity: 1 }, children: [
      { type: 'Circle', props: {} }
    ]}
  ]
})


```

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

### Sizing the canvas - Fill the viewport

Source: https://shaders.com/docs/guide/react/quickstart

Configure the Shader component to fill the entire viewport using Tailwind CSS classes.

```jsx
{/* Fill the viewport */}
<Shader className="w-screen h-screen">
  <LinearGradient />
</Shader>

```

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

### Beam Component Initialization

Source: https://shaders.com/docs/components/beam

Example of creating a shader with the Beam component using JavaScript.

```javascript
import { createShader } from 'shaders/js'

const shader = await createShader(canvas, {
  components: [
    { type: 'Beam', props: {} }
  ]
})

```

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

### Combining Blend Modes Example

Source: https://shaders.com/docs/guide/blending-masking

Shows how to use different blend modes ('screen' and 'difference') on multiple layers for complex interactions.

```jsx
<Shader>
  <LinearGradient />

  <Circle color="#00ffff" radius="0.6" :center="{ x: 0.4, y: 0.5 }" blendMode="screen" />
  <Circle color="#ff00ff" radius="0.6" :center="{ x: 0.6, y: 0.5 }" blendMode="difference" />
</Shader>
```

```jsx
<Shader>
  <LinearGradient />

  <Circle color="#00ffff" radius={0.6} center={{ x: 0.4, y: 0.5 }} blendMode="screen" />
  <Circle color="#ff00ff" radius={0.6} center={{ x: 0.6, y: 0.5 }} blendMode="difference" />
</Shader>
```

```jsx
<Shader>
  <LinearGradient />

  <Circle color="#00ffff" radius={0.6} center={{ x: 0.4, y: 0.5 }} blendMode="screen" />
  <Circle color="#ff00ff" radius={0.6} center={{ x: 0.6, y: 0.5 }} blendMode="difference" />
</Shader>
```

```jsx
<Shader>
  <LinearGradient />

  <Circle color="#00ffff" radius={0.6} center={{ x: 0.4, y: 0.5 }} blendMode="screen" />
  <Circle color="#ff00ff" radius={0.6} center={{ x: 0.6, y: 0.5 }} blendMode="difference" />
</Shader>
```

```javascript
const shader = await createShader(canvas, {
  components: [
    { type: 'LinearGradient', props: {} },
    { type: 'Circle', props: { color: '#00ffff', radius: 0.6, center: { x: 0.4, y: 0.5 }, blendMode: 'screen' } },
    { type: 'Circle', props: { color: '#ff00ff', radius: 0.6, center: { x: 0.6, y: 0.5 }, blendMode: 'difference' } }
  ]
})
```

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

### Vignette Usage Example (React/JSX)

Source: https://shaders.com/docs/components/vignette

Example of how to use the Vignette component with React/JSX syntax.

```jsx
<Shader>
  <Vignette
    color="#000000"
    radius={0.5}
    intensity={1}
  >
    <Circle />
  </Vignette>
</Shader>

```

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

### React/JSX Usage Example

Source: https://shaders.com/docs/components/spherize

Example of using the Spherize component with React or JSX.

```jsx
<Shader>
  <Spherize
    radius={1}
  >
    <Circle />
  </Spherize>
</Shader>

```

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

### Basic Cross Usage

Source: https://shaders.com/docs/components/cross

Example of using the Cross component with default and specified props.

```html
<Shader>
  <Cross
    color="#ffffff"
    :radius="0.35"
  />
</Shader>

```

```html
<Shader>
  <Cross
    color="#ffffff"
    radius={0.35}
  />
</Shader>

```

```html
<Shader>
  <Cross
    color="#ffffff"
    radius={0.35}
  />
</Shader>

```

```html
<Shader>
  <Cross
    color="#ffffff"
    radius={0.35}
  />
</Shader>

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/spherize

Example of using the Spherize component in a Vue.js application.

```html
<Shader>
  <Spherize
    :radius="1"
  >
    <Circle />
  </Spherize>
</Shader>

```

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

### Basic Beam Usage

Source: https://shaders.com/docs/components/beam

Example of how to use the Beam component within a Shader.

```html
<Shader>
  <Beam />
</Shader>

```

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

### Responsive sizing

Source: https://shaders.com/docs/guide/layout-positioning

Shaders respond to any CSS-based resize.

```html
<!-- Different heights at breakpoints -->
<Shader class="w-full h-48 md:h-72 lg:h-screen">
  <LinearGradient />
</Shader>

<!-- Aspect ratio preserving at any width -->
<Shader class="w-full aspect-square md:aspect-video">
  <Swirl />
</Shader>

<!-- Dynamic viewport height (mobile-safe) -->
<Shader class="w-full h-[100dvh]">
  <Aurora />
</Shader>

```

```html
<Shader className="w-full h-48 md:h-72 lg:h-screen">
  <LinearGradient />
</Shader>

```

```html
<Shader class="w-full h-48 md:h-72 lg:h-screen">
  <LinearGradient />
</Shader>

```

```html
<Shader class="w-full h-48 md:h-72 lg:h-screen">
  <LinearGradient />
</Shader>

```

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

### Vue Usage Example

Source: https://shaders.com/docs/components/smoke

Example of how to use the Smoke component in a Vue.js application.

```html
<Shader>
  <Smoke
    :intensity="1"
  />
</Shader>

```

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

### Vue Usage

Source: https://shaders.com/docs/components/tiltshift

Example of using the TiltShift component in Vue.

```html
<Shader>
  <TiltShift
    :intensity="50"
  >
    <Circle />
  </TiltShift>
</Shader>

```

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

### Opacity Example

Source: https://shaders.com/docs/guide/blending-masking

Demonstrates controlling layer transparency with the 'opacity' prop, ranging from 0 (transparent) to 1 (opaque).

```jsx
<Shader>
  <LinearGradient />

  <Circle color="#ff0088" radius="0.8" opacity="0.5" />
</Shader>
```

```jsx
<Shader>
  <LinearGradient />

  <Circle color="#ff0088" radius={0.8} opacity={0.5} />
</Shader>
```

```jsx
<Shader>
  <LinearGradient />

  <Circle color="#ff0088" radius={0.8} opacity={0.5} />
</Shader>
```

```jsx
<Shader>
  <LinearGradient />

  <Circle color="#ff0088" radius={0.8} opacity={0.5} />
</Shader>
```

```javascript
const shader = await createShader(canvas, {
  components: [
    { type: 'LinearGradient', props: {} },
    { type: 'Circle', props: { color: '#ff0088', radius: 0.8, opacity: 0.5 } }
  ]
})
```

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

### React Usage

Source: https://shaders.com/docs/components/plasma

Example of using the Plasma component in a React application.

```html
<Shader>
  <Plasma
    intensity={1.5}
  />
</Shader>

```

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

### HueShift Usage Example

Source: https://shaders.com/docs/components/hueshift

Example of how to use the HueShift component within a Shader context.

```jsx
<Shader>
  <HueShift>
    <Circle />
  </HueShift>
</Shader>

```

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

### React Usage Example

Source: https://shaders.com/docs/components/glitch

Example of how to use the Glitch component in a React.js application.

```jsx
<Shader>
  <Glitch
    intensity={0.5}
  >
    <Circle />
  </Glitch>
</Shader>
```