# Iridescence

> Liquid iridescent surface with shifting folds that you can stir with the cursor.

A liquid iridescent surface of folded color layers, drawn in one raw WebGL2 shader. Drag the cursor across it and the folds stir along like a liquid while a soft sheen follows the pointer; click to stir in a swirl that slowly unwinds. Color, folds and motion are all tunable. Pick a preset in the demo panel, from Pearl to Chrome, Graphite and Oil.

<demo-iridescence>



</demo-iridescence>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import Iridescence from '~/components/ui/iridescence/Iridescence.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <Iridescence
      color="#8099cc"
      :brightness="1.5"
      :stir="0.5"
      :sheen="0.3"
      :click-swirl="true"
    />
  </div>
</template>
```

The demo presets ship with the component: `iridescencePreset('chrome')` returns the look of the Classic, Pearl, Chrome, Graphite or Oil preset.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string | number[]
      </code>
    </td>
    
    <td>
      <code>
        [1, 1, 1]
      </code>
    </td>
    
    <td>
      Tint multiplied over the colors. Any CSS color, or an RGB array from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        hue-shift
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Rotates the hues, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        saturation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Color intensity. 0 gives a monochrome chrome look.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        brightness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Overall brightness.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        contrast
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Contrast between the folds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Animation speed. 0 holds the pattern still.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Size of the pattern. Higher values give broader folds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        detail
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        8
      </code>
    </td>
    
    <td>
      How many layers of folds are stacked, from 1 to 24.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        warp
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How strongly the folds bend into each other.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rotation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Rotation of the pattern in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-react
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Turns the pointer interactions on or off: parallax, stir and sheen.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        amplitude
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.1
      </code>
    </td>
    
    <td>
      How far the pattern drifts toward the pointer.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stir
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Drags the folds along with the pointer like a liquid. 0 turns it off.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        sheen
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.3
      </code>
    </td>
    
    <td>
      Brightens the surface softly around the pointer.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-swirl
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Stirs a swirl into the surface wherever you click, which slowly unwinds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        grain
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Film grain over the surface, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fade
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Fades the edges into the page, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Opacity of the whole effect.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        resolution
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Render scale, from 0.1 to 2. Lower values trade sharpness for speed.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        paused
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Freezes the animation.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes merged on the container.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is decorative and marked `aria-hidden="true"`. Put real content above it.
- Pointer listeners are passive and sit on `window`, so clicks still reach content above the surface.
- With `prefers-reduced-motion: reduce` the surface holds still and there is no stir or swirl. The sheen still follows the pointer.
- The render loop stops when the surface is paused and settled, offscreen or in a hidden tab.
- Ported from [React Bits](https://reactbits.dev/backgrounds/iridescence) by David Haz.