Docs·Wave Text

Wave Text

A pointer-led character ripple that travels through text with configurable glyph sets.

Installation

$pnpm dlx shadcn@latest add @spiderui/wave-text

Usage

API Reference

PropTypeDefault
textText that receives the pointer ripple.
string—
presetBuilt-in glyph set used by the ripple.
"letters" | "symbols" | "blocks""symbols"
charsetCustom glyph set. Overrides the selected preset.
string—
durationLifetime of each ripple in milliseconds.
number900
spreadHow quickly each ripple travels across the text.
number1
preserveSpacesKeep whitespace unchanged while a wave passes.
booleantrue
classNameAdditional classes applied to the root span.
string—

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@ctrlcat0x

Move across the text

Signal in the noise
import { WaveText } from "@/components/ui/wave-text"
export default function Page() {
  return (
    <h1 className="text-4xl font-semibold tracking-tight">
      <WaveText text="Move through the signal" preset="blocks" />
    </h1>
  )
}