Usage
import { Ripple } from "@/registry/components/ripple/ripple";
<Ripple />Props
| Prop | Type | Default | Description |
|---|---|---|---|
mainCircleSize? | number | 210 | Diameter of the innermost ring in px. |
mainCircleOpacity? | number | 0.24 | Opacity of the innermost ring; each ring after it is a little fainter. |
numCircles? | number | 8 | How many rings. |
Also accepts every prop of ComponentPropsWithoutRef<"div">.
When to use
Calling attention to a central element (a CTA, an avatar, a live indicator).
When not to use
Several ripples per screen.