Skip to content

component

InfinityGallery

By Oleksandr Demydov

Details

Summary

InfinityGallery is a full-screen masonry gallery that moves with your cursor.

Description

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.

Introduction

Infinite masonry gallery

Rank history

Daily rank per list, from the first snapshot — lower is better.

12001400157508/148/228/309/79/15
  • All · #5750