motion-film

motion-film：hacer videos con código

Toda la imagen, animación, subtítulos y sonido se generan mediante código, renderizando fotograma a fotograma en MP4. No se utilizan modelos de generación de video. Esta skill es un método + un conjunto de herramientas ligeras, sin biblioteca de素材; los materiales se buscan y sintetizan según el video y se registra la licencia.

Primero, determina la ruta

Ruta	Solicitud típica	Lectura principal
A. Video promocional de producto	Convertir un sitio web/App/proyecto frontend en un video promocional o demo de funciones	references/product-promo.md
B. Corto de estilo	"Haz un video de 30 segundos con estilo XX que cuente…", animación MG, texto estilizado, intro	references/style-atlas.md + references/style-spec.md
C. Toma única / efecto único	"Haz un título que entre volando" "Haz un efecto de marco de bloqueo"	Directamente según los principios a continuación, lee las secciones relevantes de references/aesthetic-rules.md

Las dos rutas principales comparten: references/directing.md (dirección), references/timing.md (ritmo), references/sound.md (sonido), references/tech.md (renderizado), references/review.md (revisión). Si el usuario proporciona BGM y se necesita sincronización con el ritmo: references/beat-sync.md, analiza la música primero y luego el storyboard.

Preguntar solo una vez antes de empezar

Combina lo que no se pueda decidir en un solo mensaje y pregúntalo todo, sin más preguntas después; el resto usa valores predeterminados y se especifica en el treatment:

• Solo lo que el usuario sabe sobre el tema (puntos clave del producto, público objetivo, plataforma de publicación, contenido obligatorio);
• Si tiene sus propios materiales: logo, colores/tipografía de marca, voz en off, música, video de referencia;
• Si quiere ver el storyboard/fotogramas de estilo antes del video final (si es así, pausa una vez; si no, haz todo de una vez).

Valores predeterminados: 30–60 s (toma individual 3–8 s); 1920×1080; videos de producto a 30 fps, videos de estilo según el estilo (24/30); subtítulos y voz en off en el idioma del usuario; volumen −14 LUFS, pico verdadero ≤ −1 dBTP. Si el usuario dice claramente "tú decides" o "hazlo directamente", no preguntes y avanza con los valores predeterminados.

Diez principios fundamentales (experiencia confirmada por cuatro fuentes)

1. La imagen es una función pura del tiempo. render(t) siempre dibuja el mismo fotograma para el mismo t; prohibido Date.now(), Math.random() sin semilla, estado acumulado entre fotogramas. El azar siempre usa mulberry32/hash con semilla fija. Cualquier fotograma se puede renderizar de forma individual, desordenada y en paralelo.
2. Una sola línea de tiempo lo gobierna todo. Los límites de las tomas, las acciones clave, los subtítulos, los efectos de sonido y los puntos de impacto musical se derivan de una misma tabla de cues; cambiar la duración solo se modifica en un lugar y el sonido se ajusta automáticamente. Los videos sincronizados con el ritmo usan notación de compás (beatF(n)), no números de fotograma en bruto.
3. Temporizar para la audiencia, no para el código. Cada toma enumera los puntos de información que la audiencia debe captar (reads), uno a la vez; las acciones pueden ser rápidas, pero el significado debe detenerse. La primera versión casi siempre es demasiado rápida: por defecto reduce la velocidad un nivel. La fórmula está en timing.md.
4. Una toma cuenta una sola cosa; una técnica solo es protagonista una vez en todo el video. La apertura solo da un protagonista + un arco de acción completo (inicio – desarrollo – conclusión). Las tomas repetitivas y los eslóganes repetidos se eliminan.
5. El movimiento es como la vida, no como una máquina. No usar interpolación lineal; anticipación → acción → seguimiento; los componentes se escalonan, evitando "gemelos" (simetría izquierda-derecha, sincronía grupal); las curvas de easing que requieren rebote deben tener overshoot.
6. El lenguaje visual nace del tema/producto mismo. La tipografía, paleta de colores, esquinas redondeadas y texturas de un video de producto se extraen del sistema de diseño del producto; los videos de estilo siguen la "esencia y lo que no es" de ese estilo. No se superpone una "piel de video promocional" no relacionada.
7. Restringir los efectos especiales. Los efectos de luz no se usan en grupo, solo una vez para el protagonista y recortados en esquinas redondeadas; los videos de producto por defecto no añaden movimiento de cámara handheld; los efectos de impacto en toda la imagen (vibración de pantalla/parpadeo de fotograma/escala general bombeada) como máximo 3 veces en todo el video.
8. El sonido es la mitad del video. Tres capas: ambiente + foley + música; cada acción visible tiene sonido; antes del clímax, deja un verdadero silencio; el sonido se hace después de que la imagen esté bloqueada.
9. Primero usa el resultado más barato para definir la dirección. Treatment (texto) → fotogramas de estilo (fotogramas fijos renderizados con código real) → previsualización de baja resolución → renderizado final. Los debates sobre la dirección no entran en fases caras.
10. Revísalo tú mismo primero, luego entrega a una revisión independiente. Cada ronda de modificaciones incluye tu propia revisión mediante contact sheets/action bars/recortes ampliados; antes de la entrega, pásalo a un revisor que no haya participado en la producción (subagente con contexto limpio, o una sesión separada) que lo evalúe y señale errores según review.md, y solo se corrige una ronda.

Flujo de trabajo

1. Brief: La ronda de preguntas anterior; para videos de producto, además, una revisión de solo lectura del producto (posicionamiento, funciones, estado de la página, tokens de diseño, riesgos de datos).
2. Treatment (escribe TREATMENT.md antes de escribir cualquier código de imagen): Elige una de tres estructuras candidatas; logline y arco; obras de referencia “qué aprender / qué no tomar”; tabla de tomas (tamaño de plano, posición de cámara, movimiento de cámara, duración, justificación); ritmo segundo a segundo; cue map; tabla de diseño de sonido; subtítulos y diseño tipográfico. Plantilla en directing.md.
3. Estilos de fotograma: 2–3 fotogramas de estilo (si hay personajes, añade model sheet), renderizados con código real, compáralos con la especificación de estilo.
4. Implementación por tomas: Primero coloca las poses clave como fotogramas fijos para revisar, si se entienden, luego añade el movimiento intermedio. Cada toma tiene 2 momentos de aceptación fijos; al terminar, genera un fotograma fijo para autoevaluación.
5. Sonido: Después de bloquear la línea de tiempo de la imagen, genera música, foley y subtítulos a partir de la tabla de cues; mezcla y masterización.
6. Autoevaluación: Contact sheet (un fotograma cada 0.5–1 s), action bar de las acciones clave cada 0.1–0.2 s, recortes a resolución completa de texto/bordes; reproduce con sonido a velocidad completa. Revisa punto por punto según aesthetic-rules.md.
7. Revisión independiente + una ronda de correcciones: review.md. Los problemas pequeños se corrigen en la misma ronda; los grandes se explican en una frase en la entrega.
8. Entrega: Ver más abajo.

Herramientas (scripts/, cópialas al proyecto según sea necesario)

Archivo	Función
scripts/render.mjs	Renderizador: la página HTML expone renderAt(t) → fotograma fijo / contact sheet / action bar / recorte / MP4, soporta múltiples workers, motion blur (subfotogramas acumulados), orientación vertical
scripts/motion.js	Herramientas de función pura para usar dentro de la página: azar con semilla, familia de easings, keyframes, resorte, overshoot, escalonamiento, notación de compás, curvas de velocidad
scripts/sfx.py	Foley y mezcla programática: whoosh / impact / riser / pop / click / sparkle / tick, sintetiza mix.wav a partir de una tabla de eventos
scripts/master.sh	Mezcla + doble loudnorm (−14 LUFS / −1 dBTP) + detección de fotogramas negros + informe de duración/especificaciones
scripts/beat_grid.py	Ajuste de la cuadrícula de compás del BGM (incluye corrección de errores 2x / 0.5x / 3:2) + clasificación kick/snare/hihat + estructura de energía, genera beat_data.json
scripts/capture.mjs	Conjunto de tres herramientas para material de video de producto: captura de pantalla de página completa 2x, recorte de elementos (transparente, 4x), fondo vacío, tabla de coordenadas layout.json
templates/starter/	Proyecto de demostración de 9.6 s que se puede ejecutar directamente (línea de tiempo, renderAt, eventos de sonido, subtítulos, build.sh para generar el video con un solo comando); los nuevos proyectos se copian desde aquí

render.mjs mapea /lib/ al directorio scripts/ de esta skill, la página puede usar <script src="/lib/motion.js"> para acceder a las funciones de la herramienta. Nuevo proyecto: copia templates/starter/ → en el proyecto, npm i puppeteer-core → modifica la línea de tiempo y las tomas → MF=<ruta de esta skill> sh build.sh.

Si el video de producto usa Remotion: el método también es aplicable (tech.md tiene notas de comparación); ten en cuenta que Remotion puede requerir una licencia paga para uso corporativo, advierte al usuario antes de empezar.

Dependencias: Node 18+, ffmpeg, Chrome/Chromium (render.mjs lo busca automáticamente, o configura CHROME_PATH); npm i puppeteer-core se instala en el proyecto. Python 3 + numpy/scipy (audio); librosa solo se instala para análisis de ritmo, en el propio venv del proyecto. No instalo software del sistema para el usuario; si falta algo, lo menciono en esa ronda de preguntas.

Entrega

En la carpeta del proyecto:

• <nombre>.mp4 (y poster.jpg); los videos de producto con BGM incluyen además una versión sin BGM (con efectos de sonido) para facilitar el cambio de música posterior;
• <nombre>.srt (si hay subtítulos/narración);
• TREATMENT.md;
• CREDITS.md: fuente y licencia de cada material de terceros (tipografía, imágenes, música, samples, motor TTS);
• Código fuente y un build.sh con un solo comando.

Informa al usuario: dónde está el video final, CREDITS.md enumera las licencias, los materiales proporcionados por el usuario son responsabilidad del usuario en cuanto a licencias. No incluyas ninguna promoción, solicitud de atribución o sugerencia de "dónde publicar", a menos que el usuario lo pregunte.

Límites

• Las obras de referencia solo se usan para aprender la gramática (composición, ritmo, movimiento de cámara, lógica de color), no se copian personajes, diseños, melodías, tomas específicas, logotipos o tipografías.
• No aparecen marcas reales, obras o personajes en el video, a menos que el usuario posea o haya confirmado el derecho de uso; los nombres de marca y producto son ficticios.
• Solo se usan materiales CC0 / dominio público / OFL / CC BY (con atribución requerida) / explícitamente libres para uso comercial; "sin restricciones conocidas" no cuenta. Para otras licencias abiertas, primero informa al usuario de los términos.
• Los clientes, personas, internos, claves secretas y datos en tiempo real en los videos de producto se fictician o anonimizan antes de la captura de pantalla.
• No descargo ni ejecuto código automáticamente de internet, ni actualizo esta skill automáticamente; si es necesario descargar materiales, primero informa al usuario qué descargar, de dónde y con qué licencia.