Cursor & pointer
Ripple
A liquid ripple that wells up from the press point, overshooting like a drop hitting water.
Paste it into ChatGPT, Claude, Cursor or v0.
Usage
import { Ripple } from '@vizzele/react';
<Ripple as="button" className="vz-button">Press me</Ripple>Props
| Prop | Type | Default | Description |
|---|---|---|---|
color | string | iridescent | Any CSS background (color or gradient). |
opacity | number | 0.35 | Peak opacity. |
spring | SpringConfig | SpringPreset | { stiffness: 140, damping: 13 } | Growth spring. |
keyboard | boolean | true | Ripple from the center on Enter / Space. |
Accessibility
- Keyboard presses ripple from the center.
- Reduced motion: a brief static tint instead of the wave.