# Border Glow

> Card with a mesh-gradient border and outer glow that follow the cursor direction and grow stronger near the edges.

A card whose border lights up with a coloured mesh gradient and a soft outer glow. Move the pointer toward an edge and the light points at the cursor, getting stronger the closer you get. Light background colours switch to a light-surface border and shadow automatically.

<demo-border-glow>



</demo-border-glow>

## Installation

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

## Usage

```vue
<script setup lang="ts">
  import BorderGlow from '~/components/ui/border-glow/BorderGlow.vue';
</script>

<template>
  <BorderGlow
    glow-color="40 80 80"
    background-color="#120F17"
    :colors="['#c084fc', '#f472b6', '#38bdf8']"
  >
    <div class="p-8">
      <h3 class="text-xl font-semibold">Hover Near the Edges</h3>
      <p class="text-sm opacity-70">
        Move your cursor close to the card border.
      </p>
    </div>
  </BorderGlow>
</template>
```

## Props

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

<tbody>
  <tr>
    <td>
      <code>
        edge-sensitivity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        30
      </code>
    </td>
    
    <td>
      How close the pointer must be to the edge for the glow to appear (0-100).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '40 80 80'
      </code>
    </td>
    
    <td>
      HSL values for the glow colour, as <code>
        "H S L"
      </code>
      
      .
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#120F17'
      </code>
    </td>
    
    <td>
      Background colour of the card. Light colours use a light-surface style.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        border-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        28
      </code>
    </td>
    
    <td>
      Corner radius of the card in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        40
      </code>
    </td>
    
    <td>
      How far the outer glow extends beyond the card in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow-intensity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Multiplier for glow opacity (0.1-3.0).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        cone-spread
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        25
      </code>
    </td>
    
    <td>
      Width of the directional cone mask as a percentage (5-45).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        animated
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Play an intro sweep around the border on mount.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        colors
      </code>
    </td>
    
    <td>
      <code>
        string[]
      </code>
    </td>
    
    <td>
      <code>
        ['#c084fc', '#f472b6', '#38bdf8']
      </code>
    </td>
    
    <td>
      Three colours for the mesh-gradient border.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fill-opacity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.5
      </code>
    </td>
    
    <td>
      Opacity of the coloured fill near the edges.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Extra classes for the card.
    </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 rendered inside the card.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- The glow layers are decorative pseudo-elements and an empty span, so screen readers only see your content.
- The intro sweep does not play when the user prefers reduced motion.
- Ported from [React Bits](https://reactbits.dev/components/border-glow) by David Haz.