Status Page

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

Installation

$ pnpm dlx 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.

Props10

Prop	Type	Default
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	number2026 Year used in the incident date labels
accent	string"#3B5BFD" Accent color for highlights, buttons and progress
speed	number1 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

brandstring
Service name in the page header
Default"remocn"
urlstring
Status page address shown in the header
Default"status.remocn.dev"
componentsStatusComponent[]
Services with an uptime figure and a list of incidents
DefaultDEFAULT_COMPONENTS
hover{ component: number; day: number }
Component index and day index of the first hovered bar
yearnumber
Year used in the incident date labels
Default2026
accentstring
Accent color for highlights, buttons and progress
Default"#3B5BFD"
speednumber
Playback speed multiplier for the whole timeline
Default1
theme"light" | "dark"
Light or dark palette
Default"light"
groundGshPresetId
gradients.sh preset id for the backdrop shader
groundParamsPartial<GradientParams>
Overrides for the backdrop shader parameters