# Micro Slats

> A wall of tiny slats that becomes a rolling sea in perspective, with glinting crests.

A WebGL background that draws a grid of small rounded slats and lights them like a sea rolling in towards you, with bright glints on the crests. Pick a preset or tune each wave value. Move the cursor to stir a real fluid that bends the swell and leaves a trail of light, and click to spin out a splash.

<demo-micro-slats>



</demo-micro-slats>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import MicroSlats from '~/components/ui/micro-slats/MicroSlats.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <MicroSlats
      preset="swell"
      color="#A855F7"
      glint-color="#ffffff"
      background-color="#120f17"
      :slat-width="10"
      :slat-height="25"
      :gap="3"
      :roundness="0.75"
    />
  </div>
</template>
```

## Presets

<table>
<thead>
  <tr>
    <th>
      Preset
    </th>
    
    <th>
      Look
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        swell
      </code>
    </td>
    
    <td>
      Long, calm waves rolling towards the viewer.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        tide
      </code>
    </td>
    
    <td>
      Slow, low-chop water with a little slat stretch.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        storm
      </code>
    </td>
    
    <td>
      Short, steep, bright waves with deep perspective.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        signal
      </code>
    </td>
    
    <td>
      A flat wall with no perspective, like an equalizer.
    </td>
  </tr>
</tbody>
</table>

Any wave prop you pass overrides the preset value.

## Props

<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>
        'swell' | 'tide' | 'storm' | 'signal'
      </code>
    </td>
    
    <td>
      <code>
        'swell'
      </code>
    </td>
    
    <td>
      A starting look for the sea. Every wave prop below overrides it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#A855F7'
      </code>
    </td>
    
    <td>
      Color of the slats.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glint-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ffffff'
      </code>
    </td>
    
    <td>
      Color the slats shift towards on crests and in the light the cursor leaves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#000000'
      </code>
    </td>
    
    <td>
      Color behind the slats. Pass <code>
        transparent
      </code>
      
       to show the page through.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        slat-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        10
      </code>
    </td>
    
    <td>
      Width of one slat in CSS pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        slat-height
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        25
      </code>
    </td>
    
    <td>
      Full height of one slat in CSS pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gap
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Space between slats in CSS pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        roundness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.75
      </code>
    </td>
    
    <td>
      Corner rounding, from square at 0 to a full pill at 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      from preset
    </td>
    
    <td>
      Size of the swell. Larger values give longer, calmer waves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      from preset
    </td>
    
    <td>
      How fast the waves roll. 0 freezes the sea while the cursor can stir it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        direction
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      from preset
    </td>
    
    <td>
      Heading of the swell in degrees. 270 rolls straight towards the viewer.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        chop
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      from preset
    </td>
    
    <td>
      Sharpens the crests and flattens the troughs, like wind on the water.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stretch
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      from preset
    </td>
    
    <td>
      How much each slat grows and shrinks with the wave under it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glint
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      from preset
    </td>
    
    <td>
      Strength of the light caught on the crests.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        contrast
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      from preset
    </td>
    
    <td>
      Spread between dark troughs and bright crests.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        perspective
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      from preset
    </td>
    
    <td>
      How far the sea recedes towards a horizon above the top edge. 0 is flat.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fog
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      from preset
    </td>
    
    <td>
      Haze that fades the far rows into the background.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        interactive
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Lets the cursor stir the water. A click spins out a splash.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cursor-strength
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Brightness of the light the cursor leaves in the water.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cursor-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        40
      </code>
    </td>
    
    <td>
      Radius of the patch of water the cursor pushes, in CSS pixels.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        swirl
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      How strongly the stirred water curls into eddies.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        trail
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.4
      </code>
    </td>
    
    <td>
      How long the stirred water and its light linger, in seconds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        lean
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      How far the slats tilt with the current. 0 keeps them upright.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Rolls the sea in from the horizon on mount, unfolding the slats row by row.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Length of the intro in seconds.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        paused
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Freezes the waves. The cursor can still stir the water.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the root element.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        style
      </code>
    </td>
    
    <td>
      <code>
        StyleValue
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Inline styles for the root element.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is decorative and hidden from assistive technology (`aria-hidden`).
- With `prefers-reduced-motion: reduce` the waves and the intro stay still and the cursor does not stir the water.
- The animation pauses while the component is offscreen or the tab is hidden.
- Pointer listeners are passive and never block page scrolling.
- Ported from [React Bits](https://reactbits.dev/backgrounds/micro-slats) by David Haz.