# Hot Stage
URL: https://remocn.dev/docs/typography/hot-stage

A headline pushes down and falls away for the next line while a faint mono mission log lights up.

- Install: `npx shadcn@latest add @remocn/hot-stage`
- Vibe: tech
- Natural length: 112f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/hot-stage
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { HotStage } from "@/components/remocn/hot-stage";

const HotStageScene = () => (
  <HotStage
    lines={["Write the scene.", "Render the cut.", "Ship it."]}
    log={["T+00:00  Draft", "T+02:10  Render", "T+04:00  Live"]}
  />
);

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

The first line fades up beside a dim monospaced log. Every `stage` frames the next line pushes in with a flash of thin vent ticks, the previous line goes dim and falls away, and the matching log entry lights up. Pass your own `lines` and a `log` with one entry per line. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | — | Headline lines shown one at a time; each replaces the previous. |
| `log` | `string[]` | — | Mono log entries on the side; entry N lights up when line N arrives. |
| `stage` | `number` | `44` | Frames between one line arriving and the next. |
| `accent` | `string` | — | Color of the vent ticks; defaults to the ink color. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A closing beat that walks through build, render and ship stages, each new line displacing the last.
- A developer-tool launch where a faint mono log beside the headline adds technical credibility.
- A three-line value statement that must land one line at a time with a countdown feel.

## Don't use when
- You have one short line and want a calm caption instead of a staged log — use `cool-down`.
- The lines should stay on screen and step in like code — use `indent-steps`.
- You want a plain staggered paragraph with no log or vents — use `line-by-line-slide`.