# Uptime Strip
URL: https://remocn.dev/docs/numbers/uptime-strip

A strip of ticks fills in green with a few incident bars, then an uptime figure types out beside an italic word.

- Install: `npx shadcn@latest add @remocn/uptime-strip`
- Vibe: data
- Natural length: 103f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/uptime-strip
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { UptimeStrip } from "@/components/remocn/uptime-strip";

const UptimeStripScene = () => (
  <UptimeStrip value="99.99%" days={90} incidents={[27, 63]} label="uptime" />
);

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

A sweep fills the strip tick by tick, with the days named in `incidents` standing out as outages, then the ticks settle into the final strip. The uptime figure rises in letter by letter beside an italic label word. Pass `value`, `days`, `incidents` and `label`; it ships light and dark through `theme`.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `value` | `string` | `"99.99%"` | Uptime figure shown as text. |
| `days` | `number` | `90` | Number of ticks in the strip, one per day. |
| `incidents` | `number[]` | `[27, 63]` | Zero-based tick positions drawn as incident days. |
| `label` | `string` | `"uptime"` | Italic word shown after the figure. |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights and small marks. |
| `theme` | `"dark" \| "light"` | `"dark"` | Color theme, "dark" or "light". |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline. |

## Use when
- A reliability beat for an API, hosting or infrastructure product.
- A status-page style proof with days of history.
- A trust moment where an uptime figure follows a visible record.

## Don't use when
- You show a metric climbing over time — use `sparkline-thread`.
- You show activity over a calendar — use `contribution-heatmap`.
- You only need the number — use `compact-stat`.