# Tldr on Top
URL: https://remocn.dev/docs/typography/tldr-on-top

A short TL;DR summary stacks above a dense paragraph that fades into the background.

- Install: `npx shadcn@latest add @remocn/tldr-on-top`
- Vibe: clean
- Natural length: 130f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/tldr-on-top
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TldrOnTop } from "@/components/remocn/tldr-on-top";

const TldrOnTopScene = () => (
  <TldrOnTop label="TL;DR" lines={["Every scene is a component.", "Your brand is one file."]} />
);

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

A label and summary lines open one by one above a long body paragraph that dims behind them. Pass `lines` for the summary, `text` for the body, and `label` to rename the tag. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `DEFAULT_TEXT` | Long body paragraph shown dimmed behind the summary. |
| `label` | `string` | `"TL;DR"` | Tag shown above the summary lines. |
| `lines` | `string[]` | `DEFAULT_LINES` | Summary lines that open one by one on top. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A story beat that admits the full explanation is long and gives the short version first.
- A launch recap where three one-line takeaways should sit above the full backstory.
- A text-heavy scene that needs a clear reading order without cutting the long copy.

## Don't use when
- You only have one short claim and no long body — use `less-more` for a two-line contrast.
- The points should be stepped through and dimmed in sequence — use `what-sticks`.
- You want the long copy to be the hero, filling the page — use `whole-page`.