igorcacerez/motion-video-studio

Motion Video Studio

Transforma un briefing en fuente editable, fotogramas revisados, audio y MP4. La base es el curso de Movez; consulta la correspondencia de los 12 capítulos. No prometas calidad profesional solo por activar la skill: produce, inspecciona y corrige los artefactos.

Comienza por el modo correcto

• Referencia similar al ejemplo: lee el análisis take por take y las recetas de efectos. La referencia está en examples/reference/original.mp4; es material de estudio, con derechos separados del código.
• Vídeo de producto: ejecuta npm run gather -- --url URL --out assets/brand (solo la URL proporcionada; genera pantallas desktop/mobile, imágenes/iconos, colores, fuentes y inventory.json con licencia "no verificada") y reúne también URL, pantallas reales, logo, fuentes, colores, texto aprobado y CTA. La plantilla tiene UI ficticia explícitamente etiquetada; sustitúyela por imágenes reales antes de anunciar un producto existente.
• UI morph/loop: usa las instrucciones y la plantilla en assets/morph/. Lee la sección de loop en production.md.
• Elementos 3D: lee threejs-guide.md, reutiliza scripts/three-helpers.mjs y la plantilla assets/three/. La dependencia Three.js 0.187.0 ya forma parte del paquete; 94 documentos oficiales están adjuntos para consulta. Usa cámara, geometría, material, luz y animación en función de t; no transportes bucles de tiempo real de los manuales al render.
• Película larga/personaje: lee la plantilla de dirección en assets/brief-template.md; mantén una biblia de identidad y una guía de animación por proyecto.
• Revisión puntual: conserva la fuente existente y renderiza solo el intervalo afectado con --start y --duration.

Elige el nivel de ambición (L1 smoke test … L5 película larga) en prompts.md: define cuánto preguntar, cuánto revisar y cuándo detenerse. Un one-liner prueba el motor, no la idea; para trabajo propio exige tesis, referencia y hecho verificable.

Los comandos a continuación son relativos a la carpeta que contiene este SKILL.md. Descubre esa carpeta en el entorno; no asumas que el directorio actual es la skill. Trabaja en una copia del paquete por cada película, preservando la instalación reutilizable. npm run new -- --dir ../mi-pelicula crea docs/ (brief, style guide, shotlist md/json, spec de morph, review log), refs/, assets/, audio/ y out/ sin sobrescribir; usa una carpeta/sesión por marca.

Contrato de producción

1. Recopila solo las entradas que faltan: tema/producto, objetivo, duración, formatos, marca, referencia, pista/narración, presupuesto y entregables. Aprovecha lo que ya se ha proporcionado. Registra suposiciones reversibles.
2. Analiza la referencia antes de animar. Ejecuta npm run analyze -- --input VIDEO --fps 4 --out out/reference. Abre los fotogramas. Registra estilo, takes, ritmo, máscaras, continuidad y audio; diferencia observación, hipótesis y medición. Para sincronización exacta, mira fotogramas consecutivos en el original.
3. Escribe docs/style_guide.md y docs/shotlist.md con inicio/fin, mensaje, objeto dominante, entrada, hold, salida, continuidad, cámara y cue sonoro. Usa assets/brief-template.md. Preséntalos para decisión creativa cuando sea necesario. El artículo contiene prompts que piden aprobación: nunca asumas aprobación por el silencio. Cuando ya haya autorización para el trabajo completo, avanza en las acciones locales reversibles. 3b. Convierte docs/shotlist.json en plano sobre la cuadrícula: npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --duration 24 --out out/cues.json. Señala shots fuera del beat, lagunas >4 s sin novedad y genera cues para sfx. Muestra el resultado antes de escribir animación.
4. Mide la pista existente con scripts/beats.py; confirma compás y downbeat. Si no hay música, sintetiza una original con npm run audio. Sincroniza la narrativa con la voz y usa la cuadrícula como apoyo; no cortes palabras solo para caer en un beat. 4b. Antes de renderizar cualquier página nueva, ejecuta npm run lint -- --input CARPETA: detecta Math.random, reloj, timers, requestAnimationFrame, transiciones CSS, will-change, glow y ausencia de window.seek. Los errores bloquean el render.
5. Construye keyframes y animatic antes del acabado. Usa el motor A (assets/starter/) por defecto. Elige Remotion/HyperFrames solo si la necesidad lo justifica: la arquitectura de rutas está en references/production.md. No instales todos los motores por costumbre.
6. Haz al menos tres rondas documentadas de revisión en docs/review_log.md: 3–5 stills por take, contactos por beat, prueba en 360 px y rango de fotogramas en las transiciones. En cada ronda, registra los tres problemas principales con timestamps, corrígelos y revisa de nuevo. Evalúa gancho, legibilidad, movimiento, variedad, composición, marca y sincronismo del 1 al 10. Objetivo: todos ≥8, con evidencia; no inventes notas cuando no puedas ver/escuchar.
7. Renderiza el master, mezcla audio, ejecuta qa y prepara review. Reevalúa el MP4 codificado, no solo el canvas. Para cada proporción, recompón el layout; no recortes el vídeo horizontal para crear retrato.
8. Entrega MP4, poster, contact sheets de toda la duración, fuente, briefing, lista de assets/créditos y limitaciones. Genera prueba de empalme solo si la película necesita loop. Di qué se probó y qué aún depende de revisión humana. La publicación, los servicios de pago y las subidas requieren autorización específica del usuario.

Reglas del motor y del lenguaje visual

• window.seek(t) debe pintar el fotograma completo de forma determinista. Sin estado entre fotogramas, reloj real, Math.random, timers, CSS transitions o requestAnimationFrame en la ruta de render. Recrea PRNG por seed en el draw o indexa el ruido por tiempo.
• Espera fuentes y assets antes del primer fotograma. Usa canvas en resolución de salida, deviceScaleFactor:1, y datos locales. No uses will-change en texto ampliado por la cámara.
• Usa muelles analíticos; para múltiples objetivos, suma respuestas a escalones mediante track. Tipografía: sin overshoot perceptible; UI: discreto; mascota: expresivo si la dirección lo permite. Las constantes y helpers están en scripts/motion.mjs.
• Dirección del artículo: evita título central sobre gradiente, todo entrando por fade, etiquetas decorativas en las esquinas, marcos, glow en UI y partículas genéricas. Una fuente display, una de UI y un acento, salvo dirección diferente. El rojo semántico de gasto en la referencia es una excepción funcional.
• Haz algo narrativamente nuevo cada 2–4 s; en película larga, un payoff cada 3–5 s. Gancho en los primeros 2 s. No confundas novedad con agitación continua.
• Conserva objetos entre escenas: grande → pequeño → ancla periférica → retomada. El texto en morph entra después del inicio de la transformación y sale antes de la siguiente. El cursor y el clic deben corresponder a una acción real.
• Usa pantallas y datos reales para productos existentes. No inventes métricas, testimonios o funcionalidades. Para conceptos, declara explícitamente que la UI es ficticia.
• Para loop, exige continuidad de imagen, posición, velocidad y audio. t % duración solo repite el reloj: prueba el empalme y haz que los estados converjan.
• Master de referencia del artículo: 60 fps, cuatro subframes por frame, H.264 yuv420p, CRF 16. --fps 30 --sub 1 --scale 0.5 es un animatic económico, no ese master.
• Audio: objetivo −14 LUFS integrados; preserva headroom (pico verdadero objetivo −1,5 dBTP en este paquete). Mide después de la mezcla y la codificación. El archivo de música proporcionado permanece original; trabaja en copia para mezcla.

Scripts listos

Consulta todos los parámetros y ejemplos en scripts.md. No reescribas helpers que ya existen.

npm ci --ignore-scripts
npx playwright install chromium
npm run doctor
npm test
npm run new -- --dir ../mi-pelicula
npm run gather -- --url https://producto.com --out assets/brand
npm run lint -- --input assets/starter
npm run shotlist -- --shotlist docs/shotlist.json --beats out/beats.json --out out/cues.json
npm run audio -- --duration 24 --bpm 120
npm run sfx -- --cues assets/starter/cues.json --duration 24
npm run mix -- --music out/score.wav --sfx out/sfx.wav --duration 24
npm run stills -- --format 16:9 --out out/stills
npm run render -- --format 16:9 --audio out/mix.wav --out out/final.mp4
npm run qa -- --input out/final.mp4 --duration 24 --require-audio
npm run review -- --input out/final.mp4 --out out/review

El renderer solo abre assets locales mediante loopback y bloquea la red externa en el navegador. Esto no hace que el código externo sea confiable: lee el código antes de ejecutarlo y respeta los permisos del entorno. No imprimas claves ni incorpores .env al proyecto compartido. El paquete básico funciona sin API ni créditos de pago.