An animated SVG cluster of circular bubbles that fill in a smooth wave pattern from top to bottom, with ripple effects and customizable icons inside each bubble.
Bubbles fill in a top-to-bottom wave with configurable delays per bubble and per row
Adjustable hold duration before the cycle resets
Speed multiplier to control overall animation tempo
Choose from 9 built-in presets or create your own:
Check: classic checkmark
Star: 5-point star
Heart: filled heart
Circle: outline circle
Cross: X mark
Dot: filled dot
Arrow: directional arrow
Diamond: filled diamond
Custom: Path paste any SVG path data
Raw: SVG paste full SVG markup (path, circle, rect, polygon, etc.) colors auto-replace to match your theme
Bubbles shift toward the cursor with physics-based smoothing
Intensity controls how strongly bubbles are pulled (0.05–2)
Smoothing controls easing speed (0.02 = silk smooth, 0.5 = snappy)
Full-area coverage works across the entire component regardless of size
Graceful ease-back to original positions when cursor leaves
Adjustable radius, stroke width, dash pattern, and opacity
Fill opacity separate from stroke for layered effects
Define up to 8 concentric rings with custom bubble count and distance
Center bubble always included
Expanding ripple on each bubble fill
Configurable duration
Background, ink (question mark + ripple), fill, stroke, and icon color all separately controllable
Entirely SVG-based, no canvas or DOM-heavy patterns
IntersectionObserver pauses animation when out of viewport
Visibility API pauses when tab is hidden
Debounced resize handling to prevent animation glitches
Fixed layout, intrinsic size 320×320
Resizable to any dimension, bubbles auto-distribute
Configurable padding
More: sbarah.com
Free Support: framer@muhmad.me
