---
title: "LumaGrid — Free Framer component · Best of Framer"
description: "Free Framer component · by Harshit Pandey · Galleries. LumaGrid — Interactive Cursor-Driven Image Grid A motion-responsive image grid that reacts to cursor movement in real time."
canonical: "https://framer.elliotli.dev/component/lumagrid"
---

[Home](/)/[Components](/components)/[Galleries](/components/category/galleries)/LumaGrid

# LumaGrid

Cool Gallery for your portfolio websites

[View on Framer](https://framer.com/marketplace/components/lumagrid/?via=elliot-li)

![LumaGrid preview image 1](https://framer.elliotli.dev/og/component/lumagrid/9e5d3fd913d78be4/1600x1200.jpg)

## Summary

LumaGrid — Interactive Cursor-Driven Image Grid A motion-responsive image grid that reacts to cursor movement in real time.

## Description

## LumaGrid — Interactive Cursor-Driven Image Grid

A motion-responsive image grid that reacts to cursor movement in real time. LumaGrid turns a static gallery into a living visual field, where images scale dynamically based on proximity and focus — without complex setup or heavy UI.

Perfect for hero sections, portfolios, and visually driven landing pages.

### ✨ What it does

-   **Cursor-driven interaction**Images respond smoothly to pointer movement, creating a natural focal effect that follows the user.
    
-   **Depth-based scaling**Each image has subtle depth variation, adding dimension and preventing a flat, repetitive grid.
    
-   **Click-to-focus overlay**Click any image to bring it into focus with a soft, configurable blur background.
    
-   **No UI clutter**No buttons or close icons — click outside the image to return to the grid.
    
-   **Fully responsive SVG grid**Scales cleanly across screen sizes without breaking layout or performance.
    

### 🎛 Customizable in Framer

-   Grid density (rows & columns)
    
-   Image size
    
-   Background blur intensity
    
-   Fully editable image list (with naming support)
    

No code edits required — everything is controlled via Framer properties.

### 🧩 Ideal use cases

-   Hero sections with visual impact
    
-   Creative & photography portfolios
    
-   Experimental landing pages
    
-   Editorial or brand storytelling layouts
    

### ⚙️ Built with

-   React
    
-   SVG rendering
    
-   GSAP for smooth motion
    
-   Native Framer property controls
    

### 📌 Notes

-   Designed for pointer-based interaction (best experienced on desktop)
    
-   Lightweight and performance-friendly
    
-   Drop-in component works instantly in any Framer project.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #4637

## Details

- **Author**: Harshit Pandey
- **Published**: 2026-01-09
- **Updated**: 2026-02-05
- **Added**: 2025-12-22
- **Categories**: Galleries

## More like this

-   [Geometry CMS Gallery](/component/geometry-cms-gallery) — Akshay M · $20 — Scroll-Animated Portfolio Gallery
-   [Fluid InfiniteScroll](/component/fluid-infinitescroll) — Atemo Art · $16 — LIQUID / PRISM Gallery
-   [Isometric Gallery](/component/isometric-gallery) — Edi Priatama · $5 — 3D image gallery
-   [HoverExpand Gallery](/component/hoverexpand-gallery) — piyush vichare · $2 — HoverExpand Gallery is a modern Framer component for creating interactive image galleries with smooth hover expansion.