Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrGradientText } from 'ngwr/gradient-text';Playground
<wr-gradient-text
[animationSpeed]="8"
direction="horizontal"
[yoyo]="true"
[pauseOnHover]="false"
[showBorder]="false"
>
Hello, ngwr!
</wr-gradient-text>Customize
Speed (s)
Direction
Yoyo
Pause on Hover
Border
Text
API
| Name | Description | Type | Default |
|---|---|---|---|
colors | Gradient stops (any CSS colours). | readonly string[] | ['#5227FF', '#FF9FFC', '#B497CF'] |
animationSpeed | Seconds per full sweep (or per half if yoyo is on). | number | 8 |
showBorder | Wrap the text in a dark pill with the gradient as a border. | boolean | false |
direction | Gradient slide direction. | 'horizontal' | 'vertical' | 'diagonal' | 'horizontal' |
pauseOnHover | Pause the animation while hovered. | boolean | false |
yoyo | Bounce back-and-forth instead of restarting. | boolean | true |