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
What the Pro version adds to this component.
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 @moontra/moonui-cli add rippleUsage
Examples
E-Commerce Actions
Product card with multiple interactive elements
Dashboard Menu
Sidebar navigation with ripple feedback
Floating Action Button
Material Design FAB with ripple
Pricing Cards
Interactive pricing options with ripple effects
Social Actions Bar
Social media interaction buttons
Media Controls
Video player controls with ripple feedback
Notification Card
Interactive notification with actions
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
Four distinct ripple silhouettes: 'circular' is a full border radius, the other three are cut with clip-path
Advanced Easing Curves
Material, spring, and bounce easing