# Out of Context
URL: https://remocn.dev/docs/typography/out-of-context

A bold claim stacks line by line, then a pulled-out phrase finishes it in the accent color.

- Install: `npx shadcn@latest add @remocn/out-of-context`
- Vibe: playful
- Natural length: 86f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/out-of-context
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { OutOfContext } from "@/components/remocn/out-of-context";

const OutOfContextScene = () => (
  <OutOfContext claim={"Stop making\nlaunch videos"} rest="by hand." />
);

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

The claim lines fly in, one drops out of alignment and is pulled across the frame, and the closing phrase arrives in the accent color. Pass `claim` (newlines split lines) and `rest` for the closing phrase; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `claim` | `string` | `"Stop making\nlaunch videos"` | Setup lines; newlines split rows |
| `rest` | `string` | `"by hand."` | Closing phrase shown in the accent color |
| `accent` | `string` | — | Accent color (any valid CSS color) |
| `background` | `string` | — | Overrides the theme's stage color |
| `speed` | `number` | `1` | Playback speed multiplier |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |

## Use when
- A punchy slogan where the final phrase flips the meaning, such as Stop making launch videos by hand.
- A two-part statement with a setup claim and a short colored punchline.

## Don't use when
- The text is a single short word - use `spring-scale-in`.
- You want a calm blur entrance - use `soft-blur-in`.
- You want text to replace in place - use `strikethrough-replace`.