# Weight Cut
URL: https://remocn.dev/docs/numbers/weight-cut

A heavy figure counts down to a small value as its strokes thin to a light weight.

- Install: `npx shadcn@latest add @remocn/weight-cut`
- Vibe: data
- Natural length: 82f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/weight-cut
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { WeightCut } from "@/components/remocn/weight-cut";

const WeightCutScene = () => <WeightCut value={6.8} from={94} suffix="KB" eyebrow="Per scene, gzipped" label="Lighter than your logo file." />;

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

A heavy figure counts down from `from` to `value` while its stroke weight thins from bold to light, and a small unit suffix sits beside it. An eyebrow and a caption stack in a column next to the figure. Pass `value`, `from`, `suffix`, `eyebrow` and `label`; `lightWeight` sets the final stroke weight and `accent` colors the suffix. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `6.8` | The number the count lands on. |
| `from` | `number` | `94` | Starting number; the figure is heaviest here. |
| `decimals` | `number` | `1` | Decimal places shown. |
| `prefix` | `string` | `""` | Text before the number. |
| `suffix` | `string` | `"KB"` | Small unit text beside the figure. |
| `eyebrow` | `string` | `"Per scene, gzipped"` | Small line above the caption. |
| `label` | `string` | `"Lighter than your logo file."` | Caption in the side column. |
| `lightWeight` | `number` | `100` | Final stroke weight, snapped to 100 through 500. |
| `accent` | `string` | — | Color of the suffix; defaults to the theme accent. |
| `background` | `string` | — | Stage background color; overrides the theme ground. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A size or weight stat, such as kilobytes saved, where the type itself should get lighter as the number shrinks.
- A data beat with a small unit suffix beside the figure and an eyebrow plus caption in a column.
- A before-and-after reduction that deserves a typographic metaphor.

## Don't use when
- The number should grow rather than shrink - use `lean-count`.
- You want a draining tank effect for a countdown - use `slim-count`.
- A tall, condensed gradient figure suits the brand better - use `tall-count`.