# Lumen Count
URL: https://remocn.dev/docs/numbers/lumen-count

A glowing number counts up with a soft floor reflection and a caption beneath it.

- Install: `npx shadcn@latest add @remocn/lumen-count`
- Vibe: premium
- Natural length: 86f @ 30fps

## Installation

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

## Usage

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

const LumenCountScene = () => <LumenCount value={200} suffix="+" label="components for your launch video" />;

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

A big number counts up on a dark stage while its fill brightens from dim to a glowing gradient, flares once on arrival and casts a soft reflection on the floor; the caption fades in underneath. Pass `value` and `label`, plus optional `suffix` and `eyebrow`. It ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `number` | `200` | The number the count lands on. |
| `from` | `number` | `1` | Starting number; the count climbs on a log curve from here. |
| `suffix` | `string` | `""` | Text appended to the number, such as a plus sign. |
| `label` | `string` | `"components, ready to light up your launch video"` | Caption under the number. |
| `eyebrow` | `string` | `""` | Small line above the number; hidden when empty. |
| `accent` | `string` | `"#3B5BFD"` | Base color of the glow gradient. |
| `speed` | `number` | `1` | Playback speed multiplier. |
| `theme` | `"dark" \| "light"` | `"dark"` | Light or dark palette. |

## Use when
- A hero beat where one big metric, such as a component or user count, should glow on a dark stage.
- A count that grows by orders of magnitude, since it climbs on a log curve from a small start.
- A one-number beat that wants a soft floor reflection and a single caption line underneath.

## Don't use when
- The number should land with a hard, punchy cut instead of a smooth glow - use `smash-count`.
- You want a chrome, studio-lit look on a figure with a plus sign - use `studio-reflection`.
- Several stats need to count in one beat - use `stat-sequence`.