Turn your static assets into an immersive, infinite experience.
The Endless Gallery Grid is the ultimate mixed-media canvas for Framer. Rebuilt from the ground up as a Hybrid Engine, it combines the mathematical precision of a grid with the adaptive beauty of a social feed.
It solves the biggest problem with heavy media grids: Render Lag. By upgrading to a massive 4000px "Ultra-Eager" Buffer, this component eliminates "white flashes" and "pop-ins" during high-speed scrolling. It delivers a 60fps, native-app feel on everything from 120Hz ProMotion displays 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.
⚡️ Ultra-Eager Performance Engine Most video grids stutter or show empty boxes when dragged fast. This one doesn't. We engineered a 4000px "Safety Zone" that keeps assets mounted and painted well outside the viewport. This guarantees that even the fastest flick-gestures reveal content instantly.
🧠 Hybrid Layout Architecture We decoupled the brains of the Grid and the Carousel for the best of both worlds:
The Grid uses "Strict Deterministic Spacing" to ensure videos are perfectly distributed for a balanced aesthetic.
The Carousel uses a "Smart Adaptive Engine" that auto-detects aspect ratios. Whether it's a Portrait video or a Landscape photo, the player resizes to fit the screen perfectly without cropping.
📱 Native-Grade Mobile Physics Web gestures often feel "off" on mobile. We fixed that with a custom physics engine:
Anti-Ghost Click: Smart prevention of accidental closes when tapping rapidly.
Edge Safety: A "Mount Shield" prevents accidental closures when tapping near screen edges.
Micro-Drag Tolerance: Mathematically distinguishes between a sloppy tap and a scroll intent.
🎬 Vertical Feed Mode (New!) Transform your gallery into a social-media style feed. Switch the Carousel Direction to Vertical, and the component automatically adapts:
Adaptive Height: Cards scale relative to the viewport height (e.g., 70vh).
Contextual Peeking: Previous/Next slides peek in just enough to encourage scrolling.
🔊 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.
Battery Efficient: Off-screen videos auto-pause immediately to save resources.
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, border radius, and colors.
Keyboard & Wheel: Full support for Arrow Keys, Trackpads, and Mouse Wheels.
Scroll Locking: Intelligent input detection allowing scroll locking on the grid (for exploration) and unlocked vertical scrolling on the carousel.
Drag the component onto your canvas.
Upload: Add your Images and Videos via the property panel.
Note: Default demo assets vanish instantly once you upload a single file.
Choose Mode: Set your Carousel Direction to Horizontal (Classic) or Vertical (Social Feed).
Customize: Adjust Video Spacing, Animation Speed, and Drag Sensitivity to match your brand feel.
Publish!
Turn your static assets into an immersive, infinite experience.
The Endless Gallery Grid is the ultimate mixed-media canvas for Framer. Rebuilt from the ground up as a Hybrid Engine, it combines the mathematical precision of a grid with the adaptive beauty of a social feed.
It solves the biggest problem with heavy media grids: Render Lag. By upgrading to a massive 4000px "Ultra-Eager" Buffer, this component eliminates "white flashes" and "pop-ins" during high-speed scrolling. It delivers a 60fps, native-app feel on everything from 120Hz ProMotion displays 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.
⚡️ Ultra-Eager Performance Engine Most video grids stutter or show empty boxes when dragged fast. This one doesn't. We engineered a 4000px "Safety Zone" that keeps assets mounted and painted well outside the viewport. This guarantees that even the fastest flick-gestures reveal content instantly.
🧠 Hybrid Layout Architecture We decoupled the brains of the Grid and the Carousel for the best of both worlds:
The Grid uses "Strict Deterministic Spacing" to ensure videos are perfectly distributed for a balanced aesthetic.
The Carousel uses a "Smart Adaptive Engine" that auto-detects aspect ratios. Whether it's a Portrait video or a Landscape photo, the player resizes to fit the screen perfectly without cropping.
📱 Native-Grade Mobile Physics Web gestures often feel "off" on mobile. We fixed that with a custom physics engine:
Anti-Ghost Click: Smart prevention of accidental closes when tapping rapidly.
Edge Safety: A "Mount Shield" prevents accidental closures when tapping near screen edges.
Micro-Drag Tolerance: Mathematically distinguishes between a sloppy tap and a scroll intent.
🎬 Vertical Feed Mode (New!) Transform your gallery into a social-media style feed. Switch the Carousel Direction to Vertical, and the component automatically adapts:
Adaptive Height: Cards scale relative to the viewport height (e.g., 70vh).
Contextual Peeking: Previous/Next slides peek in just enough to encourage scrolling.
🔊 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.
Battery Efficient: Off-screen videos auto-pause immediately to save resources.
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, border radius, and colors.
Keyboard & Wheel: Full support for Arrow Keys, Trackpads, and Mouse Wheels.
Scroll Locking: Intelligent input detection allowing scroll locking on the grid (for exploration) and unlocked vertical scrolling on the carousel.
Drag the component onto your canvas.
Upload: Add your Images and Videos via the property panel.
Note: Default demo assets vanish instantly once you upload a single file.
Choose Mode: Set your Carousel Direction to Horizontal (Classic) or Vertical (Social Feed).
Customize: Adjust Video Spacing, Animation Speed, and Drag Sensitivity to match your brand feel.
Publish!
