Skip to content

Particle Field

Specks that drift slowly behind your content and scatter from the mouse.

Night mode, new in firmware 2.1

Shoot by starlight.

import { Button, ParticleField } from '@brand-studio/ui';

export default function ParticleFieldDemo() {
  return (
    <ParticleField style={{ width: '100%', maxWidth: 720, padding: '72px 32px', borderRadius: 20, border: '1px solid var(--bs-line-soft)', textAlign: 'center' }}>
      <p style={{ margin: '0 0 8px', fontSize: 13, color: 'var(--bs-muted)' }}>Night mode, new in firmware 2.1</p>
      <h3 style={{ margin: '0 auto 20px', fontSize: 'clamp(26px, 5vw, 40px)', maxWidth: 460 }}>Shoot by starlight.</h3>
      <Button tone="secondary">See the night samples</Button>
    </ParticleField>
  );
}

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

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

Usage

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

<ParticleField count={80}>
  <h2>Shoot by starlight.</h2>
</ParticleField>

Specks take the ink colour, and one in five the accent. Keep count under about 150 on a large section.

Accessibility

The specks are drawn on a canvas hidden from screen readers; your content sits above it.
It pauses off screen, and reduced motion holds one still frame.

API Reference

Prop	Type	Default
`count?`	`number`	`80`

Also accepts every HTMLAttributes<HTMLDivElement> attribute.