# Caret Letter
URL: https://remocn.dev/docs/typography/caret-letter

A blinking caret types a word, then slides in and morphs into the missing letter

- Install: `npx shadcn@latest add @remocn/caret-letter`
- Vibe: paper
- Natural length: 180f @ 30fps

## Installation

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

## Usage

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

const CaretLetterScene = () => (
  <CaretLetter
    word="launch"
    stemIndex={0}
    subline="Ship the demo video in an afternoon."
  />
);

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

A caret blinks in and types the word except for one letter, slides over to that spot, the word opens to make room, and the caret morphs into the letter, then a grey subline fades in. Pass `word` and `stemIndex` (the letter the caret turns into; pick a plain stem such as l, I or 1), plus `subline` and `accent`. It ships light and dark through `theme`, defaulting to light.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `word` | `string` | `"launch"` | The word; the caret types every letter except the stem. |
| `stemIndex` | `number` | `0` | Index of the letter the caret becomes; pick a plain stem such as l or I. |
| `subline` | `string` | `"Animated components for your next release."` | Small grey line under the word. |
| `accent` | `string` | `"#3B5BFD"` | Color of the caret and of the letter it becomes. |
| `theme` | `"dark" \| "light"` | `"light"` | Ships light and dark. |
| `speed` | `number` | `1` | Playback speed multiplier. |

## Use when
- A brand or product-name reveal where a text caret becomes one letter of the name.
- A clean intro beat where typing leads into a short descriptive line under the word.
- A paper-light title card that wants a small, precise typographic gag.

## Don't use when
- You just need a typed line with no morph — use `typewriter`.
- The caret should swap one word for another — use `caret-swap`.
- You want a caret that wipes content on or off instead of becoming a letter — use `caret-wipe`.