# Loop Break
URL: https://remocn.dev/docs/typography/loop-break

A short loop of lines repeats faster each pass until a final line breaks it and highlights one phrase.

- Install: `npx shadcn@latest add @remocn/loop-break`
- Vibe: clean
- Natural length: 189f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/loop-break
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { LoopBreak } from "@/components/remocn/loop-break";

const LoopBreakScene = () => (
  <LoopBreak
    loop={["Render the cut.", "Spot a typo.", "Start over."]}
    fix="Change one word. Done."
    highlight="Done."
  />
);

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

The `loop` lines rise in one by one, hold, then rewind and replay faster on each of the `passes`. On the last pass the loop's final row is replaced by `fix`, which rises in sentence by sentence with the `highlight` phrase in the accent color while the earlier lines dim. Timing is tuned for a 215-frame composition and compresses if it is shorter. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `loop` | `string[]` | — | Lines of the repeating loop; at least two. |
| `fix` | `string` | `"Change one word. Done."` | Line that breaks the loop; each sentence gets its own row. |
| `highlight` | `string` | `"Done."` | Phrase inside fix that turns accent-colored. |
| `passes` | `number` | `3` | How many times the loop plays before the break; minimum 2. |
| `accent` | `string` | — | Accent color; overrides the theme accent. |
| `background` | `string` | — | Background fill; pass "transparent" to drop it. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A before and after beat that contrasts a tedious repeating workflow with a one-step fix.
- A joke about doing the same chore over and over that ends on the product's answer.

## Don't use when
- You want the old line struck through and replaced in place — use `strikethrough-replace`.
- The change is a single edit that should be shown as a diff — use `diff-swap`.
- There is no repetition, just a short statement and a reply — use `answer-first`.