• 2.5D scenes for explainers, product UI, or "how it works" infographics.
• Stacked layers / floors / a tech-stack tower that builds bottom-up.
• Extruded blocks, isometric grids, isometric city/server-rack scenes.
• Exploded-view diagrams that pull apart along Z and reassemble.
• A static iso illustration that needs gentle life: camera drift, parallax, hover lift.

• True isometric — all three axes 120° apart; on screen the X/Y ground axes run at ±30° from horizontal. This is the math-correct iso. Use for CSS/Three.js.
• 2:1 dimetric ("pixel-art iso") — tiles drawn 2 wide : 1 tall, so axes sit at ~26.57° (

  atan(0.5)

  ). Cleaner pixels, the game-art default. Use for tile/sprite scenes.

perspective: none

.scene { transform-style: preserve-3d; }
/* rotate a flat plane onto the iso ground */
.iso-plane { transform: rotateX(60deg) rotateZ(45deg); }

rotateX(60deg) rotateZ(45deg)

.iso-plane

translateZ()

// tile (col, row) → screen pixels, TILE = full tile width
const screenX = (col - row) * (TILE / 2);
const screenY = (col + row) * (TILE / 4);

perspective

perspective

opacity

translateZ

back.out(1.4)

--gap

translateZ

power3.inOut

back.out(1.5)

rotateZ

translate

.scene

sine.inOut

--z

power2.out

translateZ(+12px)

power2.out

• Lift along Z, never scale to fake height — scaling breaks parallel projection.
• Camera drift must be tiny and slow (a few degrees / pixels). Big moves expose that it's a flat plane.
• Stagger builds by physical position (bottom layer first), not DOM order, so the structure assembles logically.
• Keep the light direction fixed for the whole scene — every block shades the same way.

• CSS 3D transforms — best for a handful of blocks/layers with crisp DOM/text on faces; one HTML file.
• Inline SVG (iso polygons) — best for many small blocks, grids, and infographics; easiest to animate with GSAP/CSS, no 3D-transform z-fighting.
• Three.js + OrthographicCamera — when you need real occlusion, shadows, or 3D rotation; still shippable as one HTML file via CDN.
• Pixel/tile (2:1) — game-art or map scenes; use the

  (col-row, col+row)

  projection.

• Axes land at the right angle (±30° true-iso, ~26.57° for 2:1); no accidental perspective shrink.
• Every block shaded top-light / side-mid / side-dark from one fixed light.
• Layers stack with believable depth — no z-fighting, no two faces flickering, no overlap errors.
• Build staggers by physical position (bottom-up), one idea per beat.
• Camera drift is small and slow; explode/assemble seats every layer exactly.

• prefers-reduced-motion

  shows the final assembled scene with no looping drift.

Packaged helper (

scripts/

):

scripts/seek-shot.sh anim.html 0 1.5 3

freezes the

?t=N

harness and screenshots each moment;

scripts/contact-sheet.sh sheet.png frame-*.png

tiles them for one-glance review. See

scripts/README.md

.

remotion still

• One

  .html

  file: CSS 3D transforms or inline SVG (or Three.js from CDN), markup, and all motion in one inline

  <script>

  on one master timeline (

  const tl = gsap.timeline()

  ) — a single playhead you can seek.
• Include the seek harness so any moment can be frozen for a screenshot.

?t=N

N

<script>
  // ... build your master timeline as `tl` (the layer build / explode / drift) ...
  const t = new URLSearchParams(location.search).get("t");
  if (t !== null) { tl.pause(); tl.seek(parseFloat(t)); }  // frozen at t seconds
  // no ?t → plays normally
  window.__ready = true;            // ready signal for headless wait
  console.log("duration", tl.duration());
</script>

clock

?t=N

1. Open the file at three moments — start, mid, end:

   …/iso.html?t=0

   ,

   ?t=<dur/2>

   ,

   ?t=<dur>

   (read

   tl.duration()

   from the console).
2. Headless-screenshot each frozen frame:
   bash

   npx playwright screenshot --wait-for-timeout=500 "file://$PWD/iso.html?t=1.2" frame-mid.png

3. INSPECT the projection, not just "did it animate":
   • Axes — ground lines run at the intended angle (±30° true-iso / ~26.57° dimetric); verticals stay vertical; nothing is foreshortened like perspective.
   • Depth — layers stack in the right Z order, blocks occlude correctly, per-face shading reads volume; no z-fighting (flickering coincident faces) and no overlap errors (a back block punching through a front one).
   • Build — at mid-frame the stack is partway assembled in physical order; at end every layer is exactly seated (explode fully closed), no drift left mid-tween.
   • Artifacts — clipped/skewed text on faces, off-canvas blocks, FOUC before fonts, jagged grid seams.
4. Iterate: fix angle/shading/Z-order, re-freeze the same

   ?t

   values, re-screenshot until it reads as solid iso.

1. Opens standalone in a browser — no console errors, no missing CDN.
2. One master timeline (or one Three.js progress value);

   ?t=N

   freezes on a deterministic still.
3. Screenshotted at start / mid / end — axes correct, depth/Z-order correct, no z-fighting, build seats exactly.
4. Per-face shading consistent from one fixed light; no accidental perspective shrink.

5. prefers-reduced-motion

   shows the final assembled scene without looping drift.

• references/isometric-recipes.md

  — fuller runnable code: the projection math (true-iso vs 2:1 dimetric, transform vs matrix), flat-SVG/DOM → iso-plane conversion, extruded-block faces with per-face shading (CSS and SVG), stacked-layer and exploded-view builds, isometric grid, camera drift / parallax / hover, and a complete Three.js

  OrthographicCamera

  iso scene — with easing notes and reduced-motion handling.