# Shed Weight
URL: https://remocn.dev/docs/typography/shed-weight

One line repeats at growing sizes, each cut redrawn with its own optical weight, with size labels.

- Install: `npx shadcn@latest add @remocn/shed-weight`
- Vibe: tech
- Natural length: 60f @ 30fps

## Installation

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

## Usage

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

const ShedWeightScene = () => <ShedWeight text="Sharp at any size." sizes={5} />;

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

The same line is stacked at a growing size ladder, each row drawing in under a hairline rule with a small point-size label, and every size uses its own optical cut. Pass `text` and `sizes` for the number of rows; `showSizes` toggles the labels. It takes a `theme` prop and ships light and dark.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `text` | `string` | `"Sharp at any size."` | The line repeated down the size ladder. |
| `sizes` | `number` | `6` | How many rows in the ladder, from 2 to 9. |
| `showSizes` | `boolean` | `true` | Show the small point-size label beside each row. |
| `accent` | `string` | — | Spot color for the largest row, its rule and label. |
| `background` | `string` | — | Override the background color; use "transparent" to composite over your own. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark ground; the component ships both. |

## Use when
- A typography-focused beat showing that a typeface holds up from tiny to huge sizes.
- A design-tool or font launch where the size ladder with point labels explains the feature.
- A technical, precise tagline that wants a stacked, specimen-like layout.

## Don't use when
- The point is a weight or width that animates on one word - use `axis-flex`.
- You want a single word to switch typefaces - use `font-cycle`.
- The line should simply be revealed once, with no repetition - use `tracking-in`.