# Thin Slab
URL: https://remocn.dev/docs/numbers/thin-slab

A big '1 day' contrasted with a thin progress slab labeled 14x faster than by hand

- Install: `npx shadcn@latest add @remocn/thin-slab`
- Vibe: data
- Natural length: 108f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/thin-slab
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ThinSlab } from "@/components/remocn/thin-slab";

const ThinSlabScene = () => (
  <ThinSlab
    title="Time to your first launch video"
    before={{ value: 14, label: "By hand", unit: "days" }}
    after={{ value: 1, label: "With remocn", unit: "day" }}
  />
);

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

A title and the old value appear above a thick slab, then a dashed ghost of that slab holds its place while the slab squeezes to the new thickness and the number counts across. A callout such as '14x faster' fades in last, followed by a light sheen. Pass `before` and `after` as value, label and unit, and `title`; `callout` is computed unless you set it. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `title` | `string` | `"Time to your first launch video"` | Small heading above the numbers. |
| `before` | `ThinSlabSide` | `DEFAULT_BEFORE` | The starting side: value, label and optional unit. Drawn as the thick slab. |
| `after` | `ThinSlabSide` | `DEFAULT_AFTER` | The ending side: value, label and optional unit. The slab squeezes to this. |
| `callout` | `string` | — | Text shown after the squeeze. Auto-computed from the two values if omitted. |
| `accent` | `string` | `"#3B5BFD"` | Highlight colour used in the slab and callout. |
| `background` | `string` | — | Stage colour; pass 'transparent' to layer over other footage. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |

## Use when
- A time-saved beat that squeezes a thick slab for the old duration down to a thin one for the new duration while the number counts across.
- A launch-video claim like '14x faster' where the shrinking thickness makes the gain physical.
- A scene that must sit over your own footage or gradient, using a transparent background.

## Don't use when
- You want a bar race between several contenders on a shared clock — use `benchmark-race`.
- The two values should be two live stopwatches rather than a shrinking slab — use `timer-duel`.
- You need a single big counted number with no comparison shape — use `compact-stat`.