Motion Grid Pattern
The Interactive Grid Pattern is a component that creates a responsive grid of squares with smooth hover animations and an optional radial mask.
This component enhances your projects with a dynamic, SVG-based grid of squares that animate on hover, offering a modern and engaging user experience. Perfect for backgrounds, interactive overlays, or creative layouts, this component combines flexibility with smooth performance.
Adjustable properties
Square Size
Grid Columns
Grid Rows
Stroke Color
Stroke Width
Fill Color
Hover Color
Animation Duration
Border Radius
Mask Controls
