DotGrid Component

Dot grid background cursor component

Transform Ideas with Dot Grid An 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- Dynamic Interaction Dots respond to cursor movement: the closest dots zoom in and lighten, while others smoothly fall off in scale based on distance. Customizable Appearance Configure 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.

Dot grid background cursor component