Shiny Text

Angular adaptation of an effect by David Haz / reactbits.dev.

import { WrShinyText } from 'ngwr/shiny-text';

Premium

<wr-shiny-text
  text="Premium"
  [speed]="2"
  [spread]="120"
  direction="left"
  [yoyo]="false"
  [pauseOnHover]="false"
/>

Speed (s)

2.0 s

Spread (°)

120 °

Direction

Yoyo

Pause on Hover

Text

import { WrShimmer } from 'ngwr/shiny-text';

<h1 wrShimmer>Premium</h1>

Premium

Name	Description	Type	Default
`text`required	Text to render.	`string`	`— (required)`
`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).	`string`	`theme token`
`shineColor`	Bright stripe colour.	`string \| null`	`theme token`
`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`	`—`