Components
Loading preview...
A cool background effect with waves that move.
@aceternity
npx shadcn@latest add https://21st.dev/r/aceternity/wavy-background"use client";
import React from "react";
import { WavyBackground } from "@/components/ui/wavy-background";
export function WavyBackgroundDemo() {
return (
<WavyBackground className="max-w-4xl mx-auto pb-40">
<p className="text-2xl md:text-4xl lg:text-7xl text-white font-bold inter-var text-center">
Hero waves are cool
</p>
<p className="text-base md:text-lg mt-4 text-white font-normal inter-var text-center">
Leverage the power of canvas to create a beautiful hero section
</p>
</WavyBackground>
);
}