GradientText

Animated gradient text fill. Applies background-clip: text with a wide gradient that scrolls on a loop.

Liquid hotNorthern lights

Usage

import { GradientText } from '@bwo-ui/react';

<GradientText
  as="h1"
  gradient="linear-gradient(90deg, #ff481f, #ff9d00, #ff481f)"
  duration={5}
>
  Liquid hot
</GradientText>

Props

Prop	Type	Default	Description
`gradient`	`string`	—	Any CSS gradient (no `background-image:` prefix).
`duration`	`number`	`6`	Cycle duration in seconds.
`angle`	`number`	`90`	Gradient angle (when using default gradient).
`size`	`number`	`300`	Background size as %.
`direction`	`'left' \| 'right'`	`'right'`	Direction the gradient flows.
`animate`	`boolean`	`true`	Set false to hold the gradient still.