# Figure to Label
URL: https://remocn.dev/docs/numbers/figure-to-label

A halftone-dot figure resolves on a ruled card, then collapses so a label word types out beside it.

- Install: `npx shadcn@latest add @remocn/figure-to-label`
- Vibe: premium
- Natural length: 117f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/figure-to-label
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FigureToLabel } from "@/components/remocn/figure-to-label";

const FigureToLabelScene = () => <FigureToLabel value="$6.4B" word="valuation" eyebrow="Series B" />;

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

A figure built from a halftone dot field pops onto a ruled card, a wave sweeps across and the dots resolve left to right into solid digits. The card then collapses, the figure takes the accent color and the label word types out beside it with a caret, under the Remocn mark. Pass `value`, `word` and an optional `eyebrow`. It ships light and dark through `theme`; `ground` and `groundParams` change the animated background.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"$6.4B"` | The figure shown on the card, such as $6.4B. |
| `word` | `string` | `"valuation"` | Label word typed out beside the figure. |
| `eyebrow` | `string` | `""` | Text beside the mark above the line; hidden when empty. |
| `accent` | `string` | — | Accent color of the figure; defaults to the theme accent. |
| `ink` | `string` | — | Text color; defaults to the theme ink. |
| `background` | `string` | — | Stage background color; overrides the theme ground. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |
| `ground` | `GshPresetId` | — | Preset id for the animated gradient ground. |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the ground gradient parameters. |

## Use when
- A valuation or revenue announcement where the figure should turn into the word that names it.
- A premium beat that goes from a big number to a typed label with a blinking caret.
- A reveal that should end with the Remocn mark and an optional eyebrow above the line.

## Don't use when
- Imagery should scroll behind the number - use `figure-reels`.
- The number should simply count up - use `lumen-count`.
- A caption-led stat on a dark ground is enough - use `compact-stat`.