SVG · infrastructure · platform

Edge inference

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

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

An isometric floor of coloured tiles with four green blocks rising from it. The blocks show a deploy log, live request volume with a chart, healthy workers and cold-start latency.

With Claude Code

With the skill installed, paste this in your project.

Use the site-motion skill to make the "iso-blocks" 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 iso-blocks --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": "Edge inference",
  "label": "An isometric floor of coloured tiles with four green blocks rising from it. The blocks show a deploy log, live request volume with a chart, healthy workers and cold-start latency.",
  "seed": 7,
  "lanes": [
    2,
    9,
    13
  ],
  "blocks": [
    {
      "kind": "log",
      "at": [
        238,
        512
      ],
      "size": [
        90,
        330,
        170
      ],
      "lines": [
        {
          "time": "09:41",
          "text": "WEIGHTS PULLED"
        },
        {
          "time": "09:41",
          "text": "WARM POOL READY"
        },
        {
          "time": "09:42",
          "text": "ROUTING TRAFFIC"
        },
        {
          "time": "09:42",
          "text": "P99 WITHIN SLO ✓"
        }
      ]
    },
    {
      "kind": "replicas",
      "at": [
        400,
        -70
      ],
      "size": [
        100,
        280,
        150
      ],
      "label": "WORKERS",
      "total": 4,
      "running": 3,
      "state": "HEALTHY"
    },
    {
      "kind": "metric",
      "at": [
        654,
        201
      ],
      "size": [
        90,
        280,
        140
      ],
      "label": "COLD START",
      "sub": "P95",
      "value": 240,
      "unit": "ms",
      "series": [
        9,
        8,
        8.5,
        7,
        6.8,
        5.2,
        5.6,
        4.1,
        3.8,
        3.1,
        2.4,
        2.6,
        1.9
      ]
    },
    {
      "kind": "hero",
      "at": [
        605,
        510
      ],
      "size": [
        110,
        300,
        330
      ],
      "title": "Edge\nInference",
      "status": "LIVE",
      "label": "PRODUCTION",
      "sub": "cluster-eu-02",
      "value": 42600,
      "from": 18000,
      "format": "k",
      "unit": "requests / min",
      "series": [
        2,
        3,
        2.6,
        4,
        3.6,
        5.2,
        4.8,
        6.4,
        6.1,
        7.8,
        7.2,
        9,
        8.7,
        10.4
      ]
    }
  ]
}

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="/iso-blocks.html" title="Edge inference" style="width:100%;aspect-ratio:16/9;border:0" loading="lazy"></iframe>

Related scenes

all scenes

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

The stack, in 2.5D

Real HTML layers lift apart in 2.5D while a request drops through the stack.

Dev & infrastructure

Branch your database like a cell

A database cell called main buds two branch cells; one is changed and fuses back, the other dissolves, and main carries the change.

Dev & infrastructure