# Star Border

> Radial comet rays sweeping along the edges of a rounded container. Run them forever or only on hover, mirrored on both edges or as a single ray.

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

## Import

```angular-ts
import { WrStarBorder } from 'ngwr/star-border';
```

## Playground

```html
<wr-star-border mode="infinite" rays="mirror" [speed]="6">
  Star border
</wr-star-border>
```

## As a button

The selector also works as an attribute — handy for buttons and links.

```html
<button wr-star-border mode="hover" rays="single" type="button">
  Hover me
</button>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `color` | Ray colour. | `string` | `theme-aware (primary on light, white on dark)` |
| `speed` | Seconds per ray sweep. | `number` | `6` |
| `thickness` | Vertical ray bleed past the panel (px). | `number` | `1` |
| `mode` | Always animating, or only on hover. | `'infinite' \| 'hover'` | `'infinite'` |
| `rays` | Rays along both edges, or just the bottom. | `'mirror' \| 'single'` | `'mirror'` |