# Answer First
URL: https://remocn.dev/docs/typography/answer-first

The question "Who made this video?" is answered by a big "A pull request."

- Install: `npx shadcn@latest add @remocn/answer-first`
- Vibe: playful
- Natural length: 72f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/answer-first
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { AnswerFirst } from "@/components/remocn/answer-first";

const AnswerFirstScene = () => <AnswerFirst answer="A pull request." question="Who made this video?" />;

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

A big answer rises word by word first, then slides up and shrinks as the question types in below it, so the reader sees the answer before the question. Pass `answer` and `question`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `answer` | `string` | `"A pull request."` | The big answer line shown first. |
| `question` | `string` | `"Who made this video?"` | The question that types in beneath the answer. |
| `accent` | `string` | — | Color of the question text; defaults to the theme accent. |
| `background` | `string` | — | Stage fill color; pass "transparent" to overlay your own footage. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme; ships dark and light. |

## Use when
- A Q&A beat where the punchy answer should land before the question that explains it.
- A product claim like a founder's one-line answer to a common question.
- A short hook near the start of a launch video.

## Don't use when
- You need a back-and-forth between two speakers — use `overheard`.
- The answer is a sheepish aside rather than a headline — use `coy-denial`.
- You want a series of objections each answered in turn — use `exactly`.