Skip to content

Parallax Gallery

Three columns of images that drift at different speeds.

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

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

A slender stream of coffee pours into the cobalt cup.

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

A slender stream of coffee pours into the cobalt cup.

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

A slender stream of coffee pours into the cobalt cup.

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

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

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

export default function ParallaxGalleryDemo() {
  return (
    <div style={{ width: '100%', padding: '48px 0' }}>
      <ParallaxGallery images={[cup, beans, pour, beans, pour, cup, pour, cup, beans]} />
    </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, ParallaxGallery } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<ParallaxGallery images={images} />

Accessibility

Uses CSS scroll-driven animation; without support the columns stay still.
Every image keeps its alt text.

API Reference

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