Ripple
Expanding concentric ring outlines from click point or continuous pulse.
Click ripple
Pulse mode
Custom color
Click anywhere in this card
Installation
npx shadcn@latest add https://wise-ui.com/r/ripple.jsonProps
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | "currentColor" | Color of the ripple rings. |
| duration | number | 600 | Duration of the ripple animation in milliseconds. |
| ringCount | number | 3 | Number of concentric rings per ripple. |
| mode | "click" | "pulse" | "click" | Click spawns ripples at cursor; pulse continuously emits from center. |
| children | React.ReactNode | - | Content to wrap. |
| className | string | - | Additional classes for the container. |