A concentric ripple animation effect that creates expanding circles, perfect for drawing attention to central elements.
Installation
import { Ripple } from "@/components/ui/ripple"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden flex items-center justify-center">
<div className="z-10">
{/* Your content here */}
</div>
<Ripple />
</div>
)
}
Custom Configuration
import { Ripple } from "@/components/ui/ripple"
export default function Example() {
return (
<div className="relative h-[500px] w-full overflow-hidden flex items-center justify-center">
<div className="z-10">
{/* Your content here */}
</div>
<Ripple
mainCircleSize={300}
mainCircleOpacity={0.3}
numCircles={10}
/>
</div>
)
}
| Prop | Type | Default | Description |
|---|
mainCircleSize | number | 210 | Size of the innermost circle in pixels |
mainCircleOpacity | number | 0.24 | Opacity of the innermost circle |
numCircles | number | 8 | Number of ripple circles to render |
className | string | - | Additional CSS classes for the container |
Each ripple circle is automatically sized and animated with staggered delays based on the mainCircleSize and numCircles props.
Position content with higher z-index to ensure it appears above the ripple effect.