Grid Ripple

Description This Framer component renders a fully dynamic grid-ripple animation using an HTML canvas.

Description

This Framer component renders a fully dynamic grid-ripple animation using an HTML canvas. Each cell in the grid scales, shifts, and animates outward in a ripple-like motion based on distance from the center, easing curves, and wave-phase timing. The component is highly configurable—allowing you to adjust grid density, animation speed, line styling, color themes, easing functions, and more.

Optimized for responsiveness and performance, the effect scales to any layout size and automatically reduces to a static render in Framer’s canvas or when out of view. Perfect for hero sections, tech-themed backgrounds, motion UI experiments, or subtle animated textures.