Skip to content

Video Text

A big headline with a video playing inside its letters.

HALDEN R

Brass, leather and one fixed lens. Ships 14 October.

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

export default function VideoTextDemo() {
  return (
    <div style={{ width: '100%', maxWidth: 760 }}>
      <VideoText as="h3" text="HALDEN R" src="/videos/halden-macro.mp4" className="demo-videotext" />
      <p style={{ margin: '8px 0 0', color: 'var(--bs-muted)' }}>Brass, leather and one fixed lens. Ships 14 October.</p>
      <style>{'.demo-videotext { margin: 0; font-size: clamp(44px, 12.5vw, 116px); white-space: nowrap; font-weight: 800; line-height: .9; letter-spacing: -.05em; }'}</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, VideoText } from '@brand-studio/ui';
import brand from './brand.json';

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

Usage

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

<VideoText as="h1" text="HALDEN R" src="/videos/macro.mp4" />

Set the size and weight with CSS; heavy weights show more of the video. The video is muted, loops, and plays only while the headline is on screen. Serve it from the same origin, or with CORS headers, so the page can draw it.

Accessibility

The heading stays real text: screen readers read it and people can select it.
Until the video can draw, without JavaScript, and when the video fails, it is ordinary type.
Under reduced motion it shows the first frame without playing.

API Reference

Prop	Type	Default
`text`	`string`	–
`src`	`string`	–
`as?`	`React.ElementType`	–
`className?`	`string`	`''`