One side, two laps
01
The strip turns half a turn as it crosses itself. A card that leaves the front comes back on the reverse, and only gets home after two laps. The minimap counts them: Lap A, Lap B.
Framer code component · WebGL
A gallery with one side and no end.
Möbius Gallery threads your images onto a strip with a half twist. Cards ride the loop, cross over themselves and come back around on the reverse. The part nearest you grows; the far side steps back.
Most carousels end, or fake an end with a jump. A Möbius strip can’t: it has one edge and one side, so there is nowhere to stop.
We put a gallery on it.
How it moves
Six things happening at once, so you don’t have to think about any of them.
A focus field, not a zoom
02
Cards don’t share the loop evenly. The zone nearest the camera takes more of the path, so those cards grow longer and wider while the far side shrinks to make room. Point it at the cursor or a fixed spot instead.
A real camera
03
True 3D perspective, not a CSS tilt. Switch between Front, Lean, Above and Orbit, push the lens from flat to wide-angle, and the frame refits so the loop never clips.
A ticker that keeps pace
04
The thumbnail rail moves in step with the strip and lights the image in focus. Tap a thumbnail and the strip turns to bring it forward.
Photos stay readable
05
Through every twist, each card cross-fades to a flipped copy whenever it would land upside down or mirrored. Switch to Follow to see the raw ribbon.
Calm by default
06
Hovering a card slows the loop. Prev and next hold it still for a beat. Visitors who prefer reduced motion start paused, and nothing is drawn while it’s off screen.
Made for
Work that deserves another lap.
Photography series
A body of work that reads as one continuous piece.
Product drops
Every colourway on one loop, the hero one up front.
Portfolio reels
Selected work that never runs out of scroll.
Event recaps
A night in sixteen frames, on repeat on the lobby screen.
Built for the Framer canvas
Every behaviour on this page is a property control.
Images
Image, title and meta line for each card. Up to 40.
Strip
Shape, cards on the loop, card ratio, gap, radius, half twists, twist style, twist position, depth.
Motion
Autoplay, speed, direction, speed on hover, drag, inertia, scroll boost, hold.
Camera
View preset, perspective, pointer parallax, padding.
Focus
Focus on nearest, pointer, a fixed spot or off; strength, falloff, dim far, upright or follow.
Look
Light or dark UI, background, accent, placeholder, edge, back-side shade, floor shadow, depth shade, occlusion.
Interface
Controls, view switch, theme switch, caption, minimap, ticker, lightbox, click behaviour, font.
Light on the page
One draw call per card, rebuilt from a precomputed loop each frame.
No React renders while it moves. Ticker and minimap are written straight to the page.
Stops drawing off screen and in background tabs.
Mipmapped textures keep far cards sharp, not shimmering.
Starts paused for reduced-motion visitors. Full keyboard support.
Falls back to a plain image row if WebGL isn’t available.
How to add it
From remix to a live gallery in three steps.
1. Remix the project
Select Get Free to open the project in Framer and remix it. Copy the Möbius Gallery component into your own site from there.
2. Size it and add images
Give the gallery a fixed height on each breakpoint, then add an image, title and meta line for each card in the Images list.
3. Pick a look and preview
Choose a view, a shape and your colours. The canvas shows a still frame, so check the motion in Preview.
Questions
Common questions about Möbius Gallery.
What is Möbius Gallery?
Möbius Gallery is a free code component for Framer that shows your images on a strip with a half twist, drawn in WebGL with real 3D perspective. Cards travel the loop, cross over themselves and come back on the reverse side, so the gallery never reaches an end.
Is Möbius Gallery free?
Yes. Remix the project from the Framer Marketplace at no cost. The component comes with it, along with a Start Here guide that explains every control.
How do I add my own images?
Select the gallery, open Images in the properties panel and add an image, title and meta line for each card, up to 40. Each image's alt text is used for screen readers. With the list empty, the gallery shows a demo set from Lorem Picsum.
Why is the gallery still on the Framer canvas?
The canvas shows a still frame to keep the editor fast. The motion plays in Preview and on your published site.
Does it work on phones and tablets?
Yes. Visitors drag or swipe to move the strip. On narrow screens the view and shape buttons move into a panel above the control bar. Give the gallery a fixed height on each breakpoint.
Is it accessible?
It has keyboard controls: the arrow keys step through images, Space plays and pauses, Enter opens an image and Esc closes it. Buttons have screen reader labels, and visitors who prefer reduced motion see it start paused.
Will it slow my site down?
It needs no extra packages and stops drawing when it is off screen or in a background tab. If a browser can't run WebGL, it shows a plain row of your images instead.
Can I change the shape and the twist?
Choose an infinity loop or a ring, set any number of half twists, and move a gathered twist to the front, back, left or right. Depth Shade and Occlusion add shading where the strip turns away or passes over itself.
Every frame comes back around.
Free on the Framer Marketplace. Remix the project, add your images, pick a view.