# WebGL Liquid

> A premium liquid hero background powered by raw WebGL shaders, with configurable palette, grain, reveal timing, and flow behavior.

<demo-webgl-liquid>



</demo-webgl-liquid>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import WebGLLiquid from '~/components/ui/webgl-liquid/WebGLLiquid.vue';
</script>

<template>
  <WebGLLiquid title="Fluid Motion" subtitle="Premium Presence" />
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        title
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Fluid Motion'
      </code>
    </td>
    
    <td>
      Primary headline line
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        subtitle
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Premium Presence'
      </code>
    </td>
    
    <td>
      Secondary headline line
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        description
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Supporting hero copy below the title
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-deep
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#04050b'
      </code>
    </td>
    
    <td>
      Base dark tone used in the liquid gradient
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-mid
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#134d93'
      </code>
    </td>
    
    <td>
      Mid tone for blending transitions
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-highlight
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#8cecff'
      </code>
    </td>
    
    <td>
      Highlight tone for bright accents and glow
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Global animation speed multiplier
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flow-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Intensity of flow distortion and liquid drift
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.05
      </code>
    </td>
    
    <td>
      Dither grain amount applied in the shader
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        contrast
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.1
      </code>
    </td>
    
    <td>
      Shader contrast applied after color mixing
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.95
      </code>
    </td>
    
    <td>
      Overall alpha of the liquid layer
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reveal
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Enables left-to-right entrance wipe
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        delay-ms
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Delay before animation/reveal begins (ms)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reveal-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.2
      </code>
    </td>
    
    <td>
      Duration of the reveal wipe in seconds
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Additional CSS classes
    </td>
  </tr>
</tbody>
</table>