Grid Hover — Customizable Background Hover Animation

4 Built-in Grid Styles & Custom SVGs

Easily switch between classic dots, plus signs, minus symbols, four-pointed stars or entirely unique vector graphics.

Intelligent Auto-SVG Parser

Paste raw SVG code directly into the component. It automatically extracts the path data and coordinates in the background.

Proximity-Hover & Color Blending

The grid reacts in real time within a definable cursor radius. Shapes smoothly transition between the base color and the hover color based on proximity.

Fluid Shape Morphing

Add tactile depth by making grid elements dynamically scale (Zoom In or Zoom Out) based on mouse distance.

Smart Edge Fade for Seamless Transitions

Smoothly dissolves both the shapes toward the frame boundaries to prevent harsh cropping.

Cross-Layer Cursor Tracking

Global window events keep the animation fluid and responsive, even when hovering over overlapping text, buttons, or images.

Organized Editor UI

Settings are grouped into neat, collapsible folders inside the Framer sidebar for an organized workflow.

Feedback or a feature request?

Help make this component even better! If you have ideas, requests, or just want to show your support, feel free to reach out. 🤍