Ripple Grid — Interactive ripple grid
RippleGrid transforms a simple grid into a dynamic, interactive surface. Each interaction generates a ripple that propagates across the grid, creating visually striking patterns in real time.
Trigger waves from the center or any cell and explore multiple ripple styles — from smooth circular waves to geometric patterns like star, diamond, or hexagon. Each mode creates a unique visual rhythm.
Users can interact directly with the grid or use the central trigger to generate ripples. The experience feels immediate, responsive, and playful.
Fine-tune the component with extensive controls:
grid size and spacing
colors and visual style
ripple speed and behavior
optional audio feedback
and various other details
Let the grid come alive automatically with built-in modes:
center pulses
random waves
corner sequences
Built for smooth rendering in Framer, RippleGrid is optimized for performance, responsive layouts, and clean behavior across canvas and preview.
hero sections
interactive backgrounds
visual accents
experimental interfacesSee in action
Ange Vlahovic
