# Time Breakdown
URL: https://remocn.dev/docs/numbers/time-breakdown

A segmented time bar shrinks while 56% less time per video counts up

- Install: `npx shadcn@latest add @remocn/time-breakdown`
- Vibe: data
- Natural length: 138f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/time-breakdown
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { TimeBreakdown } from "@/components/remocn/time-breakdown";

const TimeBreakdownScene = () => (
  <TimeBreakdown
    title="Where the time goes"
    caption="less time per video"
    before={[
      { label: "Editing", value: 62 },
      { label: "Rendering", value: 24 },
      { label: "Export", value: 14 },
    ]}
    after={[
      { label: "Editing", value: 6 },
      { label: "Rendering", value: 24 },
      { label: "Export", value: 14 },
    ]}
  />
);

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

A segmented bar splits into time blocks, then the slow segment collapses and the bar shrinks while the saved percentage counts up with its caption. Pass `before` and `after` as lists of segments (label and value), and set `title`, `beforeLabel`, `afterLabel` and `caption`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `before` | `TimeSegment[]` | `DEFAULT_BEFORE` | Segments of the original timeline, each with a label and value. |
| `after` | `TimeSegment[]` | `DEFAULT_AFTER` | Segments after the change; same labels, smaller values. |
| `title` | `string` | `"Where the time goes"` | Small heading over the bar. |
| `beforeLabel` | `string` | `"Before"` | Label on the original bar. |
| `afterLabel` | `string` | `"With remocn"` | Label on the shortened bar. |
| `caption` | `string` | `"less time per video"` | Line under the saved percentage. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for the hero element. |
| `theme` | `"dark" \| "light"` | `"dark"` | Dark or light palette. |
| `speed` | `number` | `1` | Playback multiplier. |

## Use when
- A time-saved claim where the segments of a workflow, such as editing, rendering and export, visibly shrink.
- A beat that shows exactly which step you removed, not just the total saving.
- A before-and-after scene that ends on a percent, such as 56% less time per video.

## Don't use when
- You have a single bar and a single percentage — use `cut-stat`.
- You want the comparison framed as a race — use `benchmark-race`.
- You want each row's before and after as dots — use `dumbbell-shift`.