Skip to content

Pinned Zoom

A picture that starts as a framed card and grows to fill the screen as you scroll.

Make room for the first sip.

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

The Huila lot, poured at ninety-four degrees.

import { PinnedZoom } from '@brand-studio/ui';
import { cup } from '@/demos/assets';

export default function PinnedZoomDemo() {
  return (
    <div style={{ width: '100%' }}>
      <PinnedZoom asset={cup} title="Make room for the first sip.">
        <p style={{ margin: 0 }}>The Huila lot, poured at ninety-four degrees.</p>
      </PinnedZoom>
    </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, PinnedZoom } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<PinnedZoom asset={cup} title="Make room for the first sip.">
  <p>The Huila lot, poured at ninety-four degrees.</p>
</PinnedZoom>

The title fades as the picture grows; the children appear over the full picture at the end.

Accessibility

The picture keeps its alt text, and the title is a real heading.
Before scripts run, and under reduced motion, it is the title over a full-width image.

API Reference

Prop	Type	Default
`asset`	`ImageAsset`	–
`title?`	`React.ReactNode`	–
`children?`	`React.ReactNode`	–
`className?`	`string`	`''`