Wavy Background
Canvas-based animated wave effect that creates organic, flowing background motion.
Preview
Wavy Background
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Section transitions and testimonial backgrounds.
Why this component matters
Motion with meaning. Waves imply flow and continuity — ideal for transitions between content sections.
Usage guidance
Use as a section background, not a full-page effect. Set opacity low (0.3-0.5) and keep wave count to 3-5. Never pair with other animated backgrounds.
Installation
bash
npx shadcn@latest add @aceternity/wavy-backgroundUsage
example.tsxtsx
import { WavyBackground } from "@/components/ui/wavy-background";
export default function Example() {
return (
<WavyBackground>
{/* Your content here */}
</WavyBackground>
);
}Source
wavy-background.tsx
components/ui/wavy-background.tsx