# Thread Weave
URL: https://remocn.dev/docs/numbers/thread-weave

A figure or mark is woven row by row on a loom of cream cells, then a caption settles.

- Install: `npx shadcn@latest add @remocn/thread-weave`
- Vibe: paper
- Natural length: 97f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/thread-weave
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { ThreadWeave } from "@/components/remocn/thread-weave";

const ThreadWeaveScene = () => (
  <ThreadWeave value="24" caption="frames per second" />
);

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

Warp threads set up the loom, then every row of the pattern is woven across in alternating directions until the figure appears in blue and orange cells. A caption settles under it. Pass `value` and `caption`, or set `motif` to `mark` to weave the Remocn mark; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"24"` | Short figure to weave, as text. |
| `motif` | `"value" \| "mark"` | `"value"` | Weave the value as text or the Remocn mark. |
| `caption` | `string` | `"frames per second"` | Small line that settles under the cloth. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |

## Use when
- A craft-flavoured beat where a figure should look built row by row.
- A brand mark reveal, using `motif` set to mark.
- A soft, paper-like stat with a short caption.

## Don't use when
- You want a clean digital stat — use `compact-stat`.
- You want a figure made of loose pixels — use `number-mosaic`.
- You want a hand-drawn counting feel — use `tally-marks`.