Grid Hover · Free Backgrounds Component
Easily switch between classic dots, plus signs, minus symbols, four-pointed stars or entirely unique vector graphics.
Paste raw SVG code directly into the component. It automatically extracts the path data and coordinates in the background.
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.
Add tactile depth by making grid elements dynamically scale (Zoom In or Zoom Out) based on mouse distance.
Smoothly dissolves both the shapes toward the frame boundaries to prevent harsh cropping.
Global window events keep the animation fluid and responsive, even when hovering over overlapping text, buttons, or images.
Settings are grouped into neat, collapsible folders inside the Framer sidebar for an organized workflow.
Help make this component even better! If you have ideas, requests, or just want to show your support, feel free to reach out. 🤍
Easily switch between classic dots, plus signs, minus symbols, four-pointed stars or entirely unique vector graphics.
Paste raw SVG code directly into the component. It automatically extracts the path data and coordinates in the background.
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.
Add tactile depth by making grid elements dynamically scale (Zoom In or Zoom Out) based on mouse distance.
Smoothly dissolves both the shapes toward the frame boundaries to prevent harsh cropping.
Global window events keep the animation fluid and responsive, even when hovering over overlapping text, buttons, or images.
Settings are grouped into neat, collapsible folders inside the Framer sidebar for an organized workflow.
Help make this component even better! If you have ideas, requests, or just want to show your support, feel free to reach out. 🤍
