Skip to content

Dot Grid

A field of dots behind your content that swell and lean away from the mouse.

Halden developer kit

Every dial, open to your own code.

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

export default function DotGridDemo() {
  return (
    <DotGrid style={{ width: '100%', maxWidth: 720, padding: '64px 32px', borderRadius: 20, border: '1px solid var(--bs-line-soft)', background: 'var(--bs-elevated)' }}>
      <p style={{ margin: '0 0 8px', fontSize: 13, color: 'var(--bs-muted)' }}>Halden developer kit</p>
      <h3 style={{ margin: '0 0 20px', fontSize: 'clamp(26px, 5vw, 40px)', maxWidth: 440 }}>Every dial, open to your own code.</h3>
      <Button>Read the API</Button>
    </DotGrid>
  );
}

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

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

Usage

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

<DotGrid gap={22} radius={130}>
  <h2>Every dial, open to your own code.</h2>
</DotGrid>

Dots take the brand's line colour, and the accent near the mouse.

Accessibility

The dots are drawn on a canvas hidden from screen readers; your content sits above it.
Only a mouse moves them. Touch and reduced motion see a still pattern.

API Reference

Prop	Type	Default
`gap?`	`number`	`22`
`radius?`	`number`	`130`

Also accepts every HTMLAttributes<HTMLDivElement> attribute.