# Color Bends

> Bands of color that bend and fold into each other in a slow, flowing warp that leans toward your cursor.

Soft bands of color bend and fold into each other in a slow, flowing warp. Move the cursor over the effect and the pattern leans toward it and shifts a little in depth. Pass one color for a single glowing band, up to eight for a blend, or none for the built-in RGB bands.

<demo-color-bends>



</demo-color-bends>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import ColorBends from '~/components/ui/color-bends/ColorBends.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden bg-black">
    <ColorBends
      :colors="['#5227FF', '#FF9FFC', '#7cff67']"
      :auto-rotate="2"
      :iterations="2"
    />
  </div>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        colors
      </code>
    </td>
    
    <td>
      <code>
        string[]
      </code>
    </td>
    
    <td>
      <code>
        []
      </code>
    </td>
    
    <td>
      Up to 8 hex colors. Empty uses the built-in RGB bands.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rotation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        90
      </code>
    </td>
    
    <td>
      Base rotation of the pattern, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        auto-rotate
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Extra rotation added every second, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      Animation speed.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Zoom of the pattern. Higher values zoom out.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        frequency
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Frequency of the bends.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        warp-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How strongly the bands warp.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-influence
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How strongly the pattern pulls toward the cursor.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        parallax
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How far the pattern shifts with the cursor.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.15
      </code>
    </td>
    
    <td>
      Amount of film grain.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        iterations
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Extra folding passes, from 1 to 5. More passes add detail.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Brightness of the bands.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        band-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        6
      </code>
    </td>
    
    <td>
      Sharpness of the bands. Higher values make thinner, crisper bands.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        transparent
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Transparent canvas, so the page shows through between the bands.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the container.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is decorative and has `aria-hidden="true"`. Put real content on top of it.
- With `prefers-reduced-motion: reduce` the bands hold still; the cursor still nudges them.
- Rendering stops while the effect is off screen.
- Ported from [React Bits](https://reactbits.dev/backgrounds/color-bends) by David Haz.