Wave Text

Text 37

About

A text component that animates bands of colour washing through its characters like a swell, triggered on load or when scrolled into view.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Wave Text to your project and fits it to your theme.

Code

How Wave Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function WaveTextDemo() {
  return (
    <div className="flex h-full min-h-[400px] w-full items-center justify-center bg-background p-10">
      <WaveText
        as="h2"
        className="text-5xl font-semibold tracking-tight text-foreground"
        repeat
      >
        High tide
      </WaveText>
    </div>
  );
}