Skip to content

Scramble Text

Letters flicker through random characters, then settle left to right.

LOT 27 · HUILA · WASHED

Stone fruit and brown sugar.

Roasted on Monday, in your cup by Friday. Hover the lot line to play it again.

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

export default function ScrambleTextDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 560 }}>
      <ScrambleText as="p" text="LOT 27 · HUILA · WASHED" className="demo-scramble" />
      <h3 style={{ margin: '12px 0 8px', fontSize: 'clamp(26px, 5vw, 40px)' }}>Stone fruit and brown sugar.</h3>
      <p style={{ margin: 0, color: 'var(--bs-muted)' }}>Roasted on Monday, in your cup by Friday. Hover the lot line to play it again.</p>
      <style>{'.demo-scramble { margin: 0; font: 600 13px/1.4 ui-monospace, Menlo, monospace; letter-spacing: .12em; color: var(--bs-accent); }'}</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, ScrambleText } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<ScrambleText as="p" text="LOT 27 · HUILA · WASHED" />

It plays once when it scrolls into view, and again when a mouse moves over it. duration sets how long, in milliseconds, it takes to settle.

Accessibility

Screen readers hear the plain text once; the flickering copy is hidden from them.
The server renders the final text, and reduced motion keeps it still.
Keep it to short labels: a long line that flickers is hard to read.

API Reference

Prop	Type	Default
`text`	`string`	–
`as?`	`React.ElementType`	–
`duration?`	`number`	`900`
`className?`	`string`	`''`