@kit-ng-ui/border-beam

Animated gradient ring around any element. Pure CSS — no JS animation loop.

Install

pnpm add @kit-ng-ui/border-beam

@use '@kit-ng-ui/border-beam/styles';

Example

<kit-border-beam color="#5b21b6" [duration]="4">
  <button class="cta">Subscribe</button>
</kit-border-beam>

API

| Input | Type | Default | Description | | ---------- | -------- | ------------- | ------------------------------------------------- | | size | number | 1 | Border thickness in px. | | duration | number | 6 | Seconds per full revolution. | | color | string | '#5b21b6' | Highlight color of the beam. | | from | string | 'transparent' | Gradient start color. | | to | string | 'transparent' | Gradient end color. | | radius | number | 12 | Outer corner radius in px. |

Notes

• The child element should have its own opaque background — the gradient sits behind it and only shows through at the border edges.
• Respects prefers-reduced-motion: reduce by disabling the rotation.