A horizontally flowing carousel where your images are masked behind a barrel-distorted grid of rounded cells. Drag, release, snap, with smooth inertia, edge-responsive radii, and built-in auto-play.
Drop-In Images: Upload any number of images through Framer's native image control. The carousel doubles them internally for seamless infinite scrolling. No duplication needed in your layout.
Barrel Distortion: Cells near the center render at full scale, while those drifting toward the edges shrink via a Gaussian falloff. Edge cells also get larger corner radii, creating a soft, squircle-like flow across the entire strip.
Drag Physics: Grab anywhere on the carousel and push it around. A LERP-based smoothing system catches the release with natural inertia, then snaps to the nearest image based on velocity or drag distance.
Auto Play: Set it and forget it. Toggle auto-play on, choose direction (left or right), and dial in the interval from 300ms to 10 seconds.
Arrow Navigation: Clean, customizable arrow buttons sit just below the carousel for accessibility. Fill color and icon color are both exposed as props.
Full Control: Tune rows (2–8), columns per image (4–14), cell gap, base radius, and frame color. Toggle the edge vignette on or off to match any background.
Responsive by Default: A built-in ResizeObserver rebuilds the grid the moment your layout changes. Cell dimensions recalculate live — no reload, no flicker.
Each image is subdivided into a grid of cells and rendered across virtual columns. A single requestAnimationFrame loop computes Gaussian-scaled positions every frame, updating only the visible window of cells (±30 around center) for performance. Drag input updates a target scroll position; the render loop LERPs toward it, producing that buttery follow feel. Snap points are computed from velocity and drag distance.
Abhrajit Ray
