Continuum Walkthrough

¿Qué hace Continuum Walkthrough?

El punto de referencia es examples/po-desk/walkthrough.html (PO Desk Walkthrough v4.1, 10/10). Jason: "Me encantan las animaciones, los efectos de sonido, etc., y la mecánica de continuidad". Cada pieza nueva debe superarlo. Abre el benchmark y copia cómo se mueve antes de escribir algo nuevo.

El pipeline (≈ 3–4 h de tiempo del agente; renderiza ≈ 1 h en segundo plano)

#	Paso	Herramienta	Puerta
1	Preguntas de intake: haz cada pregunta de references/intake-qa.md con la herramienta de preguntas (4 por llamada, opción recomendada primero)	AskUserQuestion	No construir hasta que las respuestas estén listas
2	Storyboard + guión: completa references/beat-sheet.md para esta oferta; una línea de voz por beat, conversacional	escribir script.json	El usuario aprueba el storyboard
3	Voz: 2 tomas de cada línea	scripts/vo_gen.mjs	Los créditos del plan gratuito alcanzan (ver Voz)
4	Verificar + tiempos de palabra	scripts/vo_verify.sh (whisper.cpp)	Cada toma elegida coincide palabra por palabra con su línea
5	Imagen: copia engine/starter.html, luego construye escena por escena; pon cada clave T.* en el inicio de la palabra que la nombra	engine/engine.js	Los fotogramas en cada beat se ven bien en ambos formatos
6	Sonido: escribe una hoja de sonidos con un sonido por evento visible (ver references/sound-map.md)	scripts/mix.py cues.json	−14 LUFS, −1 dBFS, las líneas de voz no se superponen
7	Puertas	scripts/ghost_audit.mjs para v y h	APROBADO. Un FALLO bloquea el render
8	Render, en segundo plano	nohup zsh scripts/render.sh … & disown	Conteo de fotogramas = LEN × 60 para ambos formatos
9	Entrega	4 MP4s: 9×16 y 16×9, cada uno con Voz+Música y Voz+SFX	Hoja de contacto (un fotograma cada 2 s) revisada visualmente
10	Puntuación: pide /10, regístrala y convierte cada nota en una fila del registro y una puerta	references/lessons.md	—

Configuración: node 20+, ffmpeg, python3 con numpy, npm i playwright-core (o PW_DIR), Chrome (CHROME=… opcional), whisper-cli + ggml-small.en-q5_1.bin.

La estructura de la historia (no reordenar)

1. Gancho (0–5 s): un inicio personal y casual sobre un iMessage realista del remitente, con su foto real y nombre: "Oye, esto es random… pero vi algo en tu negocio que podría ser interesante". Sin logo ni presentación todavía.
2. El objeto llega (5–10 s): un montón de notificaciones realistas. Una de ellas (el documento real) se transforma en una página creíble y completa: membrete, número de OC, tabla, totales, firma.
3. Dolor, mostrado (10–18 s): una persona nombrada ("María") lo reescribe en cada destino: ERP (logo real), CRM (logo real), carpeta, correo. Su reloj corre y las teclas hacen clic. El nombre de cada destino se DICE en la voz en off.
4. Dolor, con precio (18–26 s): tarifa × horas × días laborables, con un contador que sube hasta el costo anual en rojo. Las matemáticas quedan en pantalla en letra pequeña. Di el dinero.
5. Giro (26 s): "Así es como se ve cuando eso se maneja por ti". El mismo objeto vuelve al centro. La continuidad es el truco.
6. La solución (28–42 s): un escáner lo lee, los campos vuelan hacia una tarjeta, las marcas de verificación se activan, una excepción se señala y explica ("10 veces lo habitual"), luego un toque para arreglar y un toque para aprobar.
7. Prueba (42–51 s): se archiva en los 4 lugares con logos reales y marcas de verificación, luego un recibo con marcas de tiempo ("1 min 44 s, de correo a archivado").
8. CTA (51–53 s): suave y sin presión: "¿Vale la pena echarle un vistazo? Solo responde".
9. Solo el logo (53.8–58 s): la marca por sí sola en un escenario vacío, desvaneciéndose. Nada más en pantalla.

Reglas de continuidad (este es el estilo)

• Un objeto persistente (el documento) se mueve entre diseños con muelles track(). Nunca se corta y se vuelve a crear.
• Cada escena nace de la anterior: una notificación se convierte en la página, la página se encoge a un lado, las ventanas se apilan y la página vuelve.
• Las salidas van a opacidad 0 y visibility:hidden. Nunca estaciones un elemento terminado al 20–50% como "fondo". Ese fantasma le costó a v4 su silueta ("hay una silueta mostrándose todo el tiempo después de 0:18"). ghost_audit.mjs ahora falla cualquier elemento mantenido medio visible por más de 3 s.
• Solo muelles: step() con z 0.88–1.0 y sin rebote. Usa desenfoque de entrada/salida, 60 fps con 8 subfotogramas, obturador de 180°.
• En pantalla: una idea a la vez, tipografía grande, tarjetas iOS sin bordes, blanco cálido #F4F2EE, tinta #0E0E0E, un acento por significado (rojo = costo/problema, verde = hecho).
• Los diseños son separados para v (1080×1920) y h (1920×1080). Diseña primero para 9:16; el teléfono es la pantalla principal.

Lista de verificación de realismo

• iMessage: gramática real de pantalla de bloqueo (hora, fecha, notificaciones apiladas, "ahora"/"hace 2m"), foto del remitente + nombre, sonido tritono.
• Documento: proporciones tamaño carta, nombres de campos reales, números plausibles que sumen, una firma, pie de página.
• Logos: SVGs reales (simple-icons, color hexadecimal exacto de la marca). Solo muestra herramientas que el prospecto realmente usa o con las que realmente te integras. Un logo implica una integración.
• Los datos son inventados y etiquetados "Datos de muestra · empresa ficticia". Las matemáticas del dinero muestran su fórmula.

Voz: pregunta primero, luego construye

Pregunta siempre qué voz quieren (pregunta 7 del intake), con las opciones siguientes. Recomienda ElevenLabs y diles que es gratis: 10,000 créditos gratis cada mes.

Opción	Costo	Suena	Cómo
ElevenLabs (recomendada)	Gratis: 10,000 créditos al mes ≈ 5 videos	Lo más humano	scripts/vo_gen.mjs con su clave API (elevenlabs.io → Perfil → Claves API)
Su propia voz, grabada	Gratis	Lo más personal	Graban cada línea en un teléfono; guárdala como vo/raw/<id>-t1.wav y ejecuta vo_verify.sh como siempre
Su propia voz, clonada	Plan pago de ElevenLabs	Como ellos, sin grabación	Instant Voice Clone en ElevenLabs, luego coloca ese ID de voz en script.json
Voz de computadora integrada	Gratis, sin cuenta	Robótica	say -v Samantha -o a01.aiff "…"; úsala solo para borradores de sincronización

Detalles de ElevenLabs:

• Clave: ELEVENLABS_API_KEY o ELEVENLABS_KEY_FILE. Nunca la imprimas, la pegues en el chat o la subas al repositorio. En T3, usa request_secret con entrega de archivo y elimina el archivo cuando termines.
• Por defecto: voz Brian nPczCjzI2devNBz1zQrb, modelo eleven_v4, estabilidad 0.45. Etiquetas de audio como [casual], [measured], [serious] y [confident] dirigen la lectura.
• Plan gratuito: 10,000 créditos al mes (≈ 10,000 caracteres). Un guión de 60 s es ≈ 900 caracteres, así que 2 tomas de todo es ≈ 1,800, unos 5 videos al mes.
• El plan gratuito no tiene licencia comercial (términos de ElevenLabs). Úsalo para borradores y revisión interna. Antes de publicar o enviar algo como marketing, genera las tomas finales con un plan pago (Starter es el más barato).
• Coloca las líneas con una respiración ≥0.3 s entre ellas. Los eventos de imagen se sincronizan con los inicios de palabra de whisper, nunca con tiempos estimados.

Sonido

Cada evento visible recibe un sonido audible en el altavoz del teléfono: tritono en el iMessage, tintineos en las notificaciones, clics de teclas al escribir, un pop en cada ventana, un golpe de efectivo en la cifra anual, un grave profundo en "solo reescribiendo", una cama de escáner, ticks en las marcas de verificación, un sonido de botón en cada toque, un sonido de éxito en el último archivo y un brillo en el logo. El mapa completo con ganancias está en references/sound-map.md. La música es una cama opcional a −23 LUFS, atenuada bajo la voz. Entrega siempre una versión Voz+SFX también, porque el audio de tendencia se añade dentro de la aplicación.

Problemas comunes de renderizado

• Los renders fallan cuando la aplicación anfitriona se reinicia. Ejecútalos siempre con nohup … < /dev/null & disown, y verifica el conteo de fotogramas después. El 2026-11-09 incluso eso falló en un reinicio del anfitrión; prefiere screen -dmS <nombre> zsh -c "…".
• Disco: los fotogramas se transmiten directamente a ffmpeg y nunca se escriben en disco. render.sh elimina el intermedio silencioso después de la multiplexación.
• Para un SVG o imagen cuyo offsetWidth sea incorrecto (por ejemplo, una marca), establece el._w / el._h tú mismo, o se renderizará descentrado.
• Cualquier cosa que deba mantenerse nítida bajo el desenfoque de movimiento (fichas "voladoras" rápidas) usa tf (el tiempo del fotograma) en lugar de t.