WebGL shader · reliability · infrastructure

Weathering the storm

A storm builds over one region of a status map; traffic reroutes and nothing fails.

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

A live status map of nine regions over a moving sky. A storm with rain and lightning builds over eu-west; that region degrades and its traffic reroutes to eu-central, then the storm clears and the region recovers, with zero failed requests throughout.

With Claude Code

With the skill installed, paste this in your project.

Use the site-motion skill to make the "weather-board" 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 weather-board --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": "Weathering the storm",
  "label": "A live status map of nine regions over a moving sky. A storm with rain and lightning builds over eu-west; that region degrades and its traffic reroutes to eu-central, then the storm clears and the region recovers, with zero failed requests throughout.",
  "eyebrow": "Reliability",
  "heading": "Storms happen.\nYour users never\nnotice.",
  "sub": "Regions fail over on their own, before anyone is paged.",
  "uptime": "99.99%",
  "columns": 3,
  "regions": [
    {
      "id": "us-west",
      "city": "Oregon",
      "p95": 38,
      "load": 0.42
    },
    {
      "id": "us-east",
      "city": "Virginia",
      "p95": 34,
      "load": 0.55
    },
    {
      "id": "sa-east",
      "city": "São Paulo",
      "p95": 52,
      "load": 0.3
    },
    {
      "id": "eu-west",
      "city": "Dublin",
      "p95": 36,
      "load": 0.5
    },
    {
      "id": "eu-central",
      "city": "Frankfurt",
      "p95": 33,
      "load": 0.38
    },
    {
      "id": "me-central",
      "city": "Dubai",
      "p95": 47,
      "load": 0.33
    },
    {
      "id": "ap-south",
      "city": "Mumbai",
      "p95": 49,
      "load": 0.4
    },
    {
      "id": "ap-east",
      "city": "Singapore",
      "p95": 44,
      "load": 0.46
    },
    {
      "id": "ap-north",
      "city": "Tokyo",
      "p95": 41,
      "load": 0.44
    }
  ],
  "storm": {
    "region": "eu-west",
    "reroute": "eu-central",
    "at": 1.6,
    "clear": 8.4,
    "flashes": [
      3.7,
      4.5
    ]
  }
}

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="/weather-board.html" title="Weathering the storm" 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

Deploy liftoff

Each build-log line inflates a hot-air balloon by its share; when the health check passes it lifts off flying an online pennant.

Dev & infrastructurePro

Edge inference

Isometric blocks with live data on their faces rise over a tiled floor.

Dev & infrastructure