Skip to content

Velocity Marquee

Big lines of type that slide sideways without end, speeding up and leaning as you scroll.

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

export default function VelocityMarqueeDemo() {
  return (
    <div style={{ width: '100%', padding: '48px 0' }}>
      <VelocityMarquee lines={['Single origin', 'Roasted every Monday', 'Shipped on Friday']} />
    </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, VelocityMarquee } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<VelocityMarquee lines={['Single origin', 'Roasted every Monday']} speed={40} />

Accessibility

Screen readers hear each line once as a list; the repeating copies are hidden from them.
It pauses off screen, and the lines stand still under reduced motion.
Keep the lines short and decorative; never put the only copy of a fact in a marquee.

API Reference

Prop	Type	Default
`lines`	`string[]`	–
`speed?`	`number`	`40`
`className?`	`string`	`''`