Turn your static assets into an immersive, infinite experience.
The Endless Gallery Grid is the ultimate mixed-media canvas for Framer. Engineered for speed and interaction, it solves the biggest problem with heavy media grids: lag. By utilizing a custom 1200px render buffer and strict viewport culling, this component delivers a butter-smooth, 60fps experience on everything from high-end desktops to older mobile devices—even with 4K video content.
It is not just a grid; it is a cinematic storytelling tool designed to keep users engaged longer.
Why this component is different:
⚡️ Zero-Lag Performance Engine Most video grids stutter when dragged. This one doesn't. We engineered a "Safety Zone" that keeps assets mounted well outside the screen edge, while aggressively unmounting off-screen content to save battery and RAM.
🔀 Decoupled Layout Logic We separated the brains of the Grid and the Carousel:
The Grid uses "Strict Spacing" (controlled by you) to ensure videos are perfectly distributed for a balanced aesthetic.
The Carousel uses a "True Random Shuffle" to mix all your assets into a unique, organic loop for infinite discovery.
👆 Desktop & Mobile Perfection Forget broken scrolling. We implemented intelligent input detection that allows Scroll Locking on the grid (for exploration) and unlocked vertical scrolling on the carousel (for easy navigation). Full support for Touch, Mouse Drag, Trackpad Pan, and Mouse Wheel.
🔊 Intelligent Audio Handoff Create a premium experience without the noise chaos.
Seamless Transition: Unmute a video in the grid, and the sound state persists into the carousel.
Tap-to-Mute: Sleek, glass-morphic visual controls on every video.
Auto-Focus: Videos auto-play when centered and strictly mute their neighbors.
Features at a glance:
Infinite Loop: Seamlessly connects start-to-end for endless scrolling.
Deep Linking: Clicking a grid item instantly locates it in the shuffled carousel.
Smart Defaults: Demo assets vanish instantly once you upload your own content.
Customizable: Control video density, animation speed, drag sensitivity, and colors.
Keyboard Support: Full arrow-key navigation.
Drag the component onto your canvas.
Upload your Images and Videos via the property panel.
Note: The default demo assets will automatically vanish as soon as you upload a single file.
Adjust the Video Spacing slider to control how frequently videos appear in the grid.
Adjust other controls to your needs.
Publish!
Oluwasegun Babalola
