Interactive image gallery — for Framer
A curved, GPU-rendered image ribbon. Drag it, scroll it, or let it drift.
Frame loop
rAF
Synced to the display and idle when still. Real frame rate depends on the device.
Cards per list
24
A connected CMS list adds every image it holds.
Dependencies
0
Nothing beyond React and Framer.
Reduced motion
Honoured
Drift, entrance and video autoplay stop.
02 — Properties
Every property,
live.
The playground drives the same props as the Framer properties panel. Change one and its value appears over the preview.
03 — Scroll mode
Scroll the page.
The ribbon follows.
Pinned for 260 vh of page scroll, then released. The page keeps its native scroll: no wheel capture, no snapping.
Fig. 03 — pinned stage, 100 vh
Start
Release
04 — Built in
Six capabilities.
One component.
Each row maps to a real prop of the component. Try rows 02 and 03 in the live example.
01
Cards bend as they near the edge. Flat zone sets how much stays straight, edge height how far the ends rise.
02
Drag with momentum and glide to rest. Sideways wheel, trackpad and arrow keys move it too.
03
Pin the ribbon and let page scroll move it, or let it pass through the viewport.
04
Connect a Collection List. Each image in it becomes a card, with its link.
05
Mix photos with MP4, WebM or MOV clips. Video stays paused under reduced motion.
06
Cards in view, fixed width or height, or ratio. Cards never exceed 92% of the stage height.
Live — rows 02 and 03
Drag or flick the ribbon. Arrow keys work too.
Paste it into your project, add images or a CMS list, publish.