DotGrid Component
An interactive Framer component with a dynamic dot grid background that scales and reacts to cursor movement, customizable colors, and space for hero content.
Made with Workshop
Build your own component with AI
About this Component
Transform Ideas with Dot GridAn interactive, responsive, and visually engaging background component built for Framer. Use it to add life, depth, and personality to hero sections, headers, or full-page layouts, while keeping your design clean and modern.Key Features & Capabilities-
1. Dynamic InteractionDots respond to cursor movement: the closest dots zoom in and lighten, while others smoothly fall off in scale based on distance.
Customizable AppearanceConfigure dot size, gap, base color, highlight color, scale ranges, and influence radius to match your brand style.
Smooth Animations
Transitions in scaling and coloring are subtle and fluid—no jarring jumps or snapping.
Responsive & Adaptive
Automatically rebuilds the dot grid on container resize to maintain alignment and consistency across devices.
Performance-aware Rendering
Uses canvas for rendering and minimal calculations per frame to maintain smooth frame rates.
Content Overlay Support
Designed to allow layering of text, buttons, or other content over the dot grid without interference.
Easy to Integrate
Drop-in component for Framer projects—just wrap it, configure props, and place your hero content inside.
