Release Line

Installation

Usage

import { ReleaseLine } from "@/components/release-line";

<ReleaseLine
  stations={[
    { name: "Commit", note: "0:00" },
    { name: "Build", note: "1:12" },
    { name: "Tests", note: "3:40" },
    { name: "Preview", note: "5:05" },
    { name: "Canary", note: "10% at 7:30" },
    { name: "Live", note: "9:02" },
  ]}
  spur={{ from: 4, name: "Rollback", note: "One click" }}
  releases={[{ id: "a3f9c2e", title: "Fix the invoice total" }]}
/>

The route is drawn from the stops: the first third on the lower level, the middle third on the upper level, and the last third back down, joined by 45 degree bends. Use it on the page for a CI service, a deploy platform, or any product that moves work through stages.

Examples

App store release

A mobile release from merge to the store, with a spur to halt a phased rollout.

Static

With animated={false}, the release is drawn arrived at the last stop.

Behavior

• While the map is on screen, the train rides from stop to stop, easing away from each one and into the next, and waits briefly at each. The line fills in behind it, and every stop it reaches fills with a check.
• At the last stop the terminus bar lights up and the Shipped badge shows. After a hold, the next release in releases sets off from the first stop.
• The train turns to follow the line on the bends, and the stop it waits at pulses.
• With reduced motion enabled, the release is drawn arrived and nothing moves.
• The map is one SVG that scales to its container. It lays out at minWidth or wider (600px by default); in a narrower container it scrolls sideways and takes keyboard focus.
• Screen readers hear every stop with its note, and where the spur leads.

Props