# Name Gloss
URL: https://remocn.dev/docs/typography/name-gloss

Big name words rise together, split into columns, and each gets a short gloss before a closing line.

- Install: `npx shadcn@latest add @remocn/name-gloss`
- Vibe: clean
- Natural length: 135f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/name-gloss
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { NameGloss } from "@/components/remocn/name-gloss";

const NameGlossScene = () => (
  <NameGloss
    parts={[
      { word: "Brand", gloss: "Your colors, your type, your logo." },
      { word: "kit", gloss: "Packed into every scene you install." },
    ]}
    why="So every film looks like yours."
  />
);

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

The name words rise in the middle as one phrase, then glide apart into columns across the top. Under each one its gloss builds word by word, and the `why` sentence resolves last in the accent color. Pass `parts` as `{ word, gloss }` pairs, usually two or three, and a closing `why`. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `parts` | `{ word: string; gloss: string }[]` | `DEFAULT_PARTS` | Name words, each with the gloss shown beneath its column. |
| `why` | `string` | `DEFAULT_WHY` | Closing sentence in the accent color. |
| `accent` | `string` | — | Color of the closing sentence. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A naming beat where a two-part product or feature name is unpacked word by word.
- A short definition moment, with a one-line reason to care that closes the scene.

## Don't use when
- You are mapping familiar concepts to yours, not glossing words — use `known-terms`.
- You want a dictionary entry with senses and an example for one word — use `verbed`.
- You have three feature words with progress ticks and notes — use `feature-trio`.