# Dumbbell Shift
URL: https://remocn.dev/docs/numbers/dumbbell-shift

Dumbbell rows slide their before and after dots apart, with a +16 summary

- Install: `npx shadcn@latest add @remocn/dumbbell-shift`
- Vibe: data
- Natural length: 140f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/dumbbell-shift
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { DumbbellShift } from "@/components/remocn/dumbbell-shift";

const DumbbellShiftScene = () => (
  <DumbbellShift
    beforeLabel="Before"
    afterLabel="With remocn"
    rows={[
      { label: "Launch videos", before: 2, after: 9 },
      { label: "Changelogs", before: 4, after: 7 },
      { label: "Social clips", before: 3, after: 19 },
    ]}
  />
);

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

Rows enter with a before dot and an after dot, the dots slide apart row by row, then the rows sort and the biggest gain is lit with a summary caption. Pass `rows` (label, before, after), plus `beforeLabel`, `afterLabel` and an optional `summaryCaption`. Ships dark and light via `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `rows` | `DumbbellRow[]` | `DEFAULT_ROWS` | Categories, each with a before and after value. |
| `beforeLabel` | `string` | `"Before"` | Legend text for the before dot. |
| `afterLabel` | `string` | `"With remocn"` | Legend text for the after dot. |
| `summaryCaption` | `string` | — | Line under the summary; defaults to the winning row name. |
| `max` | `number` | — | Axis maximum; defaults to a rounded value above the data. |
| `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 before-and-after beat across several categories, where each row's dots slide apart.
- A launch recap showing improvement per workflow, ending on the biggest gain, such as +16.
- A comparison where per-row change matters more than an overall total.

## Don't use when
- You have only two time points and want slanted lines — use `slope-chart`.
- You want a whole population of dots — use `beeswarm`.
- You want a single saved-time bar — use `time-breakdown`.