# Phrase List Bridge
URL: https://remocn.dev/docs/typography/phrase-list-bridge

A phrase splits as a floating list deals in, a highlight picks one row, and it closes back in.

- Install: `npx shadcn@latest add @remocn/phrase-list-bridge`
- Vibe: clean
- Natural length: 116f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/phrase-list-bridge
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { PhraseListBridge } from "@/components/remocn/phrase-list-bridge";

const PhraseListBridgeScene = () => (
  <PhraseListBridge
    left="Pick from"
    right="ready-made scenes"
    items={["Hero intro", "Feature tour", "Pricing beat", "Closing card"]}
    pickedIndex={1}
  />
);

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

The `left` and `right` phrases appear as one line, then split apart as a floating panel deals in your `items` between them. A highlight steps down to the row at `pickedIndex`, which turns accent-colored with a check while the other rows fall away, and the panel closes into a chip that bridges the two phrases. Pass `left`, `right`, up to eight `items`, and `pickedIndex`; the default items are Remocn component names. It ships light and dark, each over a gradient ground.

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 light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `left` | `string` | `"Browse through"` | Text on the left of the final line. |
| `right` | `string` | `"ready-made scenes"` | Text on the right of the final line. |
| `items` | `string[]` | — | List rows shown in the panel; only the first eight are used. |
| `pickedIndex` | `number` | `2` | Zero-based index of the row that gets picked. |
| `accent` | `string` | — | Color of the picked row and the final chip. |
| `ink` | `string` | — | Text color; overrides the theme ink. |
| `background` | `string` | — | Base background color behind the gradient ground. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `ground` | `GshPresetId` | — | Gradient shader preset id for the background. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the gradient shader parameters. |

## Use when
- A beat that shows many options and then lands on one, such as browsing scenes and choosing a favorite.
- A sentence whose middle word should be filled by a picked item from a short list.

## Don't use when
- You only want a pill to expand inside a sentence, with no list — use `inline-pill-takeover`.
- A video tile should slot into a gap in the sentence — use `word-gap-media`.
- You want rows of feature chips that cluster around a logo — use `feature-chips-flow`.