simulador-despiece

Simulador Despiece

Una máquina, una página HTML sin conexión: un modelo construido en código con unidades reales, un solucionador como funciones puras de una entrada, paneles en vivo, un botón por subsistema, un recorrido automático, una pasada crítica, una película grabada a 60 fps con banda sonora, y un paso opcional de publicación.

Reglas

• Referencia primero. Antes de construir, pide o encuentra un corte transversal, foto o clip. Sin referencia, no se construye.
• Nunca inventes números en silencio. Cada número proviene de una fuente o se marca como estimación, indicando de dónde viene.
• Confirma el alcance primero. Las construcciones pesadas consumen mucho uso de Claude Code: acuerda la máquina, los compases, si hay película o no.
• Publicar requiere un sí explícito, cada vez.
• En el host: solo a nivel de usuario, sin sudo, no tocar servicios del clúster, renderizados largos en tmux con registros.

Elige una buena máquina

Una entrada móvil (ángulo de cigüeñal, carrera 0..1, viento, tiempo) y números reales publicados. Buenos puntos de partida: desviador de bicicleta, escape de reloj (4 Hz), diferencial de coche, pespunte de máquina de coser, brazo de excavadora. Evita máquinas con muchas entradas independientes o dimensiones secretas.

Anatomía del simulador

1. Máquina — construida con código en unidades reales. 2. Modelo — un solucionador, funciones puras de una entrada. 3. Paneles — gráficos en vivo desde el mismo modelo. 4. Botones — aislar/cortar/mostrar solo por subsistema, vistas, deslizadores. 5. Ventana — el suelo/escenario muestra lo que dice el solucionador. 6. Recorrido — recorrido automático con cursor; cualquier entrada devuelve el control; 25 s de silencio lo recupera automáticamente.

Instalación y ejecución (en )

npx skills add elvarofficial/teardown -g -a claude-code
cd ~/.claude/skills/teardown && npm install && npx playwright install chromium
# necesita Node >= 20, ffmpeg, python3
mkdir -p ~/3d-studio/{projects,out,logs,smoke}
cd ~/3d-studio/projects/<machine>
tmux new -s <machine> 'claude 2>&1 | tee ~/3d-studio/logs/<machine>.log'
# dentro de Claude Code: /teardown ...   (nunca --dangerously-skip-permissions)

Prueba de humo: node ~/.claude/skills/teardown/sims/build.mjs cessna-live y abre el HTML desde teardown-out/dist/.

Flujo de trabajo (intercambia los [corchetes])

0. Brief

Completa templates/brief.md (referencia, única entrada, números reales, piezas) y confirma el alcance.

1. Construir

/teardown Build [el tren de aterrizaje principal del Cessna 337] como un simulador 3D interactivo. Referencia adjunta: [un dibujo en corte del tren]. Constrúyelo con código en unidades reales: [piezas]. Antes de dibujar nada, escribe el modelo como funciones puras de una entrada: [carrera de 0 a 1]. Usa los números reales: [la cremallera recorre 201 mm, el piñón tiene 32 dientes con módulo 4 mm, las patas giran exactamente 180°]. Verifícalos a mano y muéstrame la verificación. Si no estás seguro de que un número sea real, dímelo y di de dónde viene. Cada pieza, cada panel y cada etiqueta lee de ese único modelo. Nada está animado a mano.

2. Consola

Dispón una consola alrededor de la máquina a 1600×900: el título y el número vivo principal arriba a la izquierda, grande: [velocidad del motor en rpm]. Gráficos en vivo que se mueven con la máquina: [levantamiento de válvula a lo largo de 720° de cigüeñal, diagrama PV]. Un panel esquemático que redibuja el mecanismo en 2D desde el mismo modelo. Un botón por subsistema: aislar, cortar, mostrar solo. Vistas de cámara como botones: [heroica, frontal, lateral, superior, interior]. Llamadas con líneas finas de conexión. Cada panel se redibuja a partir del estado del fotograma. Ningún número en pantalla está escrito a mano.

3. Aspecto

Estilo: un modelo de estudio limpio sobre un fondo pálido. Fondo claro, sombras suaves en un suelo invisible, un color de acento para la pieza que funciona en ese momento: [color de acento]. La máquina ocupa el 60–70% de la vista. Piezas oscuras brillantes, revestimientos de vidrio, rugosidad del metal al menos 0.45. Las piezas casi blancas reciben un fino contorno de tinta o un fondo más oscuro. Elige la cámara para el mecanismo: [vista 3/4] si la vista frontal colapsa en un enrejado.

4. Crítico

Antes de mostrarme nada: 1. Renderiza un fotograma fijo en cada compás del recorrido y léelos para detectar: una pieza atravesando otra, una pieza flotando fuera de su soporte, una etiqueta tapando lo que nombra, un número que no coincida con la pose. 2. Repasa cada transición en pasos de 0.2 s buscando saltos. 3. Corrige colisiones con un número en el bloque de parámetros, nunca las ocultes con la cámara. Dime qué revisaste y qué corregiste. Muéstrame los fotogramas fijos.

5. Conducir

El recorrido se reproduce solo con un cursor presionando los botones: [compases del recorrido]. Cualquier clic, arrastre, desplazamiento o tecla entrega el control al visitante; 25 s de silencio lo devuelve. Arrastrar para orbitar, desplazar para hacer zoom, [tecla] oculta los paneles. Calienta cada sombreador antes del primer fotograma. Prueba en una GPU integrada con niveles de calidad: sin AO, menor relación de píxeles, sombras más pequeñas, paneles cada dos fotogramas.

6. Grabar

Haz que render(t) sea una función pura del tiempo a lo largo de [20 s]. Dibuja cada fotograma a 60 fps, 1920×1080 en Chrome sin cabeza, y envíalo a ffmpeg como H.264 yuv420p con faststart. Dame una hoja de contactos de cada compás.

7. Musicalizar

Compón la música en código en la misma línea de tiempo: [acordes Am9 a 92 bpm, un golpe en cada carrera de potencia, un clic en cada pulsación de botón, un aire creciente bajo la resistencia del acelerador]. Masteriza a -14 LUFS, pico verdadero por debajo de -1 dB, y mézclalo en el video.

8. Publicar

Mantén el HTML por debajo de 1 MB (los modelos grandes van en archivos hermanos). Crea una tarjeta de vista previa de 1200×630 a partir del mejor fotograma, con URLs de imagen absolutas. Despliega en [Vercel / host] solo después de que yo diga sí.

9. Romperlo (bonus)

Añade un deslizador para [viento 0–15 m/s] y ejecuta el modelo en vivo con él; muestra el efecto en los mismos paneles.

Lecciones aprendidas

• Mantén la página por debajo de 1 MB: una página de 15.9 MB mató la tarjeta de enlace de X; 967 KB la arreglaron.
• GPU integradas: los niveles de calidad (sin AO, menor relación de píxeles, sombras más pequeñas, paneles cada dos fotogramas) llevaron una construcción de 15 fps a 75 fps.
• Los fotogramas fijos detectan colisiones que el movimiento oculta. Siempre ejecuta la pasada crítica.
• Corrige colisiones en el bloque de parámetros, nunca con la cámara.

Entregable

Carpeta con: <maquina>.html (sin conexión, <1 MB), informe crítico (templates/critic-report.md) con fotogramas fijos, hoja de contactos, <maquina>.mp4 (60 fps, -14 LUFS), la verificación manual del modelo con fuentes/banderas, y una tarjeta de vista previa si se publica.

Créditos

Flujo de trabajo y avisos de Elvar (@elvar_official), "How I Turn Any Machine Into a 3D Simulator You Can Take Apart" (X, 30 de octubre de 2026). Ejecuta el skill de despiece de Elvar, github.com/elvarofficial/teardown (MIT), construido sobre whaleyxbt/claude-motion (MIT).