# Animated Gradient

> A beautiful, animated, and customizable WebGL gradient with noise capabilities. Supports built-in presets (Aurora, Oceanic, Amber, Toxic, Ghost) and fully custom configurations.

<demo-animated-gradient>



</demo-animated-gradient>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/animated-gradient.json"
```

## Usage

```vue
<script setup lang="ts">
  import AnimatedGradient from '~/components/ui/animated-gradient/AnimatedGradient.vue';
</script>

<template>
  <AnimatedGradient
    :config="{ preset: 'Aurora' }"
    :noise="{ opacity: 0.2, scale: 1 }"
    class="h-100"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        config
      </code>
    </td>
    
    <td>
      <code>
        GradientConfig
      </code>
    </td>
    
    <td>
      <code>
        { preset: 'Aurora' }
      </code>
    </td>
    
    <td>
      Preset name or custom configuration for the gradient pattern
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise
      </code>
    </td>
    
    <td>
      <code>
        NoiseConfig
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Options to apply a noise overlay
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radius
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '0px'
      </code>
    </td>
    
    <td>
      Border radius applied to the container
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes for styling
    </td>
  </tr>
</tbody>
</table>

### GradientConfig (Preset)

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        preset
      </code>
    </td>
    
    <td>
      <code>
        PresetName
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      <code>
        'Aurora'
      </code>
      
       | <code>
        'Oceanic'
      </code>
      
       | <code>
        'Amber'
      </code>
      
       | <code>
        'Toxic'
      </code>
      
       | <code>
        'Ghost'
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Override the preset speed
    </td>
  </tr>
</tbody>
</table>

### GradientConfig (Custom)

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        preset
      </code>
    </td>
    
    <td>
      <code>
        'custom'
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Must be <code>
        'custom'
      </code>
      
       for custom configs
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color1
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Primary base color (hex, rgb, hsl)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color2
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Secondary color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color3
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Accent color
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rotation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Gradient rotation in degrees
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        proportion
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        35
      </code>
    </td>
    
    <td>
      Color proportion balance (0–100)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Noise scale factor
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        25
      </code>
    </td>
    
    <td>
      Animation speed
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        distortion
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        12
      </code>
    </td>
    
    <td>
      Flow distortion intensity
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        swirl
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        80
      </code>
    </td>
    
    <td>
      Swirl effect intensity (0–100)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        swirl-iterations
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        10
      </code>
    </td>
    
    <td>
      Number of swirl iterations (1–30)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        softness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        100
      </code>
    </td>
    
    <td>
      Color blending softness (0–100)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        offset
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Time offset for animation start
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shape
      </code>
    </td>
    
    <td>
      <code>
        PatternShape
      </code>
    </td>
    
    <td>
      <code>
        'Checks'
      </code>
    </td>
    
    <td>
      Pattern shape: <code>
        'Checks'
      </code>
      
       | <code>
        'Stripes'
      </code>
      
       | <code>
        'Edge'
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shape-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        10
      </code>
    </td>
    
    <td>
      Pattern shape scale (0–100)
    </td>
  </tr>
</tbody>
</table>

### NoiseConfig

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Noise overlay opacity (0–1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Noise texture scale multiplier
    </td>
  </tr>
</tbody>
</table>