# Magnitude Push
URL: https://remocn.dev/docs/numbers/magnitude-push

A figure grows digit by digit, each push zooming the camera out, then a caption lands beneath.

- Install: `npx shadcn@latest add @remocn/magnitude-push`
- Vibe: premium
- Natural length: 114f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/magnitude-push
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { MagnitudePush } from "@/components/remocn/magnitude-push";

const MagnitudePushScene = () => (
  <MagnitudePush value="1000" suffix="×" label="fewer keyframes to set by hand" />
);

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

The first digit rises alone, then every further digit pushes in with a spring while the camera pulls back to keep the whole figure in frame. A caption settles last. Pass `value`, `suffix` and `label`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"1000"` | Figure as a string; each character after the first pushes in. |
| `suffix` | `string` | `"×"` | Text drawn after the figure, such as a multiplier sign. |
| `label` | `string` | `"fewer keyframes to set by hand"` | Caption that rises in word by word under the figure. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `background` | `string` | — | Background color override. Pass "transparent" to composite over other layers. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |

## Use when
- A scale claim like 1000x or 10,000 where the number of digits is the point.
- A hero stat that should feel like it keeps growing past the frame.
- A before-and-after beat where one big multiplier answers a pain point named in the label.

## Don't use when
- The number is a plain count that should tick up smoothly — use `tall-count`.
- You want the number to appear in one piece — use `compact-stat`.
- The result is a small decimal multiplier — use `lean-count`.