Skip to content

Proximity Text

Letters grow bolder, and lean toward the accent, the closer the mouse comes.

Halden journal · Issue 04

Made to be carried, not kept.

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

export default function ProximityTextDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 640 }}>
      <p style={{ margin: '0 0 12px', fontSize: 13, color: 'var(--bs-muted)' }}>Halden journal · Issue 04</p>
      <ProximityText as="h3" text="Made to be carried, not kept." className="demo-proximity" />
      <style>{'.demo-proximity { margin: 0; font-size: clamp(34px, 7vw, 64px); line-height: 1.05; letter-spacing: -.03em; }'}</style>
    </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, ProximityText } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<ProximityText as="h2" text="Made to be carried, not kept." radius={140} />

The weight runs from 300 to 800, so use it with a variable font; a font with fixed weights jumps between them. radius is how far, in pixels, the mouse reaches.

Accessibility

Screen readers hear the plain text once; the letter pieces are hidden from them.
Only a mouse changes it. Touch and reduced motion see the text at rest.

API Reference

Prop	Type	Default
`text`	`string`	–
`as?`	`React.ElementType`	–
`radius?`	`number`	`140`
`className?`	`string`	`''`