Interactive Waves Hero

best practices for building maintainable and readable React applications, I have extracted all the complex animation logic from the Waves component into its own custom hook, useWaveAnimation. This change makes the Waves component much cleaner and separates the animation logic (the "how") from the component's rendering (the "what"), which is a key principle of high-quality React code.

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

"use client";

import InteractiveWaves from "@/components/ui/interactive-waves-hero";

const settings = {
  lineColor: "#FFFFFF",
  noiseSeed: 0.5,
};

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props };
  return (
    <div className="h-screen w-screen">
      <InteractiveWaves lineColor={s.lineColor} noiseSeed={s.noiseSeed} />
    </div>
  );
}