Wave Text

Text with center Wave effect animation .

wave-text.tsx

CENTER WAVE EFFECT

Installation

Terminal

npx shadcn@latest add "https://sniper-ui-coral.vercel.app/r/wave-text.json"

Auto-Installed Dependencies

The CLI will automatically install these packages.

Terminal

npm install gsap

Usage

Basic

page.tsx

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

export default function MyPage() {
  return (
    <WaveText color="#ff6b35" repeatDelay={1.5}>
        <h1 className="text-6xl">CENTER WAVE EFFECT</h1>
    </WaveText>
  );
}

Examples

examples.tsx

import WaveText from "@/components/ui/wave-text";

export default function MyPage() {
  return (
    <div className="space-y-4">
      {/* Warm orange wave */}
      <WaveText color="#ff6b35" repeatDelay={0.8}>
        <h1 className="text-5xl font-bold">Fast Wave</h1>
      </WaveText>

      {/* Cool blue wave */}
      <WaveText color="#2b6bbb" repeatDelay={2}>
        <p className="text-2xl">Subtle wave effect</p>
      </WaveText>
    </div>
  );
}

Props

Prop	Type	Default	Description
`children`	`React.ReactNode`	`—`	The content to apply the wave effect to.
`color`	`string`	`"#ff6600ff"`	The color of the wave effect.
`repeatDelay`	`number`	`1.5`	Seconds to wait before repeating the animation.

Sniper UI

An open-source library available on GitHub — contribute or star the repo to support it.

Contribute