Components
Loading preview...
The animation creates beautiful flowing waves using different colored bars that oscillate based on sine wave calculations
npx shadcn@latest add https://21st.dev/r/designali-in/wave-animationimport { WaveAnimation } from "@/components/ui/wave-animation";
export default function DemoOne() {
return (
<main className="relative">
<WaveAnimation />
{/* You can add other content here that will appear over the animation */}
<div className="relative z-10 flex items-center justify-center min-h-screen">
<h1 className="text-7xl font-bold text-white text-center ">Wave Animation</h1>
</div>
</main>
)
}