About Grid Archive

Most image galleries stop at the edge of the page. Grid Archive doesn't.

Images repeat across a seamless canvas with no visible beginning or end, turning a small collection of photos into an open space visitors can explore.

Choose from three layouts to create a different visual experience:

• Organic: A loose, staggered arrangement of equal-sized square images.

• Masonry: A column-based layout where images retain their proportions.

• Scatter: A freely arranged composition with gentle image rotation.

Give important images extra attention with Hero photos. Each Hero appears larger, only once per repeat, and can determine where the canvas opens.

Designed for desktop and mobile, Grid Archive includes smooth navigation, cinematic zoom, image preloading and a full-screen photo viewer.

Features

Infinite Canvas & Navigation

• Seamless, infinitely repeating image canvas.

• Drag to pan with smooth momentum.

• Six cinematic zoom steps.

• Zoom using mouse wheel, trackpad, double-click, pinch or keyboard.

• Adjustable zoom speed and zoom range.

• Optional background grid with custom colour and spacing.

Three Layout Styles

Organic

• Loose, staggered arrangement of equal-sized square images.

• Adjustable Drift Amount for a more natural composition.

Masonry

• Column-based arrangement that preserves image proportions.

• Supports image ratios from 3:4 to 3:2.

• Consistent spacing between images.

Scatter

• Freely arranged images with gentle rotation.

• Creates a more expressive, editorial-style composition.

Additional layout controls include photo size, gap, tilt, corner radius, board colour and Layout Seed.

Hero Photos

Give selected images more visual importance.

• Mark any image as a Hero.

• Hero images appear larger and only once per repeat.

• Choose between Wide and Tall shapes.

• Choose Small or Big sizes.

• Automatically centre the canvas on a Hero when it opens.

Full-Screen Photo Viewer

• Open any image in a full-screen viewer.

• Navigate using previous and next arrows.

• Support for keyboard arrow navigation.

• Swipe between images on mobile.

• Swipe down to close on phones.

• Optional close button.

• Close using Escape or by clicking outside.

• Optional Visit button for images with a custom link.

• Adjustable Modal Z-Index to display the viewer above page elements.

Loading & Performance

• Images are preloaded and decoded before the board appears.

• Customisable loading bar with colour, font, width and percentage options.

• Two preload modes:

  • All: Loads every image before displaying the board for a seamless experience.

  • Fast: Displays the board sooner, making it more suitable for larger image collections.

• Only images near the visible area are mounted.

• Far zoom-out is limited to help keep the board lightweight.

Mobile & Accessibility

• Automatically detects phones and adjusts interactions.

• Pinch to zoom and drag to pan.

• Tap images to open the viewer.

• Swipe to navigate between photos.

• Keyboard navigation and visible focus outlines.

• Labelled controls.

• Respects reduced-motion preferences.

Easy Setup

• No code required.

• All settings are available through Framer property controls.

• Add images directly through the component's Images list.

• Set individual image Fit and Link options.

• The editor canvas displays a static layout preview.

• Interactive features work in Preview and on the published website.

Pages

• Home

• About

• Contact

• 404

Customization Board

• Layout Style

• Photo Size

• Photo Fit

• Photo Gap

• Tilt Amount

• Drift Amount

• Layout Seed

• Corner Radius

• Board Color

• Show Grid

• Grid Color

• Grid Size

Motion & Navigation

• Zoom Speed

• Zoom Range

Viewer

• Close Button

• Navigation Arrows

• Modal Z-Index

Loading

• Preload Mode

• Bar Color

• Bar Font

• Show Percentage

• Bar Width

Individual Images

• Photo Type: Normal or Hero

• Hero Shape: Wide or Tall

• Hero Size: Small or Big

• Image Fit

• Custom Link

Perfect For

• Photography and filmmaker portfolios

• Creative studios and agencies

• Brand lookbooks and campaign galleries

• Moodboards and inspiration boards

• Architecture and interior portfolios

• Fashion and editorial projects

• Travel photography

• Event and project archives

Getting Started

1. Add Grid Archive to your Framer page.

2. Add your photos using the Images list.

3. Choose a Layout Style and adjust Photo Size and Photo Gap.

4. Mark important images as Heroes and customise their appearance.

5. Add custom links to images if needed.

6. Open Preview to test the interactions, then publish your website.

Tips for Best Results

• Use 16 or more photos for a richer and more varied canvas.

• Export images as WebP, ideally around 1600px on the longest side and under 300 KB each.

• A Photo Size between 200 and 320 works well for most boards.

• Use two Hero images for a balanced composition. The board supports up to three.

• Masonry works best when images have reasonably similar proportions.

• For larger image collections, use Fast preload mode where supported. Masonry uses All mode.

FAQ

Does Grid Archive work on mobile?

Yes. Visitors can pinch to zoom, drag to pan, tap images to open the viewer and swipe between photos.

Why does the board look static in the Framer editor?

The editor canvas intentionally displays a static preview of the layout. Interactive features, including panning, zooming and the full-screen viewer, work in Preview and on the published website.

How many photos can I add?

There is no fixed component limit. However, the practical limit depends on image sizes, device memory and browser performance.

All mode preloads every image before displaying the board and is best suited to smaller collections, generally under 100 images. Fast mode is available for larger collections where supported.

Can images link to other pages?

Yes. Add a custom Link to any image. The full-screen viewer will display a Visit button for that image.

Can I add images from the CMS?

Images are added directly through the component's own Images list. CMS integration is not currently supported.

Will the same image appear more than once?

Yes. Grid Archive creates a seamless repeating canvas. It distributes repeated copies of the same image as far apart as the selected layout allows.

Does it support keyboard navigation?

Yes. Visitors can navigate the canvas and photo viewer using supported keyboard controls. Visible focus indicators and labelled controls are also included.

Keywords & Tags

infinite canvas, image gallery, photo board, portfolio, photography, moodboard, masonry, lightbox, zoom, pan, lookbook, image archive, creative portfolio

Version History
v1.0

• Infinite, seamless repeating image canvas.

• Three layout styles: Organic, Masonry and Scatter.

• Hero images with customisable shape and size.

• Six-step cinematic zoom.

• Momentum-based panning.

• Mouse, trackpad, touch and keyboard navigation.

• Full-screen image viewer with arrows, swipe and custom links.

• Image preloading with a customisable loading bar.

• Mobile interaction support.

• Keyboard accessibility and reduced-motion support.