Ripple Rings
Concentric rings breathing in a staggered wave, fading downward — a calm focal backdrop for a logo, avatar or call-to-action.
csszero-jsrsc2 files · 67 locdeps: clsx, tailwind-merge
Installation
With the shadcn CLI, pointing at this platform’s registry:
npx shadcn@latest add https://opusui.131199999.xyz/r/ripple-rings.jsonOr offline, straight from your opus55 checkout (copies every file it needs):
node ../tailwind_component/opus55/scripts/add.mjs ripple-ringsUsage
import { RippleRings } from "@/components/opus/backgrounds/ripple-rings";
<RippleRings className="absolute inset-0" />API
| Prop | Type | Default | Description |
|---|---|---|---|
| color | string | — | Ring colour — use rgba(…, 1) so the inner glow can derive its alpha. |
| rings / base / step | number | 8 / 180 / 90 | Count, first diameter and growth (px). |
| duration | number | 3.4 | Seconds per breath. |
| className | string | — | Wrapper classes — `absolute inset-0` to fill a relative parent. |
| children | ReactNode | — | Content rendered on top. |
Notes
- No canvas, no WebGL — only CSS gradients/masks and compositor-friendly transform animations.
- Server-component safe unless marked otherwise; animations stop under
prefers-reduced-motion.