Ripple
Decorative concentric rings expanding outward and fading out in a continuous, staggered loop, typically placed behind a logo or icon.
Installation
npx dafink-ui add rippleDemo
Props
| Name | Type | Default | Description |
|---|---|---|---|
| count | number | 4 | Number of concentric rings. |
| duration | number | 3000 | Milliseconds for one ring's full expand-and-fade cycle. |
| children | ReactNode | - | Optional content rendered centered above the rings. |
| className | string | '' | Additional CSS classes. |
Accessibility
Ripple's rings are a pure CSS @keyframes animation, entirely hidden via its own @media (prefers-reduced-motion: reduce) block rather than frozen mid-frame, since a paused mid-expand ring wouldn't read as an intentional state. The rings container is aria-hidden at all times since it is purely decorative; any children passed in render normally, and Ripple adds no keyboard or focus behavior of its own.