LumaGrid

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 interactionImages respond smoothly to pointer movement, creating a natural focal effect that follows the user.

• Depth-based scalingEach image has subtle depth variation, adding dimension and preventing a flat, repetitive grid.

• Click-to-focus overlayClick any image to bring it into focus with a soft, configurable blur background.

• No UI clutterNo buttons or close icons — click outside the image to return to the grid.

• Fully responsive SVG gridScales 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.