Border Glow

Angular adaptation of an effect by David Haz / reactbits.dev.

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

The border lights up where the cursor is.

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

Border Radius (px)

28 px

Glow Radius (px)

40 px

Cone Spread (%)

25 %

Glow Intensity

1.0

Animated

Glow Color

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`

Import