Story Sequence

A morning ritual in three frames.

Plate I · The bean

Start with the bean.

Small differences become the whole cup. Texture, aroma, and the moment a familiar ritual begins.

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

Plate II · The pour

Give it a moment.

The first pour. The slow bloom. A little attention changes an everyday drink into something worth pausing for.

A slender stream of coffee pours into the cobalt cup.

Plate III · The cup

Make room for the first sip.

A warm cup. A clear counter. A moment that belongs to you, before the day asks for anything else.

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

import { StorySequence } from '@brand-studio/ui';
import { chapters } from '@/demos/assets';

export default function StorySequenceDemo() {
  return <StorySequence title="A morning ritual in three frames." chapters={chapters} />;
}

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

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

Usage

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

<StorySequence title="A morning ritual." chapters={chapters} />

Accessibility

On wide screens with motion allowed, one pinned image changes as each chapter scrolls past.
On phones, without JavaScript and under reduced motion, every image stays in the flow beside its chapter.

API Reference

Prop	Type	Default
`title`	`string`	–
`chapters`	`StoryChapter[]`	–
`id?`	`string`	–
`motion?`	`"auto" \| "off"`	`'auto'`