Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrShinyText } from 'ngwr/shiny-text';Playground
<wr-shiny-text
text="Premium"
[speed]="2"
[spread]="120"
direction="left"
[yoyo]="false"
[pauseOnHover]="false"
/>Customize
Speed (s)
Spread (°)
Direction
Yoyo
Pause on Hover
Text
Directive variant ([wrShimmer])
import { WrShimmer } from 'ngwr/shiny-text';
<h1 wrShimmer>Premium</h1>API
| Name | Description | Type | Default |
|---|---|---|---|
textrequired | Text to render. | string | — |
disabled | Pause the animation. | boolean | false |
speed | Time for the bright stripe to traverse the text, in seconds. | number | 2 |
color | Base text colour (outside the bright stripe). Unset, it falls back to --wr-shiny-text-base. | string | null | null |
shineColor | Bright stripe colour. Unset, it falls back to the theme token. | string | null | null |
spread | Gradient angle in degrees. | number | 120 |
yoyo | Bounce back-and-forth instead of restarting. | boolean | false |
pauseOnHover | Pause the animation while hovered. | boolean | false |
direction | Sweep direction. | 'left' | 'right' | 'left' |
delay | Pause between sweeps in seconds. | number | 0 |
[wrShimmer] | Lightweight directive variant — adds the .wr-shimmer host class for a continuous sweep over any element. Same package. | directive | — |
CSS variables
Custom properties ngwr/shiny-text 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-shiny-text-base | var(--wr-color-on-surface-muted, #8594a4) | .wr-shiny-text +1 variant override |
--wr-shiny-text-shine | var(--wr-color-on-surface, #0f172a) | .wr-shiny-text +1 variant override |