# Spell Out
URL: https://remocn.dev/docs/logo-stings/spell-out

Letters drop in one at a time with hyphens between them, then close into the word with a line beneath.

- Install: `npx shadcn@latest add @remocn/spell-out`
- Vibe: clean
- Natural length: 103f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/spell-out
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { SpellOut } from "@/components/remocn/spell-out";

const SpellOutScene = () => (
  <SpellOut
    name="remocn"
    line="Say it once. Remember it."
    speed={1}
  />
);

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

Each letter of `name` drops in with a small impact and a hyphen between, holds spelled out, then closes up into the finished word while `line` rises beneath. Pass `name` and `line`; `speed` retimes it. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `name` | `string` | `"remocn"` | Word spelled out letter by letter. |
| `line` | `string` | `"Say it once. Remember it."` | Slogan that rises under the finished word. |
| `accent` | `string` | — | Colour of the hyphens between letters. |
| `background` | `string` | — | Stage fill colour; overrides the theme background. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |

## Use when
- A name people mispronounce, where spelling it out is the hook.
- A brand intro with a one-line slogan right after the name.
- A minimal sting built on a bold lowercase wordmark.

## Don't use when
- You want a glitchy decode rather than a clean drop — use `glyph-block-decode`.
- The sting needs the actual logo mark, not typed text — use `snap-click`.
- Many words should cut in at a fast rhythm — use `blink-cut`.