# Dynamic Letter
URL: https://remocn.dev/docs/logo-stings/dynamic-letter

One letter of the wordmark cuts through shape treatments on the beat, then lands on a final style.

- Install: `npx shadcn@latest add @remocn/dynamic-letter`
- Vibe: premium
- Natural length: 68f @ 30fps

## Installation

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

## Usage

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

const DynamicLetterScene = () => (
  <DynamicLetter
    text="emocn"
    variants={["solid", "outline", "stripes", "dots"]}
    final="overflow"
  />
);

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

The R mark and wordmark hold still while one letter (the first o by default) cuts through treatments such as outline, stripes and dots, tightening on the beat, then lands on the `final` treatment as the poster. Pass `text`, `letterIndex`, `variants` and `final`. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"emocn"` | Lowercase letters set after the R mark. |
| `letterIndex` | `number` | — | Index in text of the letter that changes. |
| `variants` | `DynamicLetterVariant[]` | `DEFAULT_VARIANTS` | Treatments the letter cuts through, in order. |
| `final` | `DynamicLetterVariant` | `"overflow"` | Treatment the letter lands on and holds. |
| `beat` | `number` | `8` | Frames per treatment at the start; cuts tighten from there. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour for the mark and highlights; any CSS colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |

## Use when
- A logo sting for a design or type product that should show the identity is flexible.
- A beat-synced identity cut where one letter changes style.
- A brand video that needs a quick it-adapts moment.

## Don't use when
- A single shape should morph into the letter — use `shape-morph-o`.
- You want a quiet reveal with no style cuts — use `first-light`.
- The changing part should be words, not one letter — use `bracket-index`.