# Layover
URL: https://remocn.dev/docs/typography/layover

A headline's key word cycles through short stops before landing on the final word.

- Install: `npx shadcn@latest add @remocn/layover`
- Vibe: clean
- Natural length: 142f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/layover
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Layover } from "@/components/remocn/layover";

const LayoverScene = () => (
  <Layover from="Write it" word="here." stops={["w", "every"]} to="Plays" />
);

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

The `from` phrase stays while `word` cycles through each entry in `stops` and settles on `to`. Pass `from`, `word`, `stops` and `to` to tell your own stop-by-stop story. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `string` | `"Write it"` | Phrase that stays in place. |
| `word` | `string` | `"here."` | Initial word in the cycling slot. |
| `stops` | `string[]` | `["w", "every"]` | Words the slot passes through. |
| `to` | `string` | `"Plays"` | Word the line settles on. |
| `accent` | `string` | — | 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 journey beat where a word steps through intermediate stops before arriving.
- A tagline that morphs through shorthand fragments to a full word.
- A short hero line with one cycling slot.

## Don't use when
- You want a time phrase counting down to today — use `on-approach`, which is the close twin.
- The cycling slot should keep a fixed width — use `width-lock`.
- Words should pull into view from spaced-out places — use `pull-in`.