# Run on
URL: https://remocn.dev/docs/typography/run-on

A breathless run-on sentence speeds up and scrolls away, then a full stop drops into a short promise line.

- Install: `npx shadcn@latest add @remocn/run-on`
- Vibe: clean
- Natural length: 188f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/run-on
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { RunOn } from "@/components/remocn/run-on";

const RunOnScene = () => (
  <RunOn
    text="Open the old project and relink the fonts and nudge every keyframe and render and spot a typo and render it all again"
    promise="Or change one line."
    highlight="one line"
  />
);

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

The `text` runs in word by word at an accelerating pace, joiner words like and dimmed, and scrolls up as it fills the frame. A final accent full stop slams in, the wall drains away, and the stop slides down to end the `promise` line, whose `highlight` phrase lights up. Pass a long `text` without its final period, plus `promise` and `highlight`. It ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Open last year’s project and relink the fonts and nudge every keyframe and render and spot a typo and render it all again"` | Long sentence to run on; its trailing punctuation is removed. |
| `promise` | `string` | `"Or change one line."` | Short line that follows once the long sentence drains away. |
| `highlight` | `string` | `"one line"` | Phrase inside promise that turns accent-colored. |
| `joiners` | `string[]` | `["and", "then"]` | Words dimmed within the run-on, such as and or then. |
| `accent` | `string` | — | Color of the full stop and highlight; 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 pain-point beat that shows a tedious workflow as one exhausting sentence before the fix.
- A before and after moment where the long version should feel endless and the answer one short line.

## Don't use when
- The pain is a repeating loop of short steps rather than one sentence — use `loop-break`.
- You want the chore list to be crossed out, not scrolled away — use `filler-cut`.
- You only need the short answer with a highlighted phrase — use `answer-first`.