Wave Text

Continuous and gentle for playful titles and loading lines, or one wave per hover for links.

Install

Included with Creative: needs your API key. Initialize and log in once.

Terminal

npx @galactrex/ui add wave-text

Example

import { WaveText } from "@/components/galactrex/wave-text";

<WaveText text="Loading your world…" />

Installs to components/galactrex/wave-text.tsx, with the shared motion primitives beside it.

Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.

Prop	Type	Default	Description
`text`	`string`	—	The text.
`as`	`ElementType`	`"span"`	Element.
`mode`	`"always" \| "hover"`	`"always"`	Continuous or per hover.
`height`	`number`	`0.18`	Wave height in em.
`duration`	`number`	`1.6`	Seconds per wave.
`className`	`string`	—	Extra classes for the outer element.