Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrStarBorder } from 'ngwr/star-border';Playground
<wr-star-border mode="infinite" rays="mirror" [speed]="6">
Star border
</wr-star-border>Customize
Mode
Rays
Speed (s)
As a button
The selector also works as an attribute — handy for buttons and links.
<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' |