# Fuchidori Count
URL: https://remocn.dev/docs/numbers/fuchidori-count

A sticker-style counter whose digits gain stacked red outline borders, landing on 4,096

- Install: `npx shadcn@latest add @remocn/fuchidori-count`
- Vibe: playful
- Natural length: 76f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/fuchidori-count
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { FuchidoriCount } from "@/components/remocn/fuchidori-count";

const FuchidoriCountScene = () => <FuchidoriCount value={4096} from={1} label="captions styled without opening an editor" maxBorders={4} />;

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

A large number rises into place and counts from `from` to `value` on a log-like curve. Each time it crosses a power of ten a new outline ring springs out around the glyphs, up to `maxBorders` rings, alternating through the border colours. A vertical caption fades in beside it. Pass `value`, `from`, `label`, `maxBorders` and optionally `colors`. It ships light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `4096` | The final number the count lands on. |
| `from` | `number` | `1` | The number the count starts from, at least 1. |
| `prefix` | `string` | `""` | Text placed before the number, such as a currency sign. |
| `suffix` | `string` | `""` | Text placed after the number, such as a unit. |
| `label` | `string` | `"captions styled without opening an editor"` | Vertical caption beside the number. |
| `maxBorders` | `number` | `4` | Most outline rings drawn, one per power of ten crossed. |
| `colors` | `string[]` | — | Ring colours, used in order and repeated. Defaults to accent and the ink colour. |
| `accent` | `string` | — | Colour of the first ring and the caption text. |
| `background` | `string` | — | Stage colour; pass 'transparent' to layer over other footage. |
| `speed` | `number` | `1` | Playback speed multiplier; 1 is the designed pace. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark. |

## Use when
- A sticker-style stat beat where a number counts up and gains a stacked outline border each time it passes a power of ten.
- A Japanese-caption-inspired figure such as 4,096 with a vertical caption, for a playful social or creator launch.
- A stat scene that should feel layered and graphic, with custom border colours to match a brand.

## Don't use when
- You want a plain figure with no outline effect — use `compact-stat`.
- You want the count to land with a camera flash — use `flash-count`.
- You want digits whose weight and colour change while they churn — use `churn-count`.