CSS 3D · architecture · infrastructure

The stack, in 2.5D

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

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

Four layers of an application stack drawn as solid isometric boxes in CSS 3D. They lift apart, a request token drops through them lighting each layer in turn, and they settle back together.

With Claude Code

With the skill installed, paste this in your project.

Use the site-motion skill to make the "css3d-stack" 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 css3d-stack --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": "The stack, in 2.5D",
  "label": "Four layers of an application stack drawn as solid isometric boxes in CSS 3D. They lift apart, a request token drops through them lighting each layer in turn, and they settle back together.",
  "eyebrow": "Architecture",
  "heading": "One request,\nfour layers,\nunder 40 ms.",
  "sub": "Real HTML in true CSS 3D: crisp text, no WebGL.",
  "request": "GET /orders",
  "layers": [
    {
      "title": "Edge",
      "tag": "3 ms",
      "sub": "TLS, cache, routing",
      "chips": [
        "cdn",
        "waf"
      ]
    },
    {
      "title": "API",
      "tag": "8 ms",
      "sub": "Auth and rate limits",
      "chips": [
        "rest",
        "graphql"
      ]
    },
    {
      "title": "Workers",
      "tag": "19 ms",
      "sub": "Business logic",
      "chips": [
        "queue",
        "cron"
      ]
    },
    {
      "title": "Database",
      "tag": "6 ms",
      "sub": "Postgres, replicated",
      "chips": [
        "primary",
        "2 replicas"
      ]
    }
  ]
}

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="/css3d-stack.html" title="The stack, in 2.5D" 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

Edge inference

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

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