# Caret Collapse
URL: https://remocn.dev/docs/transitions/caret-collapse

A line of typed text crops down to its blinking caret, which glides over and opens into a prompt screen

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

## Installation

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

## Usage

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

const CaretCollapseDemoScene = () => (
  <CaretCollapseDemo
    url="remocn.dev/launch"
    question="What will you launch next?"
    prompt="Make a 30-second launch film for our 2.0 release"
  />
);

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

Scene A types a URL with a short label after it. The frame crops down to the caret, which blinks off, glides to the prompt position and opens into scene B, a composer with a question heading and a prompt typed in. Pass `url`, `label`, `question` and `prompt`; it ships light and dark.

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 |
|---|---|---|---|
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette for both scenes |
| `accent` | `string` | — | Caret color; defaults to the theme caret |
| `url` | `string` | `"remocn.dev/launch"` | URL typed in scene A |
| `label` | `string` | `"is live"` | Short label shown after the URL |
| `question` | `string` | `"What will you launch next?"` | Heading above the prompt in scene B |
| `prompt` | `string` | `"Make a 30-second launch film for our 2.0 release"` | Text typed into the scene B prompt box |
| `ground` | `GshPresetId` | — | Preset id for the scene A gradients.sh shader ground |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the scene A shader parameters |
| `groundB` | `GshPresetId` | — | Preset id for the scene B gradients.sh shader ground |
| `groundParamsB` | `Partial<GradientParams>` | — | Overrides for the scene B shader parameters |

## Use when
- A beat that moves from a typed URL or status line into an input where the viewer takes the next step.
- A launch video where the caret is the visual hinge between a statement and an interactive prompt.
- You want a calm hand-off that keeps the eye on one small point.

## Don't use when
- There is no typed text in the outgoing scene to anchor the caret — use `ring-cut` for a generic reveal.
- You want the caret to sweep across the frame and wipe the scene — use `caret-wipe`.
- The cut should be a fast dramatic dive, not a quiet collapse — use `press-warp-dive`.