Ripple
Concentric rings pulsing outward — calm 'listening' backdrop.
- 0.6 KB gzipped
- Zero dependencies
- Reduced-motion safe
- Base UI & Radix compatible
Preview
Looking for devices…
Keep your phone nearby
Installation
pnpm dlx shadcn@latest add https://velora.colorlib.com/r/ripple.jsonAdds components/velora/ripple.tsx and merges the keyframes and tokens into your CSS.
Props
| Prop | Type | Default |
|---|---|---|
circlesNumber of concentric rings | number | 6 |
baseSizeDiameter of the innermost ring, in px | number | 180 |
className | string | — |
Accessibility
- Reduced motion
- The rings stop pulsing and sit still as concentric circles at their nominal sizes, fading outward.
- Keyboard
- Decorative — nothing to operate.
- Screen readers
- Decorative: the rings are aria-hidden.