Interactive Shapes Grid is a visually engaging canvas based component that transforms simple layouts into dynamic, motion driven experiences. It renders a grid of shapes that respond fluidly to user interaction, creating a lively and responsive visual system.
As users move their cursor across the canvas, nearby shapes react by scaling, rotating, and shifting their visual state. Clicking triggers ripple wave effects that expand across the grid, adding depth and feedback to the interaction. This creates a playful yet polished experience that feels both organic and responsive.
The component supports multiple shape types including circles, pills, and stars, each with randomized variations to avoid repetition. Combined with flexible color systems and animation controls, it allows designers to create unique visual styles ranging from minimal to highly expressive.
Interactive grid with real time mouse response
Click triggered ripple wave animations
Multiple shape types, circles, pills, and stars
Dynamic scaling, rotation, and hover effects
Custom color palettes and gradient support
Fully adjustable animation speed and intensity
Configurable wave behavior and auto wave option
Responsive canvas rendering for smooth performance
Randomised shape variations for organic visuals
Easy customisation through Framer controls
Website background sections
Landing page hero areas
Interactive UI accents
Creative portfolios
SaaS and product websites
Experimental design layouts
Visual storytelling sections
Designers creating interactive experiences
Creative developers and studios
Modern websites need motion backgrounds
Brands looking for playful visual elements
Projects that require lightweight interactivity
Adds interaction without complex setup
Enhances user engagement through motion
Transforms static layouts into dynamic visuals
Highly customizable for different design styles
Lightweight and performant using canvas rendering
Works seamlessly inside Framer workflows
Mohd Mehraj
