5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T11bb,

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.

Why this component is different:

⚡️ 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.

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, 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.

How to use

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!

5a:[["$","$L5d",null,{"post":{"id":"019bc223-a113-7864-bfa8-e67549f70e0b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"95a32581-2c5d-4140-92b3-f660ccd0f757","name":"Oluwasegun Babalola","slug":"designwithbabs","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1277895/avatar-iwQtB4QgaDlYOkrxOuygYhFUo1S0dr.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"OOYfXKIteYX98ACHRoNN","resolved":true,"title":"Endless Gallery Grid","body":"$5e","bodyJson":null,"introduction":"Infinite, zero-lag media grid.","slug":"endless-gallery-grid","author":{"framerUserId":"95a32581-2c5d-4140-92b3-f660ccd0f757","name":"Oluwasegun Babalola","slug":"designwithbabs","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1277895/avatar-iwQtB4QgaDlYOkrxOuygYhFUo1S0dr.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/OOYfXKIteYX98ACHRoNN/endless-gallery-grid-Cc4dPUeYkqfNIdxRXA3y2xJzQLiKuj","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-03T09:13:57.052Z","updatedAt":"2026-06-06T07:42:36.925Z","publishedAt":"2026-01-15T14:51:13.555Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://endless-gallery-grid.framer.website/","price":"5","paymentUrl":"https://designwithbabs.lemonsqueezy.com/checkout/buy/744af6d7-aa19-4aea-80c7-334e1923a773","workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"qbuksSgOXOneRzeKDVOM","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-15T14:51:13.555Z","updatedAt":"2026-01-15T14:51:13.555Z","reported":false}}],"$L5f"]

Suggested for you