Media / COMPONENT

Infinite Image Canvas

An endless, pannable image grid with spring-smooth movement, animated tiles, and pastel image labels.

Live preview

Somewhere, Everywhere

An endless field of images, waiting to be explored.

View the Infinite Image Canvas source on GitHub

How it works

Scroll over the canvas, drag it, or focus it and use the arrow keys to explore. Tiles are generated around the current view, with enter and exit transitions as they move into and out of view. Scroll outside the canvas to move the page.

Accessibility

The canvas is a labeled keyboard-focusable region. Arrow keys pan the grid, each image is treated as decorative, and reduced-motion preferences disable tile transitions.

Limitations

Image positions repeat from the supplied collection as the canvas expands. The app is responsible for hosting the image URLs and providing image names and pastel colors.

Features

Creates an endless image grid with at least eight rows and columns around the current view.
Pan with the mouse wheel, drag, or keyboard arrow keys.
Scroll outside the canvas to continue scrolling the page.
Uses spring motion for smooth tile movement and fades, scales, and blurs tiles as they enter or leave view.
Displays each image name in a solid pastel label beneath the image.
Respects reduced-motion preferences.

Installation

Choose the CLI command or install the component manually.

Package manager

$ npx @istmx/ui add infinite-image-canvas

Copies the install command for your selected package manager.

Dependencies

ReactMotionTailwind CSSclsxtailwind-merge

Usage

Import the component from the file you copied it to, then use it like any other React component.

Usage

import InfiniteImageCanvas from '@/components/ui/infinite-image-canvas'
 
const images = [
  {
    src: '/images/one.jpg',
    alt: 'A quiet mountain lake',
    name: 'Stillwater',
    color: '#d9c9ff',
  },
  {
    src: '/images/two.jpg',
    alt: 'Sunlight over the coast',
    name: 'Sunday Light',
    color: '#ffd8c4',
  },
]
 
<InfiniteImageCanvas
  images={images}
  heading="Somewhere, Everywhere"
  description="An endless field of images, waiting to be explored."
  className="h-[42rem]"
/>

Composition

InfiniteImageCanvas
├── Pannable image grid
├── Animated image tiles
└── Pastel name labels

API reference

imagesInfiniteImageCanvasItem[]

Required image collection. Each item has src, alt, name, and color fields.

heading?string

Centered heading layered over the images. Defaults to “Somewhere, Everywhere”.

description?string

Supporting text below the centered heading.

className?string

Classes applied to the outer canvas section.

tileWidth?number

Grid cell width in pixels. Defaults to 210.

tileHeight?number

Grid cell height in pixels. Defaults to 270.

The listed props match the current component implementation.

Data attributes

Infinite Image Canvas does not expose custom data attributes.

Examples

Provide image URLs, descriptive alt text, a short image name, and a solid pastel color for each item. Pan the canvas with the wheel, drag, or arrow keys; scrolling outside the canvas continues to move the page.

Credits & inspiration

Created by Aryan (istmX) for ISTMX. The source-first, copy-and-own philosophy is inspired by shadcn/ui. About the creator