# Threads

> Flowing threads that fray apart and part around the cursor, from fine silk to contour lines.

A bundle of threads that flows across the screen and frays apart along its length. Every thread is one instanced strip in raw WebGL2, so even 400 threads stay fast. Set `parting` and the threads move aside around the cursor; turn on `enable-mouse-interaction` and the cursor steers the waves. Pick a preset in the demo panel, from fine Silk to Contour lines and a vertical Curtain.

<demo-threads>



</demo-threads>

## Installation

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

## Usage

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

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <Threads
      color="#ffffff"
      :line-count="90"
      :amplitude="1.7"
      :distance="0.4"
      :angle="25"
      :enable-mouse-interaction="true"
    />
  </div>
</template>
```

The demo presets ship with the component: `threadsPreset('contour')` returns the look of the Silk, Classic, Rope, Strands, Contour or Curtain 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>
      Color of the threads. Any CSS color, or an RGB array from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        accent-color
      </code>
    </td>
    
    <td>
      <code>
        string | number[]
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      Color the outer threads blend toward. Leave it out for a single color.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        line-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        90
      </code>
    </td>
    
    <td>
      Number of threads, from 1 to 400.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        thickness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Width of the threads.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        softness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.3
      </code>
    </td>
    
    <td>
      How much the threads soften as they separate. 0 keeps every thread crisp.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        amplitude
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.7
      </code>
    </td>
    
    <td>
      Height of the waves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        distance
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.4
      </code>
    </td>
    
    <td>
      Spacing between the threads. 0 starts them all from a single line.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        waves
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.05
      </code>
    </td>
    
    <td>
      How many waves run along each thread.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Animation speed. 0 holds the threads still.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        split
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.04
      </code>
    </td>
    
    <td>
      Where the first thread leaves the bundle, from 0 at the start to 1 at the end.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fray
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How gradually the other threads peel away after the first one.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        angle
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        25
      </code>
    </td>
    
    <td>
      Direction of the threads in degrees.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        taper
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.85
      </code>
    </td>
    
    <td>
      How much the outer threads fade away, from 0 for all equally bright to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        brightness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.4
      </code>
    </td>
    
    <td>
      Brightness of the threads, from 0.25 to 2.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        parting
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      How far the threads move aside around the cursor, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        enable-mouse-interaction
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      The cursor steers the waves: sideways shifts them, up and down changes height.
    </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>
        seed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Changes the wave pattern.
    </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.
- The pointer listener is passive and sits on `window`, so the threads never take focus or clicks.
- With `prefers-reduced-motion: reduce` the threads hold still. The cursor can still part them.
- The render loop stops when the threads are paused and settled, offscreen or in a hidden tab.
- Ported from [React Bits](https://reactbits.dev/backgrounds/threads) by David Haz.