# Focus Front Swap
URL: https://remocn.dev/docs/typography/focus-front-swap

A headline pulls focus from line to line, blurring one out as the next comes forward, then ends on a logo.

- Install: `npx shadcn@latest add @remocn/focus-front-swap`
- Vibe: premium
- Natural length: 122f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/focus-front-swap
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FocusFrontSwap } from "@/components/remocn/focus-front-swap";

const FocusFrontSwapScene = () => (
  <FocusFrontSwap lines={["Remocn knows the beat", "You describe it once", "Ship it {tonight}."]} logo={false} />
);

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

Each line in `lines` sharpens into focus while the previous one blurs back, and a mark appears under the final line. Wrap a word in `{}` such as `{tonight}` to accent it, and set `logo={false}` to drop the mark.

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 |
|---|---|---|---|
| `lines` | `string[]` | — | Headlines in order; wrap a word in curly braces to accent it. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `ink` | `string` | — | Text color override; falls back to the theme ink. |
| `logo` | `boolean` | `true` | Show the logo mark after the last line. |
| `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. |
| `swap` | `number` | `BEAT.swap` | Frames between focus pulls. |
| `blur` | `number` | `18` | Maximum blur radius in pixels for out-of-focus lines. |

## Use when
- A rhythmic three-line pitch that ends on a call to ship now.
- A cinematic headline sequence over a soft gradient ground.
- A launch hook where each line builds on the last and the final word should pop.

## Don't use when
- Lines should swap by shifting layout rather than depth — use `layout-swap`.
- You need an object sweeping across the frame — use `pass-swap`.
- You want one word changed while the rest stays put — use `pinned-word`.