3D Ripple Effect
Interactive 3D wavy dots grid built with Three.js. Mouse-responsive wave animations with customizable colors, intensity, and grid density for stunning visual effects.
Make it with Workshop
Build your own component with AI
🎨 Overview
An interactive 3D particle animation component that creates a mesmerizing grid of dots with wave-like motion. The dots respond dynamically to mouse movement, creating fluid, organic wave patterns across the canvas. Built with Three.js and optimized for Framer, this component adds depth and interactivity to any design.
✨ Key Features
🌊 Real-time Wave Animation - Smooth, continuous wave motion with adjustable speed
🖱️ Mouse-Interactive - Dots react to cursor position creating dynamic ripple effects
🎨 Fully Customizable - Control dot color, background, size, and grid density
📐 Responsive Sizing - Automatically adapts to container dimensions
⚡ Performance Optimized - Smooth 60fps animation with efficient rendering
🎛️ PropertyControls - Easy customization directly in Framer canvas
🔄 Resizable - Drag to resize; animation scales perfectly
🎯 Best For
🌟 Hero Sections - Eye-catching backgrounds for landing pages
💼 Portfolio Sites - Creative, interactive showcase elements
🎪 Event Pages - Dynamic visual interest for promotions
🖼️ Loading Screens - Engaging animations while content loads
🎨 Creative Studios - Modern, tech-forward design aesthetics
📱 Interactive Experiences - Engaging user interaction elements
