# Shot Answers
URL: https://remocn.dev/docs/media/shot-answers

A question rewrites itself word by word into its answer while a framed screenshot slides in beside it.

- Install: `npx shadcn@latest add @remocn/shot-answers`
- Vibe: clean
- Natural length: 92f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shot-answers
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShotAnswers } from "@/components/remocn/shot-answers";

const ShotAnswersScene = () => (
  <ShotAnswers
    question="What if your launch video were just another pull request?"
    answer="Your launch video is just another pull request."
    src="/shots/studio.png"
    url="example.dev/studio"
  />
);

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

The `question` writes in word by word and a framed screenshot slides in beside it. The shared words then glide into place while the rest swap, forming the `answer`, with new words appearing in the accent color. Pass your own `question`, `answer` and image through `src`; the default is a `staticFile` image from the Remocn repo. The timeline scales with the composition length, and it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `question` | `string` | `"What if your launch video were just another pull request?"` | Question that writes in first. |
| `answer` | `string` | `"Your launch video is just another pull request."` | Answer the question rewrites into. Reuse words for the glide. |
| `src` | `string` | — | Screenshot URL for the frame. Defaults to a repo-only file. |
| `aspect` | `number` | `16 / 9` | Aspect ratio of the screenshot. |
| `accent` | `string` | — | Color of new words in the answer. Defaults depend on theme. |
| `background` | `string` | — | Solid background. Use 'transparent' to drop the ground. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |
| `url` | `string` | `"remocn.dev/studio"` | Address shown in the frame's title bar. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |

## Use when
- A question-and-answer beat where the answer reuses most of the question's words.
- Pairing a bold claim with the screenshot that proves it, in a browser-style frame with a URL.
- A text-led scene that should end on a product image rather than a logo.

## Don't use when
- The sentence should end by growing a thumbnail into the image — use `looks-like-this`, the inline-thumbnail twin of this scene.
- You want to zoom into one detail of the image — use `up-close`.
- There is no question and answer, only a product tour — use `screenshot-tour`.