Skip to content

Flip Text

Cycles through words with a letter-by-letter flip.

Coffee for slow mornings, long drives, late shifts, good company

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

export default function FlipTextDemo() {
  return (
    <h2 style={{ margin: 0, fontSize: 'clamp(28px, 5vw, 48px)', textAlign: 'center' }}>
      Coffee for <FlipText words={['slow mornings', 'long drives', 'late shifts', 'good company']} />
    </h2>
  );
}

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

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

Usage

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

Coffee for <FlipText words={['slow mornings', 'late shifts']} />

Accessibility

Screen readers hear every word once, as a list, instead of each change.
Under reduced motion the words swap without the flip.

API Reference

Prop	Type	Default
`words`	`string[]`	–
`interval?`	`number`	`2400`
`className?`	`string`	`''`