Skip to content

Image Trail

Moving the mouse leaves a fading trail of images.

Move your mouse here.

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

export default function ImageTrailDemo() {
  return (
    <ImageTrail images={[cup, beans, pour]} className="demo-trail">
      <p style={{ margin: 0, fontSize: 'clamp(28px, 5vw, 56px)', fontWeight: 600, textAlign: 'center' }}>Move your mouse here.</p>
    </ImageTrail>
  );
}

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

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

Usage

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

<ImageTrail images={images}>
  <h2>Move your mouse here.</h2>
</ImageTrail>

Accessibility

Decorative only: trail images have empty alt text.
Touch and reduced motion show only the content.

API Reference

Prop	Type	Default
`images`	`ImageAsset[]`	–
`children?`	`React.ReactNode`	–
`spacing?`	`number`	`90`
`className?`	`string`	`''`