5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2ul6havqzfm41.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/102lphbyhyqtr.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1zpmt8l695i6d.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3sj_xp-v1_jxx.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/0ph1ht6wvel_v.js","/creators-assets/_next/static/immutable/chunks/2zfre20tirh12.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0-hg6m03a-yoq.js"],"PostDetailCard"] 5f: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!

5b:[["$","$L5e",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":"$5f","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"}],"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":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"qbuksSgOXOneRzeKDVOM"}}],"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}}],"$L60"]

Suggested for you

Suggested for you

Suggested for you