Skip to content

Infinite Canvas

A wall of images you drag in any direction. It never runs out and glides after a flick.

A cobalt ceramic cup of coffee on a brushed steel counter in morning light.

The Halden R camera from three quarters, lens forward.

Roasted coffee beans on the steel counter, with the same cobalt cup behind them.

A slender stream of coffee pours into the cobalt cup.

The back of the Halden R, with its screen and dials.

The Halden R from the front, its lens centred.

The Halden R from above, showing the shutter dial.

The Halden R taken apart into its body, lens and battery.

import { InfiniteCanvas } from '@brand-studio/ui';
import { beans, cameraViews, cup, pour } from '@/demos/assets';

export default function InfiniteCanvasDemo() {
  return (
    <div style={{ width: '100%' }}>
      <InfiniteCanvas label="Halden archive" images={[cup, cameraViews[0], beans, cameraViews[2], pour, cameraViews[3], cameraViews[1], cameraViews[4], cameraViews[5]]} />
    </div>
  );
}

Installation

pnpm add @brand-studio/ui

npm install @brand-studio/ui

yarn add @brand-studio/ui

bun add @brand-studio/ui

Install the peer dependencies
```
npm install react react-dom
```
Import the stylesheet once
```
import '@brand-studio/ui/styles.css';
```

Wrap your app in a brand theme

import { BrandTheme, InfiniteCanvas } from '@brand-studio/ui';
import brand from './brand.json';

<BrandTheme palette={brand.tokens} mode="system">
  {/* your app */}
</BrandTheme>

Usage

import { InfiniteCanvas } from '@brand-studio/ui';

<InfiniteCanvas label="Archive" images={images} />

Accessibility

The canvas is one focusable region; arrow keys pan it.
Each image is named once. Copies that fill the wrap are hidden from screen readers.
Before scripts run it is a plain scrolling grid. With reduced motion it stops when you let go.

API Reference

Prop	Type	Default
`images`	`ImageAsset[]`	–
`label?`	`string`	`'Gallery'`
`className?`	`string`	`''`