# Known Terms
URL: https://remocn.dev/docs/typography/known-terms

Term and definition pairs push each other into place, building to an accent-colored final line.

- Install: `npx shadcn@latest add @remocn/known-terms`
- Vibe: clean
- Natural length: 159f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/known-terms
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { KnownTerms } from "@/components/remocn/known-terms";

const KnownTermsScene = () => (
  <KnownTerms
    pairs={[
      { video: "A scene", dev: "a component." },
      { video: "An edit", dev: "a commit." },
      { video: "Your launch", dev: "a deploy." },
    ]}
  />
);

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

A term appears alone in the center, then slides left as its counterpart pushes in from the right with a dim joiner word between them. Earlier pairs dim as new ones stack beneath, and the last pair turns the accent color. Pass `pairs` as `{ video, dev, joiner? }`; `joiner` sets the default connector word. Timing adapts to the composition length; 159 frames assumes five pairs in 180. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `pairs` | `{ video: string; dev: string; joiner?: string }[]` | `DEFAULT_PAIRS` | Term and counterpart pairs; a pair's own joiner overrides the default. |
| `joiner` | `string` | `"is"` | Default connector word shown between the two halves. |
| `accent` | `string` | — | Color of the final pair; overrides the theme accent. |
| `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 beat that maps familiar concepts to your product, such as a scene is a component.
- A short run of three to five equivalences that should build up and end on the key claim.

## Don't use when
- You need a dictionary-style definition of a single term — use `verbed`.
- Each line is a worry answered by a bigger reply, not an equivalence — use `in-proportion`.
- You only want a plain list of lines stepping in — use `indent-steps`.