# Caret Dolly
URL: https://remocn.dev/docs/ui-blocks/caret-dolly

A prompt box types a request while the camera dollies along the caret and punches in on one phrase.

- Install: `npx shadcn@latest add @remocn/caret-dolly`
- Vibe: tech
- Natural length: 120f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/caret-dolly
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { CaretDolly } from "@/components/remocn/caret-dolly";

const CaretDollyScene = () => (
  <CaretDolly
    prompt="Make a launch video for our new app with a bold title and a calm ending"
    focus="launch video"
    modelLabel="Remocn 1"
  />
);

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

The camera rides the caret as the `prompt` types, then punches in huge on the `focus` phrase, pulls back to show the full box and types the rest. A cursor then presses the send button. Pass your own `prompt` and a `focus` phrase that occurs inside it; 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 |
|---|---|---|---|
| `prompt` | `string` | `"Make a launch video for our new app with a bold title, product shots and a calm ending"` | Full sentence typed into the prompt box. |
| `focus` | `string` | `"launch video"` | Phrase inside the prompt that gets the giant close-up. |
| `chipLabel` | `string` | `"Video"` | Label of the chip in the box toolbar. |
| `modelLabel` | `string` | `"Remocn 1"` | Label of the model selector in the box toolbar. |
| `accent` | `string` | — | Accent color. Defaults depend on theme. |
| `ink` | `string` | — | Text color override. |
| `background` | `string` | — | Background color override for the stage. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color scheme. Ships light and dark. |
| `ground` | `GshPresetId` | — | Shader preset id for the animated background. |
| `groundParams` | `Partial<GradientParams>` | — | Partial shader parameters that override the ground preset. |

## Use when
- An AI product launch where the typed prompt is the hero, with one phrase emphasized in extreme close-up.
- You want the camera to feel like it rides the typing caret across a long sentence.
- A single request needs to build tension before a send press.

## Don't use when
- The prompt box should sit still with a slash command and an attachment tile — use `card-push-line`, the same prompt card with a push-in instead of a caret dolly.
- The text lives in a terminal rather than a prompt card — use `terminal-cursor-zoom`.
- A plain headline should type with no UI around it — use `typewriter`.