# Status Page
URL: https://remocn.dev/docs/product-scenes/status-page

A status page builds 90-day uptime strips, resolves its banner, then a cursor hovers two incident bars.

- Install: `npx shadcn@latest add @remocn/status-page`
- Vibe: clean
- Natural length: 220f @ 30fps

## Installation

```bash
npx shadcn@latest add @remocn/status-page
```

## Usage

```tsx
// src/Root.tsx
import { Composition } from "remotion";
import { StatusPage } from "@/components/remocn/status-page";

const StatusPageScene = () => (
  <StatusPage brand="Acme" url="status.acme.dev" year={2026} />
);

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

A status card builds a row of 90-day uptime bars per service, and the banner flips from an active incident to a resolved check. The cursor then arcs in to hover one incident bar, slides to a second to show its tooltip, and leaves. Pass `brand`, `url` and `components` (each with `uptime` and `incidents`) to describe your services; `hover` pins the first bar. Ships light and dark.

The ground is a live gradients.sh shader (`GshGround`), installed with the component as `@remocn/gsh`. Pick another look with the `ground` preset prop.

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `brand` | `string` | `"remocn"` | Service name in the page header |
| `url` | `string` | `"status.remocn.dev"` | Status page address shown in the header |
| `components` | `StatusComponent[]` | `DEFAULT_COMPONENTS` | Services with an uptime figure and a list of incidents |
| `hover` | `{ component: number; day: number }` | — | Component index and day index of the first hovered bar |
| `year` | `number` | `2026` | Year used in the incident date labels |
| `accent` | `string` | `"#3B5BFD"` | Accent color for highlights, buttons and progress |
| `speed` | `number` | `1` | Playback speed multiplier for the whole timeline |
| `theme` | `"light" \| "dark"` | `"light"` | Light or dark palette |
| `ground` | `GshPresetId` | — | gradients.sh preset id for the backdrop shader |
| `groundParams` | `Partial<GradientParams>` | — | Overrides for the backdrop shader parameters |

## Use when
- A reliability or infrastructure launch beat that needs to show transparent uptime history.
- A trust-and-security scene where two incidents are inspected and the banner flips to resolved.
- A product-update video for a hosted service where the status page itself is the proof point.

## Don't use when
- You want live, ticking metrics and an activity feed — use `live-dashboard`.
- The story is a deploy going live, not an incident history — use `deploy-pipeline`.
- You need a rollout with guardrail charts and a toggle — use `feature-flag-rollout`.