InfinityGallery is a full-screen masonry gallery that moves with your cursor. Point anywhere inside the component and the grid drifts in that direction — slower near the center, faster toward the edges. Release and it glides to a stop. Switch to Auto Scroll and it runs continuously at any angle, no interaction required.
Images can be uploaded directly inside Framer using the Images control — no external hosting required. Alternatively, switch to URL Folder mode and load images from any CDN or server using a simple sequential naming convention (p1.jpg, p2.jpg, …).
Key Features
Images
Upload images directly in Framer — drag in files or pick from project assets
Or load from a folder URL with sequential naming (p1.jpg, p2.jpg, …)
Layout
Masonry grid with configurable column count and width
Seamless 3×3 tiling — no visible seams or jumps at any speed
Optional grid tilt (−45° to +45°) for editorial-style layouts
Movement
Physics-based cursor control with inertia and deadzone
4 movement modes: XY, X only, Y only, Auto Scroll
Adjustable speed, max speed, and smoothness
Hover Effects
Scale card on hover
Zoom image on hover
Color overlay with adjustable color and opacity
Grayscale desaturation
Lightbox
Full-screen overlay with blur backdrop
Prev / Next navigation buttons
Keyboard navigation — ← → to browse, Esc to close
Renders above all page elements (no z-index conflicts)
Polish
Smooth fade-in animation as images load
Fallback color while loading or on broken links
Optional card shadow
Animations fully disabled on canvas and during export
Setup
Add the component to your Framer project.
Upload mode (default): click the + button in the Images control in the properties panel and add your photos.
URL Folder mode: switch Source to "URL Folder", set Folder URL to your image host base path, and set Images Count to match the number of files (p1.jpg … pN.jpg).
Adjust columns and column width per breakpoint in Framer's responsive panel.
InfinityGallery is a full-screen masonry gallery that moves with your cursor. Point anywhere inside the component and the grid drifts in that direction — slower near the center, faster toward the edges. Release and it glides to a stop. Switch to Auto Scroll and it runs continuously at any angle, no interaction required.
Images can be uploaded directly inside Framer using the Images control — no external hosting required. Alternatively, switch to URL Folder mode and load images from any CDN or server using a simple sequential naming convention (p1.jpg, p2.jpg, …).
Key Features
Images
Upload images directly in Framer — drag in files or pick from project assets
Or load from a folder URL with sequential naming (p1.jpg, p2.jpg, …)
Layout
Masonry grid with configurable column count and width
Seamless 3×3 tiling — no visible seams or jumps at any speed
Optional grid tilt (−45° to +45°) for editorial-style layouts
Movement
Physics-based cursor control with inertia and deadzone
4 movement modes: XY, X only, Y only, Auto Scroll
Adjustable speed, max speed, and smoothness
Hover Effects
Scale card on hover
Zoom image on hover
Color overlay with adjustable color and opacity
Grayscale desaturation
Lightbox
Full-screen overlay with blur backdrop
Prev / Next navigation buttons
Keyboard navigation — ← → to browse, Esc to close
Renders above all page elements (no z-index conflicts)
Polish
Smooth fade-in animation as images load
Fallback color while loading or on broken links
Optional card shadow
Animations fully disabled on canvas and during export
Setup
Add the component to your Framer project.
Upload mode (default): click the + button in the Images control in the properties panel and add your photos.
URL Folder mode: switch Source to "URL Folder", set Folder URL to your image host base path, and set Images Count to match the number of files (p1.jpg … pN.jpg).
Adjust columns and column width per breakpoint in Framer's responsive panel.
