# Electric Border

> Wraps any element in crackling strands of current that surge near the cursor and leap off in sparks.

Wraps any element in layered strands of lightning with sparks and a soft glow. The current races around the edge from the top as it powers on, surges near the cursor, and a click sends a jolt racing around the border. Toggle `active` to power it on and off; in the composer demo the stop button does exactly that.

<demo-electric-border>



</demo-electric-border>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import { ref } from 'vue';
  import ElectricBorder from '~/components/ui/electric-border/ElectricBorder.vue';

  const generating = ref(true);
  const colorMode = useColorMode();
</script>

<template>
  <ElectricBorder
    color="#7df9ff"
    :border-radius="24"
    :active="generating"
    :theme="colorMode.value === 'light' ? 'light' : 'dark'"
    class="w-full max-w-130"
  >
    <div class="rounded-3xl bg-card p-4">
      Write a launch post for our new electric borders.
      <button type="button" @click="generating = !generating">Stop</button>
    </div>
  </ElectricBorder>
</template>
```

The border is drawn on a WebGL canvas that extends 64px beyond the wrapper, so leave some room around it (or let the parent clip it). Match `border-radius` to the content's own radius.

## 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
      </code>
    </td>
    
    <td>
      <code>
        '#7df9ff'
      </code>
    </td>
    
    <td>
      Color of the current. The strands burn whiter at their core.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Color of the glow around the strands. Defaults to <code>
        color
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How fast the current crackles and moves.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        chaos
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How jagged the strands are, from 0 to 2.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spread
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      How far the strands wander from the edge, from 0 to 2.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        thickness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Thickness of the strands, in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        strands
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        3
      </code>
    </td>
    
    <td>
      Number of strands running along the edge, from 1 to 6.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      Strength of the glow around the border.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.8
      </code>
    </td>
    
    <td>
      Overall brightness of the current.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        arcs
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How often sparks leap off the border. <code>
        0
      </code>
      
       turns them off.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flicker
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      How much the current flickers, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        24
      </code>
    </td>
    
    <td>
      Corner radius of the border, in px. Match it to your content.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        offset
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Moves the border outward from the edge of the content, in px. Negative values move it inward.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        active
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Powers the border on or off. Turning it on sends the current racing around the edge again.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intro
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The current races around the edge from the top when the border mounts.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        interactive
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      The current surges near the cursor and clicks send a jolt around the edge.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cursor-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        90
      </code>
    </td>
    
    <td>
      Size of the area around the cursor where the current surges, in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        theme
      </code>
    </td>
    
    <td>
      <code>
        'dark' | 'light'
      </code>
    </td>
    
    <td>
      <code>
        'dark'
      </code>
    </td>
    
    <td>
      Glowing light for dark pages, or crisp ink with a white core for light ones.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the wrapper.
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      Content wrapped by the border.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is `aria-hidden` and ignores pointer events, so the wrapped content keeps its own focus order and hit targets.
- With `prefers-reduced-motion: reduce`, the current moves at a fifth of the speed, flicker, sparks and click jolts are off, and the power-on race is skipped.
- Rendering stops when the border is off-screen, the tab is hidden, or the border is powered down.
- Ported from [React Bits](https://reactbits.dev/animations/electric-border) by David Haz.