# Electric Logo

> Turns any logo into a living lightning outline, with arcs that leap off its edges.

Traces any logo or image into a living lightning outline. Strands follow the shape's edge and sway, ripple and crackle as they flow, and short arcs leap off the edge. Hover to charge the lightning around the cursor; click to send a ripple through it with a burst of arcs. Use the pane to switch logos or upload your own.

<demo-electric-logo>



</demo-electric-logo>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import ElectricLogo from '~/components/ui/electric-logo/ElectricLogo.vue';
</script>

<template>
  <div class="relative h-125 w-full overflow-hidden">
    <ElectricLogo
      src="/logo.svg"
      color="#ecc7ff"
      glow-color="#ad6dff"
      :scale="0.7"
      :strands="4"
      :bend="0.6"
      :crackle="1.5"
      :arcs="1"
      :speed="2.5"
      theme="dark"
    />
  </div>
</template>
```

Pass any image URL as `src`. SVGs and transparent PNGs are traced by their alpha; opaque images are traced by keying out their backdrop colour. Remote images must allow CORS. Changing `src` morphs the lightning from the old shape to the new one. Set `theme="light"` when the logo sits on a light background.

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        src
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        lightning bolt
      </code>
    </td>
    
    <td>
      Any image URL. SVGs and transparent PNGs are traced by their alpha; opaque images by keying out their backdrop colour.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ecc7ff'
      </code>
    </td>
    
    <td>
      Colour of the hot core of every strand.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#ad6dff'
      </code>
    </td>
    
    <td>
      Colour of the glow around the strands, the bloom and the interior fill.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.7
      </code>
    </td>
    
    <td>
      Size of the logo as a fraction of the container. The glow and arcs extend beyond it.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Overall brightness of the effect.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Strength of the halo around strands and the soft bloom around the shape.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        thickness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Width of the main strand, in px. Satellite strands are thinner, and every strand swells and thins as it flows.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        strands
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        4
      </code>
    </td>
    
    <td>
      Number of filaments tracing the outline, from 1 to 6. Extra strands come and go along the edge.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        bend
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      How far the strands sway and ripple away from the outline. The main strand stays closest.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        crackle
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Size of the fine crinkle along every strand and arc.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        arcs
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      How often short arcs leap off the edge and land further along it. <code>
        0
      </code>
      
       turns them off.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        flicker
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.6
      </code>
    </td>
    
    <td>
      How much the whole effect pulses and each strand shimmers in brightness.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fill
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Translucent glow inside the shape, brightest near its edges.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        speed
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2.5
      </code>
    </td>
    
    <td>
      Animation speed. <code>
        0
      </code>
      
       freezes the current frame.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        interactive
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Turn on pointer interactions. Hovering charges the lightning around the cursor, and a click sends a ripple through it with a burst of arcs.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cursor-intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.75
      </code>
    </td>
    
    <td>
      How strongly the lightning charges up around the cursor. <code>
        0
      </code>
      
       turns the hover charge off.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cursor-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        100
      </code>
    </td>
    
    <td>
      Radius of the charged area around the cursor, in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        theme
      </code>
    </td>
    
    <td>
      <code>
        'dark' | 'light'
      </code>
    </td>
    
    <td>
      <code>
        'dark'
      </code>
    </td>
    
    <td>
      The background the logo sits on. Dark renders the lightning as emitted light. Light renders crisp electric ink with a white-hot core and a lighter fill.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        on-render
      </code>
    </td>
    
    <td>
      <code>
        (canvas: HTMLCanvasElement) => void
      </code>
    </td>
    
    <td>
      <code>
        undefined
      </code>
    </td>
    
    <td>
      Called immediately after each rendered frame. Copy the canvas synchronously to capture the current frame for effects such as live reflections.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes on the container. The container fills its parent, so give the parent a size.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The canvas is decorative and marked `aria-hidden`. Add a visible caption or an `aria-label` on a parent if the logo carries meaning.
- With `prefers-reduced-motion: reduce` the animation runs at 20% speed, flicker and ambient arcs are off, and clicks do not send ripples.
- The render loop stops while the component is offscreen, and the WebGL context is released on unmount.
- Needs WebGL 2. Without it the component renders an empty container.
- Ported from [React Bits](https://reactbits.dev/animations/electric-logo) by David Haz.