# Walkout Name
URL: https://remocn.dev/docs/typography/walkout-name

A fighter-style name stack slams in line by line, then a light band, record and nickname arrive

- Install: `npx shadcn@latest add @remocn/walkout-name`
- Vibe: playful
- Natural length: 78f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/walkout-name
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WalkoutName } from "@/components/remocn/walkout-name";

const WalkoutNameScene = () => (
  <WalkoutName
    name={["The", "Launch", "Kid"]}
    nickname="Zero downtime"
    record="40–2"
    finishes="31 KO"
  />
);

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

The name whips in as an extreme close-up of line one, hard-cuts to line two, then slams down line three with an inverted impact frame and shake. The camera pulls out, a light band sweeps across the stack, the record and finishes stats punch in, and the serif nickname wipes in beside the last line. Pass `name` (three short lines read best), `nickname`, `record` and `finishes` to make it yours; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string[]` | `["The", "Launch", "Kid"]` | Stacked name lines, one per entry; three short lines read best. |
| `nickname` | `string` | `"Ships before lunch"` | Serif italic nickname in quotes, beside the last line. |
| `record` | `string` | `"12–0"` | Record text slammed in beside the name. |
| `finishes` | `string` | `"12 KO"` | Second stat under the record, filled with the spotlight gradient. |
| `recordLabel` | `string` | `"Pro record"` | Small label above the record. |
| `billing` | `string` | `"Main event · Tonight"` | Small billing line at the top left. |
| `accent` | `string` | `"#3B5BFD"` | Color of the billing tick and the record rule. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A launch-day intro beat that announces a founder or product by name with a nickname and a headline stat.
- A hype opener where the name slams in line by line with camera shake before a spotlight band sweeps across.
- A comparison or milestone beat where a record-style number (releases shipped, uptime) lands beside the name.

## Don't use when
- The name should arrive quietly with a polished, understated feel — use `name-gloss`.
- The text is a sentence rather than three short name lines — use `line-by-line-slide`.
- You only need one punchy word to slam in, with no record or nickname — use `round-slam`.