Components
Loading preview...
The component accepts props for wave speed, intensity, colors, particle size, and dimensions.
npx shadcn@latest add https://21st.dev/r/designali-in/wave-animation-1import { WaveAnimation } from "@/components/ui/wave-animation-1";
export default function DemoOne() {
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={1200}
height={600}
waveSpeed={3}
waveIntensity={50}
particleColor="#fff200"
pointSize={2}
gridDistance={2}
className="border rounded-lg"
/>
</main>
)
}