Grid Ripple
Animated Grid Ripple Canvas — Dynamic Wave-Like Grid Distortion Effect
Made with Workshop
Build your own component with AI
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.
