# Slim Count
URL: https://remocn.dev/docs/numbers/slim-count

A slim outlined numeral counts down as a wavy fill drains out of it, beside a condensed caption.

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

## Installation

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

## Usage

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

const SlimCountScene = () => <SlimCount value={0} from={100} label="Keyframes left to set by hand" />;

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

A tall condensed numeral counts from `from` down to `value` while a wavy fill drains out of its outline like a tank; a bold caption rises in word by word beside it at the start. Pass `value`, `from` and `label`, with `prefix`, `suffix` or `decimals` if needed; `accent` colors the fill. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `0` | The number the count lands on. |
| `from` | `number` | `100` | Starting number; the fill starts full here. |
| `decimals` | `number` | `0` | Decimal places shown. |
| `prefix` | `string` | `""` | Text before the number. |
| `suffix` | `string` | `""` | Text after the number. |
| `label` | `string` | `"Keyframes left to set by hand"` | Caption that rises in word by word. |
| `accent` | `string` | — | Color of the fill; defaults to the theme ink. |
| `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 countdown of work removed, such as keyframes or hours left to do by hand, ending on zero.
- A playful beat where the number should feel like a tank draining.
- A tall, condensed headline-style number with a bold caption set beside it.

## Don't use when
- The count rises to a big achievement figure - use `tall-count`.
- You want a literal timer ticking to zero - use `shot-clock`.
- The number should hard-cut rather than drain smoothly - use `smash-count`.