# Width Lock
URL: https://remocn.dev/docs/typography/width-lock

A condensed line keeps a fixed width while one word swaps through a list.

- Install: `npx shadcn@latest add @remocn/width-lock`
- Vibe: clean
- Natural length: 143f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/width-lock
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WidthLock } from "@/components/remocn/width-lock";

const WidthLockScene = () => (
  <WidthLock before="Ship the" words={["trailer", "captions", "launch video"]} after="by tonight." />
);

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

The line holds a constant width while the middle word swaps through each entry in `words`. Pass `before`, `words` and `after`, and set `hold` for how long each word stays. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"Ship the"` | Text before the swapping word. |
| `words` | `string[]` | — | Words swapped in order. |
| `after` | `string` | `"by tonight."` | Text after the swapping word. |
| `hold` | `number` | `30` | Frames each state stays on screen before the next one. |
| `accent` | `string` | `"#3B5BFD"` | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A claim with one slot that cycles through deliverables, such as trailer, captions, launch video.
- A headline where layout must not jump when the word changes.
- A short sentence that lists several use cases.

## Don't use when
- The swapped word should be pressed with annotations — use `ruby-press`.
- One word stays and the rest swap — use `pinned-word`.
- Words should arrive from a spread-out position — use `pull-in`.