Uptime Strip

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

Installation

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

Props7

Prop	Type	Default
value	string"99.99%" Uptime figure shown as text.
days	number90 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	number1 Playback speed multiplier for the whole timeline.

valuestring
Uptime figure shown as text.
Default"99.99%"
daysnumber
Number of ticks in the strip, one per day.
Default90
incidentsnumber[]
Zero-based tick positions drawn as incident days.
Default[27, 63]
labelstring
Italic word shown after the figure.
Default"uptime"
accentstring
Accent color for highlights and small marks.
Default"#3B5BFD"
theme"dark" | "light"
Color theme, "dark" or "light".
Default"dark"
speednumber
Playback speed multiplier for the whole timeline.
Default1