# Focus Pan Text
URL: https://remocn.dev/docs/typography/focus-pan-text

Earlier lines stack up blurred as focus pans down line by line to a final sentence and a small toolbar.

- Install: `npx shadcn@latest add @remocn/focus-pan-text`
- Vibe: premium
- Natural length: 113f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/focus-pan-text
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FocusPanText } from "@/components/remocn/focus-pan-text";

const FocusPanTextScene = () => (
  <FocusPanText
    lines={["The scan is clean.", "All 48 checks passed.", "You're ready to launch."]}
    meta="Just now"
  />
);

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

Each line is read in turn while earlier lines fall out of focus above; focus lands on the final line, the accent word lights up and a toolbar with `meta` text appears. Pass `lines` and `accentWord`; it ships light and dark through `theme`.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `lines` | `string[]` | `DEFAULT_LINES` | Lines shown in order; the last one is the payoff |
| `accentWord` | `string` | — | Word in the last line shown in the accent color |
| `meta` | `string` | `"Just now"` | Text in the toolbar after the final line |
| `accent` | `string` | — | Color of the accent word |
| `ink` | `string` | — | Text color override |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark palettes |
| `ground` | `GshPresetId` | — | Gradient ground preset id |
| `groundParams` | `Partial<GradientParams>` | — | Partial gradient parameters to tune the ground |
| `firstHold` | `number` | `30` | Frames the first line is held before panning on |

## Use when
- A step-by-step status sequence, such as checks passing, ending on a ready message.
- A narrative beat where several short lines build to one final statement.

## Don't use when
- You have only one sentence - use `focus-blur-resolve`.
- You want the lines to be typed - use `typewriter`.
- You want lines to replace each other in place - use `per-word-crossfade`.