Skip to content

Scroll Formation

A pinned stage where scattered images drift into a tidy grid as you scroll, while the title fades back.

Everything in the box, in its place.

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

export default function ScrollFormationDemo() {
  return (
    <ScrollFormation
      label="The Halden kit"
      title="Everything in the box, in its place."
      images={[cameraViews[0], cup, cameraViews[1], beans, cameraViews[2], pour, cameraViews[3], cameraViews[4], cameraViews[5]]}
    />
  );
}

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, ScrollFormation } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<ScrollFormation label="The kit" title="Everything in the box." images={images} />

Six to twelve images read best. The section is about two and a half screens tall while it pins.

Accessibility

The section is labelled and the images keep their alt text in reading order.
Before scripts run, and under reduced motion, the title sits over an ordinary grid with no pinning.

API Reference

Prop	Type	Default
`images`	`ImageAsset[]`	–
`title?`	`React.ReactNode`	–
`label?`	`string`	`'Gallery'`
`className?`	`string`	`''`