# Res Climb
URL: https://remocn.dev/docs/numbers/res-climb

A number resolves from coarse blocks through sharper resolutions into a crisp glowing figure with a caption.

- Install: `npx shadcn@latest add @remocn/res-climb`
- Vibe: premium
- Natural length: 70f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/res-climb
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ResClimb } from "@/components/remocn/res-climb";

const ResClimbScene = () => <ResClimb value="200+" eyebrow="Component registry" label="components, ready to drop in" />;

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

A big number first appears as a coarse block grid, then re-renders through a few sharper resolutions in quick snaps until it lands crisp in a blue gradient. A small eyebrow sits above and a caption fades in below. Pass `value` as a string such as "200+", plus `label` and `eyebrow`; `steps` sets the grid resolutions. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"200+"` | The figure to resolve, as a string such as 200+. |
| `label` | `string` | `"components, ready to drop in"` | Caption under the figure. |
| `eyebrow` | `string` | `"remocn registry"` | Small line above the figure. |
| `steps` | `number[]` | `[7, 14, 28]` | Pixel-grid rows per cap height for each coarse stage; up to 4. |
| `accent` | `string` | `"#3B5BFD"` | Main color of the figure gradient. |
| `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 beat about quality, scale or fidelity where the number should literally sharpen into focus.
- A count-free stat such as 200+ that should arrive as a staged resolution upgrade.
- A hero figure with a small eyebrow above and a caption below, glowing on a dark ground.

## Don't use when
- You need the digits to roll from a lower value to a higher one - use `packed-count`.
- The figure should resolve out of a line pattern instead of pixels - use `moire-reveal`.
- You want a painted, tile-by-tile pixel reveal - use `raster-paint`.