# Shape Pack
URL: https://remocn.dev/docs/numbers/shape-pack

Colored tiles drop in and pack into a poster grid, then one block locks in a stat with a label.

- Install: `npx shadcn@latest add @remocn/shape-pack`
- Vibe: premium
- Natural length: 103f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/shape-pack
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ShapePack } from "@/components/remocn/shape-pack";

const ShapePackScene = () => (
  <ShapePack value={3.2} decimals={1} suffix="×" label="faster renders" />
);

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

Blocks fall one after another and pack into a twelve by eight grid, leaving a slot that the last block fills. That block counts up to `value` with its suffix and label. Pass `value`, `suffix`, `label` and optionally your own `logo` node; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `3.2` | Final number the locking block counts up to. |
| `decimals` | `number` | `1` | Decimal places shown while counting. |
| `suffix` | `string` | `"×"` | Text drawn after the number. |
| `label` | `string` | `"faster renders"` | Caption inside the locking block. |
| `logo` | `React.ReactNode` | — | React node shown in the poster instead of the default Remocn logo. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A poster-style stat beat with a collage look.
- A multiplier result with the brand logo in the locking tile.
- A playful intro where blocks fall into place before the number counts up.

## Don't use when
- You want a clean headline number — use `compact-stat`.
- You want a gradient number snapped onto a grid with a headline — use `grid-snap-poster`.
- You want to break a total into categories — use `number-split`.