Haz videos de coding con storyboards
Referencia condicional
- Solo cuando el usuario realmente ingrese
/goalpara iniciar o reanudar un objetivo, se debe leer completamentereferences/goal-director.mdy seguir las restricciones del director allí establecidas. - Para la creación, modificación, previsualización, renderizado de tomas normales, o simplemente discutir
/goal, NO se debe leer ese archivo, ni precargarlo "por si acaso".
Planifica primero, no escribas código sin confirmación
- Revisa todos los frames de
.media/storyboard/, agrupándolos por "el mismo sujeto existe o se transforma continuamente". - Escribe en
STORYBOARD.mdla agrupación, las dependencias entre tomas y la lista de assets. Los assets deben indicar el tamaño de visualización en pantalla. - Para tomas con morphing continuo interno, compara soluciones viables en
RENDER_STRATEGY.mdy bloquea la implementación →references/render-strategy.md. - Muestra la tabla de agrupación y la lista de assets al usuario, esperando confirmación.
timeline.json es la única fuente de planificación para números de toma, tiempos de inicio/fin y duración total. No mantengas la línea de tiempo duplicada en múltiples archivos Markdown.
Flujo de producción principal
- Para tomas del mismo grupo, primero establece un renderizador de sujeto compartido, CameraRig, cargador de assets y estado de escena. Los archivos de toma solo contienen parámetros de estado y tiempo.
- Primero recrea estáticamente los keyframes del storyboard, generando una hoja de contacto concisa para que el usuario la valide. Si los puntos finales no pasan, no se hacen interpolaciones ni easing.
- Una vez que lo estático pase, crea la animación y entrega solo una previsualización arrastrable para validación del usuario.
- Las tomas siguientes evolucionan a partir del último frame aprobado de la toma anterior: continuar, transformar, añadir o desaparecer. No redibujes ni sobrescribas sujetos existentes →
references/scene-continuity.md. - Después de que todas las tomas estén aprobadas, conéctalas en la única línea de tiempo final, verificando costuras, duración total y una reproducción completa. El usuario confirma antes de renderizar el video final.
Las tomas, sujetos y assets ya aprobados están bloqueados. Si el problema proviene de tamaño, posición, recorte, cámara o efectos, solo modifica los parámetros correspondientes. No regeneres assets a menos que el usuario niegue explícitamente el asset en sí.
Paraleliza según dependencias, no por orden de toma
- Las tomas con morphing continuo del mismo sujeto o que deben heredar el último frame de la toma anterior se crean en orden de dependencia.
- Las escenas independientes, fondos, assets transparentes y tomas completas que no dependan de la composición de la toma anterior se pueden crear en paralelo.
- Una vez que la interfaz de la escena madre compartida esté estable, los estados, capas de superposición y animaciones internas de diferentes tomas se pueden paralelizar.
- Las ramas paralelas solo deben escribir en su propio directorio, sin modificar la línea de tiempo total, los archivos fuente de la escena madre compartida ni las tomas ya aprobadas. La salida solo necesita una hoja de contacto o previsualización.
- Si una toma posterior solo depende de la transición de entrada, primero se puede completar la escena y animación del sujeto, y luego agregar los parámetros del último frame de la toma anterior.
Ruta de ejecución más corta y restricciones de prompts
- Cada prompt de ejecución debe centrarse únicamente en el entregable que el usuario quiere ver en ese momento, indicando claramente el alcance de escritura permitido, los pasos mínimos, el punto de parada y lo que NO se debe hacer en esta ronda. No expandas una previsualización de fase en una validación final.
- Cuando el usuario pida "previsualizar", la ruta predeterminada es solo: completar la edición o montaje necesario → confirmar que la página se carga → iniciar Studio → devolver el enlace. No bloquees la previsualización con
check, capturas masivas, hojas de contacto, tablas de costuras frame a frame, hashes o reproducciones completas. - Las combinaciones temporales, conexiones parciales de tomas y puntos de entrada de depuración NO son la integración final total. Solo asegúrate de que el usuario vea imágenes continuas; la validación de costuras, revisión de duración total y reproducción completa se reservan para la única fase de integración final después de que todas las tomas estén aprobadas.
- La verificación debe poder responder directamente la pregunta específica actual. Si no hay errores ni problemas visuales claros, no añadas scripts de diagnóstico, detección de versiones, matrices de regresión, búsqueda inversa, capturas de pantalla repetidas ni verificaciones "por si acaso".
- No acumules múltiples procesos de navegador, Studio,
check,snapshotorenderen paralelo o en serie dentro de la misma sesión. Ejecuta solo un proceso en primer plano necesario para el entregable actual; entrega inmediatamente si ya hay resultados disponibles. - Si una verificación no relacionada con renderizado no produce nueva salida durante varios minutos o supera claramente el tiempo normal, detente inmediatamente y revisa el bloqueo más directo. No esperes sin feedback durante decenas de minutos, ni rerunes exactamente igual o sigas añadiendo verificaciones.
- Los prompts para la sesión de ejecución usan por defecto "para al terminar": alcanza el requisito actual del usuario y devuelve el resultado, sin pasar automáticamente a la siguiente fase, ni continuar expandiendo el trabajo porque las verificaciones técnicas pasaron.
Reglas de representación y movimiento
- Los props estáticos complejos se representan con texturas transparentes de alta calidad. Las formas geométricas estructurales y regulares usan Canvas/SVG. Las partículas, fragmentos, humo y puntos de luz usan Canvas.
- El crecimiento continuo, la invasión y el envolvimiento deben separar capas geométricas, de textura y de animación. Lo que se expande es la geometría, no los píxeles de la textura.
- Una sola textura 2D no puede generar caras superiores, laterales ni oclusiones que no estén en la imagen original. Si se necesita perspectiva real, usa assets multiángulo o 3D, y explica primero los límites de aproximación.
- Alejar la cámara, alejar la escena y reducir el objeto no son lo mismo →
references/camera-motion.md. - Si un problema de posición o diseño no se corrige después de tres rondas consecutivas, haz un panel de ajuste mínimo →
references/tune-panel.md.
Assets y determinismo
- El lado de la imagen fuente no debe exceder el doble del tamaño de visualización en pantalla. Prioriza WebP q85. Las imágenes de una sola escena no deben superar 3 MB →
references/asset-budget.md. - Renderizado sin red: no uses scripts CDN ni fuentes en línea.
- El código propio no debe usar
Math.random,Date.nowni polling. Ejecutaawait img.decode()antes del primer dibujo.
Entrada y estado
/index.html: única entrada para la línea de tiempo total y el renderizado final. Siempre se inicializa desde el segundo 0./compositions/NN-name.html: entrada de depuración para grupos o tomas individuales, debe poder inicializarse de forma independiente.- La línea de tiempo total debe ser una combinación real, sin usar iframes ni cambio de página.
HANDOFF.mdsolo guarda el estado válido actual, elementos bloqueados, archivos actuales, negaciones en frases cortas y el siguiente paso. Manténlo conciso: no guardes registros de proceso, prompts largos ni informes históricos.
Validación y entrega mínimas
- Fase estática: una hoja de contacto de keyframes del storyboard + "esperando validación".
- Fase de animación: una previsualización arrastrable + "esperando validación".
- Previsualización de conexión temporal: página cargable + enlace de Studio. No generes hoja de contacto, no verifiques costuras frame a frame, no ejecutes
checkformal. - Fase de corrección: frame o previsualización corregidos + una frase de explicación.
- Fase final: previsualización total o video + duración y ruta de salida.
- Las verificaciones diarias solo confirman que la página se carga, los assets son visibles y los keyframes son correctos. El
checkformal se ejecuta solo una vez cuando la animación está finalizada, la integración final está lista o hay un problema específico de ejecución. No repitas lint, check, capturas masivas ni regresiones frame a frame.
Por defecto, no generes scripts de auditoría, JSON de validación, listas de verificación, instrucciones de entrega, informes de identidad/Mesh/partículas, hashes frame a frame, diferencias de píxeles, renders duplicados, validaciones de arrastre inverso ni hojas de contacto de múltiples versiones. Cuando surja un problema específico, solo revisa el código relevante, el error o un frame problemático, muestra el resultado tras la corrección; solo genera un informe de diagnóstico formal si el usuario lo solicita explícitamente.