import { Component } from '@angular/core';
import { WrStarBorder } from 'ngwr/bits/star-border';
@Component({ imports: [WrStarBorder] })
export class MyComponent {}Star Border
Light rays that run along the edges of a box.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
<wr-star-border mode="infinite" rays="mirror" [speed]="6">
Star border
</wr-star-border>Customize
Mode
Rays
Speed (s)
As a button
Use it as an attribute on a button or a link.
<button wr-star-border mode="hover" rays="single" type="button">
Hover me
</button>API
| Name | Description | Type | Default |
|---|---|---|---|
color | Ray colour. Unset, it follows the theme. | 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
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/bits/star-border's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-star-border-color | light-dark(var(--wr-color-primary), #ffffff) | .wr-star-border |
--wr-star-border-opacity | 1 | .wr-star-border |
--wr-star-border-radius | 20px | .wr-star-border |
--wr-star-border-speed | 6s | .wr-star-border |