Hover Grid

Hover Grid

This component smoothly reveals grid lines around the cursor or stays always visible for a clean, tech-inspired look. Fully customizable — adjust color, opacity, line width, cell size, and reveal radius. Responsive, lightweight, and perfect for modern portfolios or minimal landing pages.

This component smoothly reveals grid lines around the cursor or stays always visible for a clean, tech-inspired look. Fully customizable — adjust color, opacity, line width, cell size, and reveal radius. Responsive, lightweight, and perfect for modern portfolios or minimal landing pages.

Design & UX Approach

Dynamic Grid Reveal

Dynamic Grid Reveal

Add a subtle or harsh, interactive grid background that reacts to cursor movement or stays always visible for a clean, modern aesthetic.

Add a subtle or harsh, interactive grid background that reacts to cursor movement or stays always visible for a clean, modern aesthetic.

Fully Customizable

Fully Customizable

Control grid color, opacity, line width, cell size, and reveal radius directly from the Framer properties panel.

Control grid color, opacity, line width, cell size, and reveal radius directly from the Framer properties panel.

Smooth Animations

Smooth Animations

Enjoy elegant fade-in and fade-out transitions as the cursor enters or leaves the area.

Enjoy elegant fade-in and fade-out transitions as the cursor enters or leaves the area.

Perfect for Modern Interfaces

Perfect for Modern Interfaces

Ideal for portfolios, landing pages, and tech-inspired designs looking for subtle motion and depth.

Ideal for portfolios, landing pages, and tech-inspired designs looking for subtle motion and depth.

Back to Components

Back to Components

Create a free website with Framer, the website builder loved by startups, designers and agencies.