Wave

Heroes 152

About

Wave component with props for width, height, speed, tiles, pointer control, and DPR.

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

Code

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

Usage.tsx

import { Wave } from "@/components/ui/wave";

const settings = {
  speed: 0.5,
  tiles: 1,
};

export default function DemoOne(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <main className="flex relative justify-center items-center">
      <Wave className="absolute" speed={s.speed} tiles={s.tiles} />
      <h1 className="text-center absolute mt-8 text-5xl font-semibold">
        Gradient Wave
      </h1>
    </main>
  );
}