Ripple
Professional ripple effect component with 6 presets, multi-layer support, blur/glow effects, wave patterns, and touch enhancements. Built with Framer Motion for Material Design quality animations.
Pro Features
Unlock advanced capabilities with the Pro version
6 Pro Presets
Material, iOS, Glass, Neon, Wave, and Minimal styles
Framer Motion
GPU-accelerated 60fps animations with motion library
Multi-Layer Ripples
Up to 10 concurrent ripple layers with stagger
Visual Effects
Blur, glow, gradient, shadow support
Advanced Easing
Material, spring, bounce, custom cubic-bezier
Wave Patterns
Circular, square, hexagonal, star shapes
Touch Enhanced
Pressure & velocity sensitive (iOS Safari)
Accessibility
Respects prefers-reduced-motion
Zero Memory Leaks
Proper cleanup with useCallback optimization
TypeScript Support
Full type definitions with IntelliSense
Installation
Install via CLI
npx moonui-cli@latest add rippleUsage
Examples
E-Commerce Actions
Product card with multiple interactive elements
Premium Headphones
Wireless Noise Cancelling
Dashboard Menu
Sidebar navigation with ripple feedback
Floating Action Button
Material Design FAB with ripple
Pricing Cards
Interactive pricing options with ripple effects
Basic
- ✓ 10 Projects
- ✓ Basic Support
Pro
- ✓ Unlimited Projects
- ✓ Priority Support
- ✓ Advanced Features
Enterprise
- ✓ Everything in Pro
- ✓ Custom Solutions
Social Actions Bar
Social media interaction buttons
Alex Johnson
2 hours ago
Just shipped a major update to our design system. Excited to see what everyone builds with it! 🚀
Media Controls
Video player controls with ripple feedback
Notification Card
Interactive notification with actions
New Order Received
Order #12345 has been placed successfully
2 minutes ago
Speed Comparison
Different ripple animation speeds
Preset Gallery
6 professional presets for instant styling
Multi-Layer Ripples
Staggered ripple layers for depth
Blur & Glow Effects
Visual effects for enhanced feedback
Gradient Ripples
Multi-color gradient animations
Wave Pattern Shapes
Different ripple shapes using clip-path
Advanced Easing Curves
Material, spring, and bounce easing