Interactive hover animation that responds to cursor movement, with customizable colors, dots, and settings in the properties panel.
Make it with Workshop
Build your own component with AI
OverviewThe Interactive Shape Grid is a hover-responsive, dynamic grid of geometric shapes that react to cursor movement with smooth scaling and liquid-like animations. It is fully customizable, visually engaging, and easy to adapt to any design.
Best Uses
Hero sections (eye-catching backgrounds or focal points)
Interactive portfolios
Landing pages and creative agency sites
Design showcases and artistic portfolios
Animated loading screens
Subtle, interactive background elements
Shape VarietyChoose from 7 shape styles: Circle, Rectangle, Triangle, Diamond, Star, Hexagon, and Pentagon.
Interactive Animations
Proximity scaling (shapes grow near the cursor)
Liquid effect (shapes subtly drift toward the cursor)
Smooth, configurable animation speed and easing
Responsive, auto-centered grid layout
Customization Options
Grid rows and columns
Shape size, spacing, and growth intensity
Background and shape colors
Animation speed controls and etc.