Spell UI

Gradient Wave Text

Apple-style animated gradient text with wave effect.

Installation

pnpm dlx shadcn@latest add @spell/gradient-wave-text

Usage

import { GradientWaveText } from "@/components/gradient-wave-text";

<GradientWaveText className="text-3xl md:text-5xl font-medium tracking-[-.03em]">
  Just ship things.
</GradientWaveText>

Props

Prop	Type	Default
`children`	`React.ReactNode`	-
`className`	`string`	-
`align`	`'left' \| 'center' \| 'right'`	`center`
`speed`	`number`	`1`
`paused`	`boolean`	`false`
`delay`	`number`	`0`
`repeat`	`boolean`	`false`
`inView`	`boolean`	`false`
`once`	`boolean`	`true`
`radial`	`boolean`	`true`
`bottomOffset`	`number`	`20`
`bandGap`	`number`	`4`
`bandCount`	`number`	`8`
`customColors`	`string[]`	-
`ariaLabel`	`string`	-