LumaGrid
LumaGrid is an interactive SVG-based image grid that reacts to cursor movement in real time. Images dynamically scale based on pointer proximity, creating a depth focal effect.
Make it with Workshop
Build your own component with AI
LumaGrid is an interactive SVG-based image grid that reacts to cursor movement in real time. Images dynamically scale based on pointer proximity, creating a depth focal effect.
Make it with Workshop
Build your own component with AI
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.
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.
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.
Hero sections with visual impact
Creative & photography portfolios
Experimental landing pages
Editorial or brand storytelling layouts
React
SVG rendering
GSAP for smooth motion
Native Framer property controls
Designed for pointer-based interaction (best experienced on desktop)
Lightweight and performance-friendly
Drop-in component — works instantly in any Framer project
