# Line Waves

> Fine lines that flow in silky waves while a band of light drifts through them, with a cursor spotlight and click ripples.

Fine, crisp lines drawn in raw WebGL2 that bend into slow, silky waves while a soft band of light drifts through them. The lines draw in across the container on mount. Move the cursor and the lines spread apart and light up around it; click to send a smooth wave rolling out through them. Light mode draws the lines as deep ink for light backgrounds. Pick a preset in the demo panel, or press refresh to replay the intro.

<demo-line-waves>



</demo-line-waves>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import LineWaves from '~/components/ui/line-waves/LineWaves.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <LineWaves
      color1="#ffffff"
      color2="#ffffff"
      color3="#ffffff"
      :speed="0.3"
      :line-count="72"
      :line-width="1.3"
      :glow="0.6"
      :rotation="-33"
      :mouse-influence="2"
      :click-ripple="true"
    />
  </div>
</template>
```

The demo presets ship with the component: `lineWavesPreset('gold')` returns the props of the Silk, Gold, Arctic, Aurora, Engraving, Ribbon, Storm or Calm preset.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        color1
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      First color the lines blend through.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color2
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      Second color the lines blend through.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color3
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      Third color the lines blend through.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color-cycle-speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How fast the colors drift across the lines. <code>
        0
      </code>
      
       keeps them in place.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.3
      </code>
    </td>
    
    <td>
      How fast the waves flow. <code>
        0
      </code>
      
       freezes them.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        line-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        72
      </code>
    </td>
    
    <td>
      Number of lines across the height of the container.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        line-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.3
      </code>
    </td>
    
    <td>
      Thickness of the lines, in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Strength of the soft glow around each line.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        brightness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Overall brightness of the lines.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        highlight
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Strength of the band of light that drifts through the lines, from 0 to 1. At <code>
        0
      </code>
      
       every line is lit evenly.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        highlight-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Width of the band of light. Higher values light more lines at once.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        warp-intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How strongly the lines bend into waves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        warp-scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Size of the waves. Higher values give broad, sweeping curves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rotation
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        -33
      </code>
    </td>
    
    <td>
      Angle of the lines, in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        edge-fade
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Fades the lines out toward the edges of the container, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        enable-mouse-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The lines spread apart and light up around the cursor.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        mouse-influence
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      How strongly the lines react to the cursor.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        click-ripple
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Clicking sends a smooth wave rolling out through the lines.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The lines draw in across the container on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        light-mode
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Draws the lines as ink for light backgrounds. Colors turn into deeper inks of the same hue.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Overall opacity, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        max-device-pixel-ratio
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Highest pixel ratio the canvas renders at. The canvas also caps itself at about 2.4 million pixels.
    </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 and check its contrast against your line colors.
- Pointer listeners are passive and sit on `window`, so the lines never take focus or block clicks on content above them.
- With `prefers-reduced-motion: reduce` there is no intro, cursor spotlight or click ripple, and the waves flow at a quarter of the speed.
- The render loop stops when the lines are still, offscreen or in a hidden tab.
- Ported from [React Bits](https://reactbits.dev/backgrounds/line-waves) by David Haz.