Wave Text

Each character gets a staggered vertical wave animation. Configurable duration and amplitude. Pure CSS.

Code

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

export default function Example() {
  return (
    <WaveText text="Wave animation!" className="text-4xl font-bold" />
  )
}

Installation

$npx particleui-cli add wave-text

Usage

TSX

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

export default function Example() {
  return (
    <WaveText text="Wave animation!" className="text-4xl font-bold" />
  )
}

Props

Prop	Type	Default	Required
text	string	—	yes
className	string	—	no
duration	number	`1.2`	no

Details

Source filecomponents/ui/wave-text.tsx

Typeui

Categoriestext, particles

npm dependencies

Registry deps

Claude skill—