DotGrid Component

Dot grid background cursor 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-

• 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.