iso-figure skill

---
name: iso-figure
description: Build an interactive isometric line-art "figure" (Fig N style) of an object in a single HTML/SVG file: monochrome technical-illustration look, parts you can press that produce real output, live state readout. Use for hero illustrations, interactive diagrams, product figures, and playable desk objects (computer, synth, calculator).
---

# Interactive isometric figure

Produces one self-contained HTML file: a rounded panel captioned like a textbook plate, holding an isometric line drawing of an object whose parts actually work. A switch toggles, keys depress, a screen shows what was typed, a synth key makes sound. No libraries, no canvas, no 3D engine, just plain SVG generated by about 15 lines of projection code.

The object must do something real. A figure that only animates is decoration; a figure where pressing a part produces output (text, a number, a sound, a changed display) is the point. Decide what the output is before drawing anything.

## The four things that make it work

1. **Everything is a flat 2D shape placed on a 3D plane.** Never hand-compute skewed polygons. Draw ordinary `<rect>`, `<text>`, `<path>` in a face's local coordinates and let one SVG `matrix()` put it on the plane. Text, glyphs and rounded corners then sit in correct perspective for free.
2. **Objects are boxes; a box is its three visible faces.** Complex objects are boxes plus flat detail drawn on their faces (vents, slots, bezels, LEDs, labels).
3. **Interaction is class toggles on SVG groups.** One `state` object, one `render()`; CSS does the motion.
4. **The frame sells it.** Four monospace corner captions: `Fig N` (top-left), OBJECT NAME (top-right), the instruction (bottom-left), a live state readout (bottom-right).

## Kernel (copy verbatim, then build the scene)

```js
const C = Math.cos(Math.PI/6), S = Math.sin(Math.PI/6), OX = 465, OY = 300; // where the 3D origin lands in the viewBox
const P = (x,y,z) => [(x-y)*C + OX, (x+y)*S - z + OY];   // point: 3D -> screen
const D = (x,y,z) => [(x-y)*C, (x+y)*S - z];              // direction only
// plane = origin O + in-plane axes U,V. Anything inside a <g> with this transform lies flat on that plane.
const plane = (O,U,V) => { const o=P(...O), u=D(...U), v=D(...V);
  return `matrix(${u[0]} ${u[1]} ${v[0]} ${v[1]} ${o[0]} ${o[1]})`; };
const TOP   = (x,y,z) => plane([x,y,z],[1,0,0],[0,1,0]);   // z = const
const FRONT = (x,y,z) => plane([x,y,z],[1,0,0],[0,0,-1]);  // y = const (faces lower-left); pass its top-left corner
const SIDE  = (x,y,z) => plane([x,y,z],[0,-1,0],[0,0,-1]); // x = const (faces lower-right); pass its top-left corner
const rect = (t,w,h,r=0,cls='face') =>
  `<g transform="${t}"><rect class="${cls}" width="${w}" height="${h}" rx="${r}"/></g>`;
// box at (x,y,z), size w along x, d along y, h along z
const box = (x,y,z,w,d,h,r=0) =>
  rect(SIDE(x+w,y+d,z+h), d,h,Math.min(r,h/4)) +
  rect(FRONT(x,y+d,z+h), w,h,Math.min(r,h/4)) +
  rect(TOP(x,y,z+h), w,d,r,'face top');
```