Text Wavy

Text 29

About

Animated text that loops each letter through changing size, weight and color to create an infinite wavy effect.

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

Code

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

Usage.tsx

import { TextWavy } from '@/components/ui/text-wavy';

export default function TextWavyDemo() {
  return (
    <div className="flex justify-center items-center size-full">
      <TextWavy
        delayTime={1}
        colors={['rgba(0,0,0,0.5)', 'black', 'rgba(0,0,0,0.5)']}
        fontSizes={['16px', '20px', '16px']}
        className="uppercase  tracking-wider"
        text={"Let's create a wave effect"}
      />
    </div>
  );
}