# Waveform Title
URL: https://remocn.dev/docs/typography/waveform-title

A headline rises over an aurora waveform line that settles into an underline beneath it

- Install: `npx shadcn@latest add @remocn/waveform-title`
- Vibe: clean
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/waveform-title
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WaveformTitle } from "@/components/remocn/waveform-title";

const WaveformTitleScene = () => (
  <WaveformTitle title="Your voice, captioned" accentWords={1} />
);

export const RemotionRoot = () => (
  <Composition
    id="WaveformTitle"
    component={WaveformTitleScene}
    durationInFrames={140}
    fps={30}
    width={1280}
    height={720}
  />
);
```

An aurora waveform line opens and sweeps across the frame, settles into an underline, and the headline rises above it, with the trailing word(s) in italic serif. Pass `title` and `accentWords`; it ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Your voice, captioned"` | The headline that rises over the waveform. |
| `accentWords` | `number` | `1` | How many trailing words are set in the italic serif accent. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour (any CSS colour). |
| `speed` | `number` | `1` | Playback multiplier; above 1 plays faster. |
| `theme` | `"dark" \| "light"` | `"dark"` | Colour scheme; ships light and dark. |

## Use when
- A product beat about voice, audio or captions where a waveform line sits under the title.
- A title card where the headline rises and the last word is set in serif italic.

## Don't use when
- You want a pulse running through the text itself — use `pulse-line`.
- You need a plain headline without an audio motif — use `blur-out-up`.