Skip to content

Image Transition

A slideshow where each image dissolves into the next through drifting noise.

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

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

export default function ImageTransitionDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 720 }}>
      <ImageTransition label="The morning ritual" images={[beans, pour, cup]} />
    </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, ImageTransition } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<ImageTransition label="The morning ritual" images={[beans, pour, cup]} />

The images keep their focal points through the dissolve. Serve them from the same origin, or with CORS headers, for WebGL to read them.

Accessibility

It is a labelled carousel. Previous and next buttons, the arrow keys and a sideways swipe change the image, and the count is announced.
Each slide is a real picture with its alt text; hidden slides are hidden from screen readers.
Without WebGL, and under reduced motion, images swap at once.

API Reference

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