LumaGrid

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

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.

Cool Gallery for your portfolio websites