Documentation

InfiniteWall Gallery documentation

Set up the endless masonry wall in Framer, add your images, and tune how it moves, tilts, and opens.

Getting started

Introduction

InfiniteWall Gallery is a Framer code component that turns a set of images into an endless masonry wall. The wall wraps in every direction, tilts in 3D, drifts on its own, and opens any image into a focused view with a caption.

It is built with plain HTML, CSS, and JavaScript. There is no WebGL, no build step, and no dependencies beyond React and Framer.

Adding it to your project

  1. Open your Framer project and go to Assets → Code → New.
  2. Paste the contents of InfiniteGalleryWall.tsx into the new file.
  3. Drag the component from the Code section onto your canvas.
  4. Resize it freely. It supports any width and any height, and drops in at 1200 × 800.

The default images appear as soon as you drop it, so you can see the effect before adding your own.

Adding your images

Select the component and open Images in the properties panel. Add one entry for each image.

  • Image — The picture itself. Pick an image from your Framer assets.
  • Title — Shown in the caption when the image is focused.
  • Desc — A longer line of text under the title.
  • Button label — The text of the link in the caption.
  • Link — Where the button goes. Leave it empty for no button.
  • Aspect — The width-to-height ratio. 0 uses the image's own ratio.

The component loads a small version of each image for the wall and a large version for the focused view. With Framer images this happens automatically. With URLs that carry a width parameter (such as ?w=600), it swaps in the right width itself.

Behavior

Panning

Pan control sets how visitors move the wall by hand:

  • Drag only (default): click or touch and drag, with inertia when released.
  • Scroll only: the mouse wheel or trackpad pans the wall.
  • Drag + scroll: both work.
  • Off: visitors cannot move the wall by hand, and the grab cursor is hidden.

Drift

Drift X and Drift Y make the wall move slowly on its own, between −5 and 5. Drift is separate from Pan control, so you can turn off hand panning and keep the drift, or the other way round. Set both to 0 to keep the wall still.

With Lightbox on, tapping an image flattens the wall's tilt and brings that image to the centre while its neighbours shrink and dim. Tap again to fly back out. With Lightbox off, tapping an image does nothing.

While an image is focused, tapping a neighbour moves the focus to it.

Caption

When an image is focused, its title, description, and link appear over the bottom of the image on a soft progressive blur. Set Caption to Hidden to show the image alone.

Reduce motion

Reduce Motion has three options. Auto follows the visitor's operating system setting. On and Off override it.

Appearance

Layout

  • Column W: the width of each column, from 64 to 700 px (default 180).
  • Gap: the space between images, from 0 to 120 px (default 64).
  • Radius: the corner radius of each image, from 0 to 120 px (default 0).

Tilt

Tilt X, Tilt Y, and Tilt Z rotate the whole wall in 3D, each from −30° to 30°. The defaults are 10°, 10°, and −10°. Tilt is capped at 30° so the wall always fills the frame. Steeper angles would show an edge.

  • Lightbox Zoom: how much of the frame the focused image fills, from 0.2 to 1 (default 0.8). The image is never enlarged past its source resolution.
  • Lightbox X and Lightbox Y: where the focused image sits, from 0 to 1 (default 0.5, centred).

Neighbors

  • Neighbor Fade: the opacity of the other images while one is focused (default 0.14).
  • Neighbor Scale: how much they shrink (default 0.75).

Connecting your design

Events

The component has two events you can connect in Framer:

  • On Select: runs when an image is focused.
  • On Deselect: runs when the focus closes.

Code overrides

If you would rather build the detail view from Framer layers than use the built-in caption, paste Overrides.tsx into a new code file. It gives you four overrides:

  • withGallerySelection on the InfiniteWall instance: sends the selected image to a shared store.
  • withDetailPanel on your panel component: switches it between the Hidden and Shown variants.
  • withSelectedTitle on a text layer: shows the focused image's title.
  • withSelectedLink on a button or frame: opens the focused image's link.

Make your panel a component with two variants named exactly Hidden and Shown, and set Hidden as the default. You design the enter and exit animation in Framer. Set Caption to Hidden on the gallery so only your panel shows the details.

Advanced

Demo mode

Demo mode adds a control panel at the bottom left of the gallery. Visitors can change column width, tilt, drift, and lightbox settings live. It is meant for demos and playgrounds. Leave it off on production sites.

Performance

Only the images near the visible area are drawn, and they are reused as you pan, so large collections stay smooth. The animation pauses when the gallery scrolls out of view and when nothing is moving, so it doesn't use the processor while idle.

Static rendering

When Framer renders the component without running scripts (for example, in exports or on the canvas thumbnail), it shows a simple still version instead of the animated wall.

Troubleshooting

  • The wall looks flat: check that the Tilt values are not all 0.
  • Nothing happens when I tap an image: make sure Lightbox is on.
  • I can't move the wall: check Pan control. It may be set to Off.
  • The wall doesn't move on its own: Drift X and Drift Y are probably 0, or Reduce Motion is on.
  • Images look soft in the lightbox: the focused view is limited to the source image's resolution, so use larger originals.