import { Component } from '@angular/core';
import { WrShimmer, WrShinyText } from 'ngwr/bits/shiny-text';
@Component({ imports: [WrShimmer, WrShinyText] })
export class MyComponent {}Shiny Text
Text with a light stripe sweeping across it.
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-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])
[wrShimmer] adds the same sweep to any element.
import { WrShimmer } from 'ngwr/bits/shiny-text';
<h1 wrShimmer>Premium</h1>API
| Name | Description | Type | Default |
|---|---|---|---|
textrequired | Text to render. | string | — |
disabled | Pause the animation. | boolean | false |
speed | Seconds for one sweep. | number | 2 |
color | Text colour outside the stripe. Unset, it uses --wr-shiny-text-base. | string | null | null |
shineColor | Stripe colour. Unset, it follows the theme. | 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 | Rest between sweeps, in seconds. | number | 0 |
[wrShimmer] | Adds a continuous sweep to any element. | directive | — |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/bits/shiny-text's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-shiny-text-base | light-dark(var(--wr-color-on-surface-muted, #8594a4), #b5b5b5) | .wr-shiny-text |
--wr-shiny-text-motion | 1 | .wr-shiny-text |
--wr-shiny-text-progress | 0 only under from — unset elsewhere | from +1 variant override |
--wr-shiny-text-shine | light-dark(var(--wr-color-on-surface, #0f172a), #ffffff) | .wr-shiny-text |