Components
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.
npx @21st-dev/cli add dhileepkumargm/interactive-waves-heroLoading preview...
"use client";
import InteractiveWaves from "@/components/ui/interactive-waves-hero";
export default function DemoOne() {
return (
<section className="relative w-full h-screen bg-black text-white overflow-hidden">
{/* Animated background waves */}
<div className="absolute inset-0">
<InteractiveWaves className="w-full h-full" />
</div>
{/* Hero content */}
<div className="relative z-10 flex flex-col items-center justify-center text-center h-full px-6">
<h1 className="text-4xl sm:text-6xl font-extrabold mb-4">
Interactive Waves
</h1>
<p className="text-lg sm:text-xl mb-8 max-w-xl">
Experience generative art that responds to your touch. Move your cursor
across the screen to warp and bend the fabric of this digital canvas.
</p>
<button className="px-8 py-4 bg-teal-500 hover:bg-teal-600 text-white font-semibold rounded-full transition-colors duration-200">
Get Started
</button>
</div>
</section>
);
}