Infinite Media Grid

Add a mesmerizing 3D infinite scrolling media grid to your Framer website with buttery-smooth motion physics, dynamic layout columns, and high-performance WebGL rendering.

Features

• Endless seamless vertical scrolling loop

• Native image and video support with autoplay

• Smooth mouse wheel and touch drag inertia

• Responsive column layout for desktop and mobile

• High-performance WebGL rendering engine

• Dynamic row preloading for zero-lag scrolling

• Automatic fallback for static rendering environments

• Built-in accessibility and reduced motion support

• Clean, lightweight code component structure

• Fully customizable gap, speed, and smoothing

Customization Options

• Media items (Images and videos with custom sources)

• Desktop and mobile column count

• Layout gap spacing (% of frame height)

• Scroll speed multiplier

• Response damping/smoothing

• Interactive drag control toggle

• Reduced motion setting respect

• Pixel ratio resolution scaling

• Optional source links display

• Text color customization

How to Use

• Drag and drop the Infinite Grid component onto your Framer canvas

• Add your high-resolution images or looping MP4/WebM videos

• Adjust column counts and gap spacing to fit your layout

• Tune scroll speed and response damping for desired feel

• Publish your site for an immersive 3D media experience

Use Cases

• High-fashion portfolio showcases

• Cinematic agency landing pages

• Creative photography galleries

• Dynamic video background sections

• Modern editorial lookbooks

• Immersive product showcases

• Dark-mode design portfolios

• Interactive moodboard sections