# Flank Roll Swap
URL: https://remocn.dev/docs/typography/flank-roll-swap

Two flanking words roll into new words around a photo placed in the middle of the line.

- Install: `npx shadcn@latest add @remocn/flank-roll-swap`
- Vibe: premium
- Natural length: 88f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/flank-roll-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FlankRollSwap } from "@/components/remocn/flank-roll-swap";

const FlankRollSwapScene = () => (
  <FlankRollSwap from={["Remocn", "Studio"]} to={["Out now", "on remocn.dev"]} accentWord="remocn.dev" images={["/photos/hero.jpg"]} />
);

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

A two-part line sits on either side of an image, then each side rolls letter by letter into the `to` pair while the pictures cycle. The default photos use `staticFile(...)` paths that only exist in the Remocn repo, so pass your own URLs in `images`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `from` | `[string, string]` | `["Remocn", "Studio"]` | Left and right words shown first. |
| `to` | `[string, string]` | `["Out now", "on remocn.dev"]` | Left and right words they roll into. |
| `accentWord` | `string` | `"remocn.dev"` | Word in `to` tinted with the accent color. |
| `images` | `string[]` | — | Image URLs cycled in the middle; defaults to repo-only files. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `ink` | `string` | — | Text color override; falls back to the theme ink. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |
| `ground` | `GshPresetId` | — | Gradient ground preset id for the backdrop. |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters that tweak the chosen ground preset. |

## Use when
- A release announcement that swaps a studio name for an out-now line around a hero image.
- A brand beat that needs a picture inside the sentence, not behind it.
- A launch-day title card with a call to a URL.

## Don't use when
- You have no images and want a plain text swap — use `width-lock`.
- The photo should sit behind the text as a fill — use `photo-fill-type`.
- You want the headline to change by shifting layout, not rolling — use `layout-swap`.