The Proximity Grid

The Proximity Grid

Drag to move around, scroll to zoom in. Do a lot more! All properties in the description below.

Example 1

Example 2

Example 1

Example 2

Proximity Image Wall controls

  • Images: Upload the tile images. The wall repeats them in a deterministic pattern, so even small image sets feel varied.

  • Image Fit and Match Image Ratio: Image Fit chooses cover or contain. Match Image Ratio keeps each image’s natural proportions; when it is off, Tile Width and Tile Height define a fixed tile size.

  • Proximity scale: Minimum Scale controls tiles away from the center. Center Scale controls tiles near the center. Set Minimum Scale to 1 to remove shrinking.

  • Zoom and pan: Scroll Zoom enables wheel, trackpad, and mobile pinch zoom. Zoom Amount sets the maximum zoom level. Drag To Scroll lets visitors pan around the wall.

  • Tile layout: Tile Width, Tile Height, Spacing, Horizontal Spacing, Tile Shape, and Dense Packing control the grid. Hexagonal creates a honeycomb layout; Dense Packing reduces extra safety space between scaled tiles.

  • Drift motion: Drift Speed controls automatic movement. Drift X and Drift Y choose direction on each axis, or can be set to None to stop that axis.

  • Tile styling: Background styles the component canvas. Corner Radius rounds each tile. Border Color and Border Width control outlines. Shadow, Shadow Color, Shadow Blur, Shadow X, and Shadow Y control depth.

  • Opacity Falloff: Fades tiles farther from the center for a softer depth effect. Leave it off for a consistent wall of images.

Create a free website with Framer, the website builder loved by startups, designers and agencies.