ripple wave water maritime ring pulse animated Attention-drawing effect around CTA buttons Avatar or icon emphasis with water-drop feel Maritime/ocean themed interaction highlights Static CTAs that don't draw attention Need organic, water-inspired pulse animation
Ripple Ring
Fetch snippet JSON:
curl https://webspire.de/snippets/atmosphere/ripple-ring.json
●
Live
Background
Customize
Quick Start
<div class="ripple-ring"><button class="z-10">Click</button></div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- Features
- Dark Mode Responsive
- A11y
- prefers-reduced-motion, prefers-color-scheme
- Size
- 958 bytes · 51 lines
- Custom Properties
-
--ripple-color--ripple-size--ripple-speed - Classes
-
.ripple-ring
ripple wave water maritime ring pulse animated
Two concentric rings expand outward from center and fade, staggered by half the cycle. Creates a water-droplet or sonar ping effect. Wrap any element — the rings appear behind it via pseudo-elements. Configurable color, size, and speed.