Canvas 2D + DOM · observability · reliability · workflows

Every run on the scope

Every running job is a blip on a radar scope; one starts failing, and a cursor reaches in and pauses it until its retry.

Drawn in Field · follows any look See the matched set →

A radar scope where each blip is a running job drifting along its course, with a fading trail behind the turning sweep. One job, invoice-sync, starts blinking amber after three failures. An on-call cursor opens its menu and pauses it: the blip stops, its label card flips to Paused, retry at 09:42, and the sweep passes over it calmly. A countdown ring closes, the job resumes on attempt 2 and flies off the scope.

Look Make your own look →

With Claude Code

With the skill installed, paste this in your project.

Use the site-motion skill to make the "radar-sweep" scene for our site, in our brand.
Read our design tokens from this project (or run `site-motion theme <our url>`), write the content JSON with our real product nouns and numbers, then render mp4, webm and a poster. Check the loop seam before you finish.

From the command line

Draft your tokens, then copy the scene into your project. The first scene you add sets your site's look; every scene after it follows.

node bin/site-motion.mjs theme https://yoursite.com --out brand.json
node bin/site-motion.mjs add radar-sweep --tokens brand.json

Your brand, as tokens

The theme playing above, as a token file the CLI and the skill accept.

content.json, the words in this scene

{
  "title": "Every run on the scope",
  "label": "A radar scope where each blip is a running job drifting along its course, with a fading trail behind the turning sweep. One job, invoice-sync, starts blinking amber after three failures. An on-call cursor opens its menu and pauses it: the blip stops, its label card flips to Paused, retry at 09:42, and the sweep passes over it calmly. A countdown ring closes, the job resumes on attempt 2 and flies off the scope.",
  "eyebrow": "Observability",
  "heading": "See every run.\nPause the one\nthat's failing.",
  "sub": "Each blip is a live execution. Pause a failing run mid-flight and it retries on schedule, with its state intact.",
  "operator": "On call",
  "stats": {
    "running": "Running",
    "paused": "Paused"
  },
  "status": {
    "healthy": "All {n} runs healthy",
    "failing": "{id} failing · 3 retries",
    "paused": "{id} paused by {who}",
    "resumed": "{id} resumed · attempt 2"
  },
  "menu": [
    "Pause run",
    "Retry now",
    "Cancel run"
  ],
  "focus": {
    "id": "invoice-sync",
    "step": "step 2 of 4",
    "warn": "3 failures · retrying",
    "paused": "Paused · retry at 09:42",
    "resumed": "Resumed · attempt 2"
  },
  "runs": [
    {
      "id": "nightly-etl",
      "step": "step 3 of 5"
    },
    {
      "id": "sync-orders",
      "step": "batch 41 of 60"
    },
    {
      "id": "embed-docs",
      "step": "step 1 of 3"
    },
    {
      "id": "send-digest",
      "step": "step 2 of 2"
    },
    {
      "id": "resize-images",
      "step": "step 4 of 6"
    },
    {
      "id": "billing-run",
      "step": "step 2 of 7"
    },
    {
      "id": "webhook-fanout",
      "step": "step 1 of 2"
    },
    {
      "id": "reindex-search",
      "step": "step 5 of 8"
    }
  ]
}

Files

default theme

Rendered frame-exact. For your brand, run the command on the left.

MP4 · 1600×900 Poster PNG Preview WebM

embed snippet

<iframe src="/radar-sweep.html" title="Every run on the scope" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>

Related scenes

all scenes

Account health

A health table replays the month: one account slips to at risk, a playbook fires at the low point, and it recovers.

Growth & customers

One trigger, every step

One trigger tips a chain of dominoes; each step lights as the wave reaches it.

Workflows & integrations

Workflow in bloom

An event runs through a workflow graph and each step blooms into generative flowers.

Workflows & integrations