Cómo dibujo máquinas que explican cosas

Este sitio está lleno de máquinas que no existen. Un octágono que registra picks, un tocadiscos que gira a 33⅓ rpm, un microscopio con tornillo de enfoque. No son adornos: cada una intenta explicar una idea técnica mostrando el objeto que la ejecuta. Así es como las construyo.

Un objeto, no cajas y flechas

Cuando explico un sistema, el diagrama por defecto son cajas y flechas. Funcionan, pero se me olvidan al día siguiente: no hay nada a qué agarrarse. Los objetos sí se recuerdan, porque tienen forma, peso y partes que se mueven con una lógica.

La regla que me puse es simple: cada idea tiene un solo objeto físico. El embudo de ventas es un embudo de verdad, con leads cayendo por la boca. La conversación de un agente es una mesa con un teléfono y bocadillos que entran y salen. Si no encuentro el objeto, es que todavía no entiendo la idea. Y si el objeto no aclara nada, sobra.

El kit: isometría, sólidos, cuatro tonos y orden

Todo se dibuja en proyección isométrica: el eje X baja a −30°, el Z sube a 90° y el Y sube a +30°. Así un cubo enseña tres caras a la vez y el ojo arma el volumen solo. No hay perspectiva, no hay fugas, no hay sorpresas.

De ahí sale un kit chico: cilindros y tubos, cajas, y un lathe para las piezas redondas. Cada sólido se parte en caras, y cada cara recibe uno de cuatro tonos fijos. La cara superior es la más clara, un lateral va en medio y el otro en oscuro; el cuarto tono es para huecos y sombras de contacto. Con cuatro grises el volumen se lee sin un solo gradiente.

El orden del pintor es lo que más tiempo me costó. Dibujo por profundidad, de atrás hacia adelante, y antes de emitir el SVG ordeno las piezas por su coordenada proyectada. Cuando el orden está bien, las piezas se tapan solas y no hay que recortar nada.

Geometría en build time, movimiento en el navegador

La geometría no se calcula en el navegador. Un script la resuelve en build time, la serializa y la sirve como SVG con hash de contenido, así que el archivo se cachea para siempre.

const plate = isoProject(model); // resolved once, at build time
const url = assetUrl(hash(plate)); // content-hashed, cache forever

// The slot reserves its 4:3 box; the SVG streams in as it nears the viewport.
whenNearViewport(slot, () => mount(slot, plate));

Cada slot reserva su caja 4:3 desde el primer render, así no hay brinco de layout. Cuando el slot se acerca al viewport, inyecto el SVG; si nunca llega, nunca se descarga.

El movimiento va aparte, con springs y easing, nunca con transiciones lineales. En el tocadiscos, el plato gira a 33⅓ rpm y el brazo avanza 0,1 mm de surco por vuelta; el contador de tiempo sale del mismo modelo que mueve las piezas, así que no puede mentir. Por eso los números en pantalla siempre coinciden con lo que se ve.

Dos detalles que cuidan al lector: cuando el slot sale de pantalla, la animación se pausa; y con prefers-reduced-motion la figura se queda en su pose de reposo, sin girar ni latir.

Nada de esto son capturas ni renders. Son SVG con piezas de verdad, cada una con su tono y su lugar en el orden. Cuando el modelo está bien, la figura explica la idea sin una sola palabra encima.