# Deadpan Box
URL: https://remocn.dev/docs/typography/deadpan-box

A flat, deadpan quote in a blue box with a small attribution line

- Install: `npx shadcn@latest add @remocn/deadpan-box`
- Vibe: clean
- Natural length: 126f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/deadpan-box
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DeadpanBox } from "@/components/remocn/deadpan-box";

const DeadpanBoxScene = () => <DeadpanBox quote="Nobody watches launch videos." attribution="Founder. Nobody watched the launch." brand="remocn" />;

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

A small box showing the brand logo grows to hug a flat quote, which holds for a deadpan beat; then the box floods the whole frame and the attribution line lands the joke before a brand sign-off. Pass `quote`, `attribution` and `brand` ("remocn" renders the real logo, anything else is set as a wordmark).

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `quote` | `string` | `"Nobody watches launch videos."` | The setup, without quote marks: curly marks are added and hung for you. |
| `attribution` | `string` | `"Founder. Nobody watched the launch."` | The deadpan attribution that lands the joke after a pause. |
| `brand` | `string` | `"remocn"` | Brand name; "remocn" renders the real logo, anything else a wordmark. |
| `accent` | `string` | `"#3B5BFD"` | Main color of the gradient field inside the box. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |

## Use when
- A joke or punchline beat where a quiet setup is flipped by the attribution that follows.
- A bold, minimal quote card that should end with the brand signing off.
- A social-style card that starts as a masthead and expands into a full-frame statement.

## Don't use when
- The quote is sincere praise from a real customer — use `quote-hero`.
- You want a quick one-line reveal with no setup and punchline — use `soft-blur-in`.
- The setup needs a follow-up aside in a corner rather than a flood — use `coy-denial`.