Isometric Cloud Architecture

About this style

Isometric drawings became a common style for cloud architecture diagrams in the 2010s, as infrastructure companies and their customers began drawing services as small blocks on a tilted grid instead of flat boxes joined by arrows. The projection keeps every edge parallel, so a diagram can show depth and grouping without perspective distortion, and blocks can stack to show instances or layers. In promos the format turns an abstract system into a small city the viewer can read: traffic enters at one side, passes through compute and lands in storage. Motion adds what a static diagram cannot show, such as the direction of requests, the load on each tier and capacity that grows when it is needed.

Make a 10-second isometric cloud architecture explainer: on a tilted ground plate an app's services drop in and stack up as blocks (load balancer, web, API, cache, queue, workers, databases and storage), their links draw and pulse with traffic, then a traffic spike makes the workers autoscale from four to six.

<inputs>
If I don't give you something, use the default and don't ask.
- Product: Stackyard (fictional), a platform that deploys an app's whole architecture from one file. Wordmark "stackyard" beside an original mark: three flat isometric rhombi stacked with small gaps, 26px tall.
- Headline: "Your whole stack, from one file."
- Config card, file "stackyard.toml", exactly:
  [web]      instances = 3
  [api]      instances = 2
  [workers]  min = 4  max = 12
  [db]       replicas = 1
  [storage]  bucket = "uploads"
- Services and callout metrics: Load balancer · 18.4k req/min; web · 3 instances · 41% CPU; api · 2 instances · p95 120 ms; cache · hit rate 94%; queue · depth 12; workers · 4 instances · 58% busy; db primary · 310 writes/s; db replica · lag 40 ms; object storage · 2.1 TB · 18M objects.
- The spike: the load balancer goes 18.4k → 41.2k req/min and back; queue depth 12 → 1,240 → 0; workers read "4 instances · 100% busy", then "6 instances · 87% busy" after scaling, then "6 instances · 39% busy" once traffic is back to normal (58% of the load on 4 instances is 39% on 6).
- Event line: "10:42:31 · workers scaled 4 → 6 · queue drained in 54 s".
- Length: 10 seconds.
</inputs>

<direction>
- Look: a crisp isometric illustration in warm sandstone, like a well-made architecture diagram printed on heavy paper and set into motion: solid flat-shaded blocks with three tones per color, thin ink links on the ground, labels outside the plate on fine leader lines. Blocks land bouncy and toylike; once traffic flows, everything is steady and legible.
- Palette: background #EFE6DA; ground plate top #E3D8C8, its left side #CDBFAA and right side #BBAA92; plate grid lines #D5C8B5 every unit; ink #283037 for links, leaders, traffic and text; muted #6F6A62. Block colors as top / left / right faces: coral (load balancer and web) #F6A78C / #EF7D5B / #C9603F; teal (api, cache, workers) #6FC1B6 / #3A9A8F / #2B7469; mustard (databases) #F0CD74 / #E2B13F / #B98C25; slate (queue and storage) #8C9AAA / #5E6E80 / #465363. Every face has a 1px edge line in its right-face color for crispness. Ground shadows are #000000 at 10%. The config highlight is #F0CD74 at 35%.
- Type: Outfit 600 for the headline (52px), the wordmark (26px) and callout names (20px); Outfit 400 18px for the event line; Overpass Mono 500 for callout metrics (14px) and the config file (16px on a 26px line), with tabular figures.
- Projection: 2:1 isometric with u = 48px: screen x = 816 + (gx − gy) × 48 and screen y = 298 + (gx + gy) × 24 − gz × 48, for grid coordinates gx (0–16) and gy (0–10) and height gz. The plate's top corners land at (816, 298), (1584, 682), (1104, 922) and (336, 538); the plate is 0.4 units thick.
- Services (gx, gy, width along gx, depth along gy; slabs; color). Slabs are 0.45 units tall unless noted, separated by 0.06-unit gaps so each instance reads as its own layer:
  Load balancer (1, 4, 2, 2; 1 slab; coral)
  web (4.5, 3.5, 2, 3; 3 slabs; coral)
  api (8, 1.5, 2, 2.5; 2 slabs; teal)
  cache (8, 6.5, 2, 1.5; 1 slab 0.35 tall; teal)
  db primary (11.5, 0.5, 2, 2; 2 slabs; mustard)
  db replica (14, 0.5, 1.5, 2; 2 slabs; mustard)
  queue (11.5, 4.5, 2, 1.5; 1 slab 0.35 tall; slate)
  workers (11.5, 7, 2, 2; 4 slabs, later 6; teal)
  object storage (14, 4.5, 1.5, 4; 1 slab 0.8 tall; slate, with three shallow grooves across its top)
  Draw blocks back to front by gx + gy, and slabs bottom to top within a stack.
- Links, at ground level as 2px ink orthogonal paths along the grid with 0.3-unit rounded corners, leaving from the middle of the source's facing side and entering the middle of the target's: Internet → Load balancer (entering from the plate's left edge at gy 5); Load balancer → web; web → api; api → cache; api → db primary; db primary → db replica; api → queue; queue → workers; workers → object storage. Parallel runs sit 0.3 units apart; no link crosses another or passes under a block.
- Traffic: once a link is drawn, small ink diamonds (6px isometric rhombi lying on the ground) travel along it from source to target at 3 grid units per second, spaced by a seeded rhythm; each link's density follows its load (Internet → Load balancer and Load balancer → web densest, db primary → db replica sparsest), never more than 6 on one link. During the spike, the request path and queue → workers double their density.
- Landing: each slab falls from 4 units above its resting height (easeInQuad, 0.28 s), squashes on contact (92% height, 104% footprint for 0.08 s) and settles with a small damped spring (0.2 s); a soft ground shadow under the stack grows as it falls. Nothing tilts or rotates.
- Callouts: name and metric on two lines, with a 1px ink leader ending in a 4px dot on the block's top face, drawn as one horizontal segment and one segment at the isometric angle. Left callouts, right-aligned at x 300: Load balancer (name baseline y 400), web (y 310), cache (y 760) and workers (y 880). Right callouts, left-aligned at x 1620: api (y 360), db primary (y 470), db replica (y 580), queue (y 690) and object storage (y 800). Adjust a callout's height by up to 40px if its leader would cross a block or another leader.
- Header: the wordmark at x 120, baseline y 84; the headline at x 120, baseline y 170; the event line later at x 120, baseline y 232. Config card at x 1380–1800, y 70–270 (#FBF7F1, 1px #D5C8B5 border, radius 12): a file tab "stackyard.toml" at the top and the five lines from baseline y 136.
- Premium: true parallel isometric geometry, three honest tones per block, instances you can count, tidy right-angled links, traffic you can follow, numbers that agree between the config, the callouts and the event. Cheap: glossy 3D clip-art servers, cloud icons, glowing cables, perspective distortion, random spinning, a cluttered tangle of lines, gradients on every face.
- Banned: real company names, logos and UI copied from existing products, including real cloud providers' architecture icons and service names; perspective; gradients and glow; drop shadows on text; anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.7s: the plate draws: its top outline traces from the back corner both ways (0.4 s), fills, the grid lines sweep in along gx (0.3 s) and its sides drop to full thickness (0.2 s).
- 0.4–1.4s: the wordmark fades in at 0.4 s; the headline rises 20px and fades in (easeOutQuart 0.6 s); the config card fades in at 0.9 s and its lines type at 80 characters per second.
- 0.8–3.9s: slabs land: Load balancer 0.8 s; web 1.05, 1.2, 1.35; api 1.6, 1.75; cache 1.95; db primary 2.15, 2.3; db replica 2.5, 2.65; queue 2.85; workers 3.05, 3.15, 3.25, 3.35; object storage 3.55. Each callout appears 0.15 s after its stack settles: the leader draws outward from the block (0.2 s), then the text fades in.
- 3.9–4.9s: the links draw from source to target in flow order, 0.11 s apart, 0.3 s each (stroke-dashoffset, easeInOutCubic).
- 4.6s on: traffic flows on every drawn link.
- 6.0s: the poster: the plate with all nine services stacked (workers at four), every callout, every link with traffic, the headline and the config card.
- 6.3–6.9s: the spike: the request path doubles its density; the load balancer's metric rolls to 41.2k req/min; a 6px ink bar on the queue's top face fills along its length in proportion to depth while its callout counts 12 → 1,240; the workers read "4 instances · 100% busy"; the config's [workers] line gets the highlight band.
- 6.9–7.4s: two new worker slabs drop onto the stack at 6.9 and 7.15 s with the same landing; the callout reads "6 instances · 87% busy".
- 7.3–8.3s: the queue drains to 0 (the bar shrinks and the count falls, easeInOutSine); the load balancer rolls back to 18.4k req/min at 8.0 s and densities return to normal; the workers read "6 instances · 39% busy" at 8.3 s; the config highlight fades.
- 8.3–8.6s: the event line fades in, muted, with "4 → 6" in ink.
- 8.6–10.0s: hold; traffic keeps flowing at normal density.
For other lengths, stretch the gap between the stack-up and the spike; keep the landing physics and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every face, link and icon is drawn in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG (the traffic rhythm). Each slab's height above its rest, each diamond's position along its link and every counter are pure functions of t from the schedule above. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: one inline <svg> with viewBox "0 0 1920 1080". Compute every face polygon from the projection function each seek, in back-to-front order; links are paths built from grid points, measured once at load with getTotalLength and sampled with getPointAtLength for the diamonds; seek sets points, d, transforms, stroke-dashoffset, opacity and text directly.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that every edge runs at exactly the 2:1 isometric angle, no block overlaps another or draws in the wrong order, each slab is a separate layer you can count (web 3, api 2, workers 4 then 6), links meet blocks at their side midpoints and never cross, no leader crosses a block or another leader, diamonds move along the links in the right direction, the numbers in the callouts, the config and the event line agree, the 6.0 s frame matches the poster description, nothing flashes, and the final frame shows six worker slabs, the drained queue, normal traffic and the event line. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Dark UI Precision Glow

Made by us

A dark-mode work tool drawn in hairlines and quiet radial glows: issue rows populate, ⌘K opens a command menu, a comman…

Bento Grid Feature Reveal

Made by us

Rounded tiles spring into a bento grid on warm paper, each acting out one feature in a small animation, then the tiles…