# Border Glow

> Cursor-tracked glowing border card. A cone of light follows the pointer along the perimeter, brightening as the cursor approaches an edge. Optional `[animated]` mode plays a one-shot sweep on mount.

Source: https://ngwr.dev/animations/border-glow  
Kind: Animation

## Import

```angular-ts
import { WrBorderGlow } from 'ngwr/border-glow';
```

## Playground

```html
<wr-border-glow
  [borderRadius]="28"
  [glowRadius]="40"
  [coneSpread]="25"
  [glowIntensity]="1"
  [animated]="false"
>
  …
</wr-border-glow>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `backgroundColor` | Card background fill. | `string` | `theme surface token` |
| `borderRadius` | Corner radius in pixels. | `number` | `28` |
| `glowRadius` | Halo extent in pixels — how far the outer glow reaches past the card edge. | `number` | `40` |
| `glowIntensity` | Halo opacity multiplier (1 = full strength). | `number` | `1` |
| `coneSpread` | Width of the lit cone as a percentage of the perimeter. | `number` | `25` |
| `edgeSensitivity` | How sharply the halo fades as the cursor leaves the edge. Lower = wider falloff. | `number` | `30` |
| `fillOpacity` | Strength of the soft-light interior fill near edges (0..1). | `number` | `0.5` |
| `glowColor` | Halo colour as `"H S L"` (HSL parts, no commas). | `string` | `theme-aware (deep amber on light, pale on dark)` |
| `colors` | Mesh-gradient palette for the visible border slice. | `readonly string[]` | `['#c084fc', '#f472b6', '#38bdf8']` |
| `animated` | Play a one-shot perimeter sweep on mount, then fade out. | `boolean` | `false` |