# Nonstop
URL: https://remocn.dev/docs/typography/nonstop

A labeled counter rolls down from a number to zero and resolves into a big no-stops phrase.

- Install: `npx shadcn@latest add @remocn/nonstop`
- Vibe: clean
- Natural length: 169f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/nonstop
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { Nonstop } from "@/components/remocn/nonstop";

const NonstopScene = () => (
  <Nonstop label="From idea to export" from={3} unit="stops" />
);

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

A label sits above a counter that rolls down from `from` to zero beside `unit`, then the line resolves into the large phrase. Pass `label`, `from` and `unit` to count your own steps. It ships in light and dark through the `theme` prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `label` | `string` | `"From idea to export"` | Small line above the counter. |
| `from` | `number` | `3` | Number the counter starts from. |
| `unit` | `string` | `"stops"` | Unit label next to the counter. |
| `accent` | `string` | — | Accent color override; falls back to the theme accent. |
| `background` | `string` | — | Background color override; falls back to the theme background. |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |
| `theme` | `"dark" \| "light"` | `"dark"` | Ships light and dark; picks the palette. |

## Use when
- A beat about a shorter path, such as steps removed between idea and export.
- A countdown-to-zero joke where fewer stops is the selling point.
- A simple stat reveal that ends on a bold promise.

## Don't use when
- You need a time phrase leading to today — use `on-approach`.
- You want a general number animation — use `number-wheel`.
- You want a numbered rolling stat without a payoff phrase — use `rolling-number`.