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. Unset, the theme decides: primary on light, white on dark. | string | null | null |
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' |
CSS variables
Custom properties ngwr/star-border publishes. Each default below is declared on the component's own selector, so a :root override is shadowed by it — set them on that selector, on a wrapper you scope yourself, or inline on the element. Unlike the BEM class names, these are the supported way to restyle the component.
| Variable | Default | Declared on |
|---|---|---|
--wr-star-border-color | var(--wr-color-primary) | .wr-star-border +1 variant override |
--wr-star-border-opacity | 1 | .wr-star-border +1 variant override |
--wr-star-border-radius | 20px | .wr-star-border |
--wr-star-border-speed | 6s | .wr-star-border |
--wr-star-border-stop | 16% | .wr-star-border +1 variant override |