# Bracket Index
URL: https://remocn.dev/docs/logo-stings/bracket-index

Indexed bracket labels step through words, then the brackets close around the product name.

- Install: `npx shadcn@latest add @remocn/bracket-index`
- Vibe: tech
- Natural length: 140f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/bracket-index
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { BracketIndex } from "@/components/remocn/bracket-index";

const BracketIndexScene = () => (
  <BracketIndex
    prefix="Motion for"
    words={["launches", "changelogs", "demos"]}
    product="remocn"
  />
);

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

A prefix phrase sits on screen while brackets open around the first word and roll through each next word, then close around the product name as the prefix steps aside. Pass `prefix`, `words` and `product`; each extra word adds 38 frames. Ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `prefix` | `string` | `"Motion for"` | Text set before the brackets; it steps aside for the product. |
| `words` | `string[]` | `["launches", "changelogs", "demos"]` | Words indexed inside the brackets, in order. |
| `product` | `string` | `"remocn"` | Final word the brackets close on. |
| `accent` | `string` | `"#3B5BFD"` | Accent colour for the mark and highlights; any CSS colour. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette and ground. |
| `speed` | `number` | `1` | Playback multiplier for the whole timeline; 1 is normal speed. |

## Use when
- A for-X, for-Y, for-Z beat that lists use cases before naming the product.
- A tech product line where bracketed index labels fit the brand.
- A reveal where a prefix phrase steps aside for the final name.

## Don't use when
- You want full-frame word flashes instead of brackets — use `blink-cut`.
- Words should lock on mechanical reels — use `split-match`.
- One statement and a logo is enough — use `introducing`.