# Turnabout
URL: https://remocn.dev/docs/typography/turnabout

One sentence turns into its mirror image as words flip, ending with an accent-colored phrase.

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

## Installation

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

## Usage

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

const TurnaboutScene = () => (
  <Turnabout before="You work for the video." after="The video works for you." highlight="you." />
);

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

The `before` sentence enters word by word, then turns into the `after` sentence while shared words travel to their new spots. The `highlight` phrase in `after` lights up in the accent color. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `string` | `"You work for the video."` | Opening sentence. |
| `after` | `string` | `"The video works for you."` | Sentence it turns into. |
| `highlight` | `string` | `"you."` | Phrase inside `after` lit in the accent color. |
| `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 positioning beat that flips the framing, such as from effort for the tool to effort from the tool.
- A before-and-after claim where both lines reuse most of the same words.
- A tagline reveal that should feel like a twist rather than a swap.

## Don't use when
- The two lines share no words and just replace each other — use `layout-swap`.
- Only one word should change inside a fixed sentence — use `pinned-word`.
- You want an edit-style change with inserted words — use `word-insert`.