# Chaos Button

> A pill button filled with drifting neon lines from a WebGL shader that tighten and scatter while pressed.

<demo-chaos-button>



</demo-chaos-button>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import ChaosButton from '~/components/ui/chaos-button/ChaosButton.vue';
</script>

<template>
  <ChaosButton label="Chaos Button" />
</template>
```

At rest, soft neon lines drift across the button. Pressing it with the pointer, Enter or Space eases every shader value into the active state — faster, tighter and more chaotic — and releasing eases back.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Chaos Button'
      </code>
    </td>
    
    <td>
      Button text; the default slot overrides it
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noise
      </code>
    </td>
    
    <td>
      <code>
        'hash' | 'trig'
      </code>
    </td>
    
    <td>
      <code>
        'trig'
      </code>
    </td>
    
    <td>
      Noise function behind the lines
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        resting
      </code>
    </td>
    
    <td>
      <code>
        Partial<ChaosState>
      </code>
    </td>
    
    <td>
      <code>
        {}
      </code>
    </td>
    
    <td>
      Overrides for the resting state
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        active
      </code>
    </td>
    
    <td>
      <code>
        Partial<ChaosState>
      </code>
    </td>
    
    <td>
      <code>
        {}
      </code>
    </td>
    
    <td>
      Overrides for the pressed state
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        active-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Seconds to ease into the pressed state
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        resting-duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Seconds to ease back to rest
    </td>
  </tr>
</tbody>
</table>

`ChaosState` is `{ speed, amplitude, pulseMin, pulseMax, chaos }`. The defaults are `{ 0.35, 80, 0.05, 0.2, 1 }` at rest and `{ 0.8, 10, 0.05, 0.2, 2.6 }` when pressed.

The shader pauses off screen. With `prefers-reduced-motion`, the lines hold still and state changes are instant.

Ported from Jhey Tompkins' [GLSL chaos button](https://jhey.dev/demos/2026/glsl-chaos-button).