Slides 3D

Slides donde la animación es un objeto real renderizado en tiempo real: un contador mecánico que rueda hasta 95, un motor que baja con cadena a un chasis, dos interruptores de pared que hacen clic, una tarjeta que vuela de un lector a otro. Todo en un solo archivo HTML que se abre desde el disco y se presenta con el teclado.

Salió de una noche de trabajo con agentes en paralelo para la capacitación "Cómo automatizar el 95%" (Parches de IA, 19 sep 2026). Los mejores puntajes de realismo quedaron en 92 sobre 100 con un juez estricto. referencia/ejemplos.md dice cuáles son y por qué ganaron.

Lo primero

1. El texto no se inventa aquí. Titulares, bajadas y rótulos se escriben con la skill tono-presentaciones (neutro, corto, sin jerga, sin no es X, es Y, sin títulos de dos partes con dos puntos). Si el deck completo es de Immpulso, el sistema visual lo manda immpulso-slides. Esta skill es la capa 3D.
2. Los datos van verificados antes de escribirlos. En el deck que originó esta skill, cuatro agentes de investigación comprobaron cada fecha y cada cifra contra la fuente oficial antes de que se escribiera una sola slide. Ver referencia/metodologia.md.
3. Una slide es un título enorme y una animación enorme. Se proyecta en televisores chicos y se ve desde el fondo del salón: titular ≥ 100 px sobre el lienzo de 1920 × 1080, cualquier texto legible ≥ 44 px, nada por debajo de 30 px.

Cómo se arma

proyecto/
  plantilla.html          ← el motor (se copia de plantilla/)
  GUION.md                ← el copy aprobado, slide por slide, con los pasos
  candidatos/sNN-rR-a.html  ← una slide 3D por archivo
  cuadros/                ← capturas para juzgar
  lib/three.min.js

1. Copia el motor. plantilla/plantilla.html ya trae lienzo fijo 1920 × 1080 escalado a la pantalla, navegación por teclado, pasos por tecla, dos paletas de marca intercambiables con C, notas del presentador y el evento pdi:paso. No se modifica: ver referencia/motor.md.
2. Escribe el GUION con el copy aprobado y, por cada slide, qué objeto es. Si la respuesta es "el texto", vuelve a empezar.
3. Una slide, un agente. Cada slide 3D la construye un agente con el encargo de referencia/encargo.md, que incluye las lecciones. En paralelo, máximo cuatro o cinco: cada captura levanta un Chrome con render por software y el equipo se satura.
4. Un juez aparte califica de 0 a 100 realismo e impacto con referencia/juez.md, mirando solo las capturas, nunca el código. Escribe puntajes.json y suma lecciones nuevas.
5. Reintento dirigido. Lo que queda entre 85 y 95 vuelve con los delatores del juez, uno por uno y en orden de gravedad, conservando lo elogiado.
6. Galería y entrega. _galeria.py arma la página ordenada por impacto y realismo, con botón para verlas a pantalla completa. _pdf.js exporta el deck a PDF.

Lo que hace que se vea real

El detalle está en referencia/realismo.md y, sobre todo, en referencia/lecciones.md, que son 33 fallas concretas que el juez ya castigó. Lo esencial:

• Luz de estudio con entorno: softboxes emisivos en una escena convertida con PMREMGenerator, luz clave con sombra suave, contraluz que recorta la silueta, ACESFilmicToneMapping.
• Materiales físicos con imperfección: MeshPhysicalMaterial, biseles en vez de aristas vivas, rugosidad variable, microrayas, polvo y huellas irregulares, nunca clonadas entre piezas gemelas.
• Sombras de contacto bajo todo lo que se apoya, y sombra visible de lo que vuela.
• Cámara de foto: 50 a 85 mm, una sola profundidad de campo para toda la escena, movimiento lento, grano fino, sin aberración cromática.
• Física creíble: masa, inercia, rebote corto, nada a velocidad constante.
• Fondo de marca como objeto: el arco, el logo o la forma de la marca son una lámpara con carcasa, no un degradado pegado.

Reglas que ya costaron una ronda

• El motor tiene el texto </body> dentro de un string de JS. Inserta tus <script> antes del último </body>, nunca con un reemplazo del primero.
• Cero hex sueltos. Los colores salen de las variables de tema y se releen cuando cambia data-tema en <html>; si no, la tecla C rompe la slide y el juez aplica tope de 85.
• El canvas no puede tapar la paleta clara: fondo del render tomado de --bg, no negro fijo.
• Las capturas van con render por software y son lentas (1 a 2 s por cuadro). Limita cuánto avanza el reloj de la animación por cuadro para que los cuatro momentos salgan distintos.
• Encuadra completo lo que nombra el titular. Acercar la cámara para ganar realismo y dejar fuera el objeto del que habla la slide baja el impacto más de lo que sube el realismo.
• Cada rótulo toca algo que se ve y la acción que promete el GUION ocurre antes de los 5 s.

Herramientas

Playwright vive en ~/node_modules/playwright y se lanza con { channel: 'chrome' }.

Referencias

• referencia/metodologia.md — el loop completo con agentes: investigación, generación, juicio, reintento, galería, y cómo administrar el ritmo para no chocar con el límite de uso.
• referencia/realismo.md — la receta técnica de three.js, con el esqueleto de escena.
• referencia/lecciones.md — lo más valioso: 33 delatores concretos, con el caso que los produjo.
• referencia/juez.md — la rúbrica de 0 a 100 con sus anclas y topes.
• referencia/encargo.md — el encargo que recibe cada agente generador.
• referencia/motor.md — teclas, pasos, variables de tema, eventos y trampas del motor.
• referencia/ejemplos.md — las slides mejor puntuadas, con su nota y por qué ganaron.
• ejemplos/ — los HTML y el cuadro final de esas slides. Ábrelos antes de diseñar una nueva.
• referencia/guion-ejemplo.md — un GUION real completo, de 33 slides.