Wave Animation

Component 179

About

The component accepts props for wave speed, intensity, colors, particle size, and dimensions.

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

Code

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

Usage.tsx

import { WaveAnimation } from "@/components/ui/wave-animation-1";

const settings = {
  width: 1200,
  height: 600,
  waveSpeed: 3,
  waveIntensity: 50,
  pointSize: 2,
  gridDistance: 2,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <main className="relative flex h-[650px] w-full flex-col items-center justify-center overflow-hidden">
      <span className="absolute pointer-events-none z-10 text-center text-7xl leading-none font-semibold tracking-tighter whitespace-pre-wrap">
        Wave Animation
      </span>
      <WaveAnimation
        width={s.width}
        height={s.height}
        waveSpeed={s.waveSpeed}
        waveIntensity={s.waveIntensity}
        particleColor="#fff200"
        pointSize={s.pointSize}
        gridDistance={s.gridDistance}
        className="border rounded-lg"
      />
    </main>
  );
}