Motion Studio

¿Qué hace Motion Studio?

Crea videos cortos (normalmente 9:16 1080×1920 reels, también 16:9 / 1:1 / 4:5) completamente en código.

• Imagen. Una página HTML (comp.html) cuyo window.renderAt(t) dibuja el fotograma exacto para el tiempo t.
• Captura. Chromium sin interfaz gráfica captura cada fotograma; ffmpeg los codifica.
• Sonido. Sintetizado en Python desde la misma línea de tiempo: música, efectos de sonido y ambiente, masterizado a −14 LUFS.
• 3D (opcional). Los planos provienen de un pequeño trazador de rutas por GPU (pt.js), con luz suave, reflejos reales, profundidad de campo y desenfoque de movimiento.

Todo lo que ve un espectador es una función pura de t. Eso es lo que hace que los renders sean repetibles, reanudables y con posibilidad de búsqueda.

Si la solicitud es editar, subtitular, comprimir o corregir el color de un video que ya existe, o crear diapositivas o una animación para un sitio web, di que esta habilidad no es la herramienta adecuada y ayuda directamente en su lugar. Un promo cortado a partir de material suministrado (un evento, un DJ, la fiesta del año pasado) SÍ está dentro del alcance: usa templates/footage/ y references/footage-promos.md.

Qué hay en esta habilidad

Ruta	Qué es	Léelo cuando
references/setup.md	Instalación única del estudio (Node, ffmpeg, Playwright, Python venv, verificación de GPU)	Primer uso en una máquina
references/render-pipeline.md	El contrato de renderizado, modos de render.mjs, renders por fragmentos, errores comunes de ffmpeg, determinismo, hojas de contacto	Al construir o renderizar cualquier película
references/design-rules.md	Reglas de narración, diseño, tipografía, movimiento y transiciones aprendidas de comentarios reales de clientes; auditorías	Antes del storyboard y antes de cada revisión
references/sound.md	Partitura impulsada por eventos + diseño de sonido, objetivos de mezcla, mediciones, acabado de volumen	Al trabajar con audio
references/path-tracer-3d.md	El trazador de rutas 3D: escenarios, materiales, luces, modelado de productos con dimensiones exactas, cámaras, cortes de continuidad, costos	Solo cuando la película necesita escenas 3D
references/claims-and-sources.md	Cómo obtener los datos correctos: fuentes oficiales, CLAIMS.md, qué no afirmar nunca, capturar sitios web de forma segura	Cualquier película con datos de producto, precios, especificaciones o una marca cliente
references/footage-promos.md	Promos de eventos / clubes / artistas cortados a partir de material suministrado: lo que pidieron los clientes, música con cuadrícula de ritmo, transiciones de DJ, encuadre de rostros, técnicas gráficas	Cualquier promo construido a partir de material real
templates/film/	Un reel 2D completo y funcional (15 s, tipografía cinética, tarjeta de producto, contador, gráfico, CTA) + scripts de render, sonido y finalización	Comienza cada película 2D desde aquí
templates/film-3d/	El trazador de rutas + ejemplos de escenarios (estudio, habitación, casa) + una película 3D funcional y herramientas de desarrollo visual	Comienza una película 3D desde aquí
templates/footage/	Flujo de trabajo para promos con material de archivo: lista de planos sobre la cuadrícula de ritmo (cortes, cuadrículas, divisiones, tiras, rampas, iris), encuadre de rostros, BPM/fase de kick/caídas medidos, transiciones de DJ, un conjunto de herramientas gráficas (máscaras de texto, texto detrás de personas, tickers, centrado óptico) + un ejemplo	Comienza cada promo con material de archivo desde aquí
scripts/setup_studio.ps1 / .sh	Crea una carpeta de estudio e instala todo (pregunta antes de descargar)	Primer uso
scripts/new_film.mjs	Copia una plantilla en <studio>/films/<name>	Cada nueva película

El flujo de trabajo

Sigue estos pasos en orden. Cada uno existe porque omitirlo una vez costó una revisión del cliente.

1. Briefing.
   • Obtén la duración, formato(s), fps (30 por defecto; 25 para editores PAL), idioma, CTA y dónde se publicará la película.
   • Pide archivos de la marca (logo SVG/PNG, fuentes, colores, publicaciones existentes). Sin ellos, lee la marca desde su sitio web.
   • Si la persona dice "a lo grande", confirma igualmente cualquier cosa que cambie el producto o las afirmaciones. El ritmo y el estilo son decisión tuya.
2. Investigación y datos (references/claims-and-sources.md).
   • Recopila cada número y afirmación de fuentes oficiales en CLAIMS.md antes de escribir cualquier texto.
   • Cuando dos fuentes estén en conflicto, omite el número y dilo. Una especificación incorrecta en un anuncio es peor que ninguna especificación.
3. Storyboard sobre una cuadrícula de ritmo.
   • Elige un BPM para que la duración sea un número entero de pulsos (ej. 30 s = 48 pulsos a 96 BPM; 15 s = 30 pulsos a 120 BPM).
   • Coloca cada cambio de escena, título y evento de sonido en esa cuadrícula (bar(n, beat) / bt(b)).
   • Escribe el storyboard como una tabla breve (pulso → imagen → texto → sonido) y compártelo antes de construir si la persona está disponible.
4. Andamiaje. Ejecuta node <skill>/scripts/new_film.mjs <studio> <name> [film|film-3d|footage], luego edita comp.html (2D), film.js + world.js + comp.html (3D), o sources.json + edit.json + comp.html (material de archivo; sigue references/footage-promos.md).
5. Construir en bucles pequeños. Renderiza hojas de contacto en baja calidad (node render.mjs beats 0.5,4,8,… 0.25 sheet) y míralas. Corrige, vuelve a hacer hoja. Nunca juzgues el movimiento a partir de un solo fotograma. Haz hoja de cada pulso (o medio pulso) en toda la película antes de cualquier render final.
6. Auditar (node render.mjs audit 0.25). El texto nunca debe superponerse al producto ni a otro texto, y debe permanecer dentro del área segura de la plataforma. Corrige cada incidencia; no discutas con la auditoría.
7. Sonido. Ejecuta python audio.py out/mix.wav out/stems, luego python check.py: sonoridad por sección, espectro, prueba de sirena/deslizamiento, clics.
8. Render final. Pregunta primero (ver "Etiqueta de renderizado").
   • Las películas 2D toman minutos: node make.mjs frames + encode.
   • Las películas 3D toman horas: node render.mjs chunks + concat.
9. Finalización. node make.mjs finish normaliza la sonoridad (−14 LUFS, −1.5 dBTP), multiplexa sobre la imagen (la imagen es el reloj maestro, nunca -shortest), y escribe una copia ligera -share. Verifica el conteo de fotogramas, duración y sonoridad en la salida.
10. Revisar el archivo final, no el comp. Extrae fotogramas del mp4 codificado (cada 0.5 s) en una hoja y mira cada uno. Luego entrega con una nota breve (rumano/inglés según el cliente): qué contiene, de dónde vienen los datos, qué debe confirmar el cliente.

Etiqueta de renderizado (el ordenador de la persona es suyo)

Un render 3D mantiene la GPU al 100% durante una hora o más y hace que la máquina sea lenta. Escribir cientos de imágenes de fotogramas también hace que Windows Defender reescanee cada archivo. Alguien una vez tuvo que gritar "para, me estás friendo el PC". Así que:

• Antes de cualquier trabajo que cargue la máquina durante más de unos minutos, di qué es, cuánto tiempo lleva y cómo se sentirá, luego espera un sí. Ofrece:
  • modo suave (NICE_MS=25 DUTY=.35): pausas entre pasadas de GPU, para que el escritorio siga siendo utilizable;
  • máxima velocidad;
  • más tarde / durante la noche.
• Prefiere render.mjs chunks (fragmentos mp4 de 1 segundo, reanudables) en lugar de escribir cada fotograma como PNG.
• Lanza los renders largos como procesos desatendidos, para que un chat cerrado no los mate a medio camino (Windows: Start-Process node -ArgumentList 'render.mjs','chunks' -WindowStyle Hidden).
• Cuando te digan que pares, para de inmediato. Mata el árbol de procesos (Windows: taskkill /T /F /PID …), confirma con una lista de procesos que no queda nada, y di qué sigue usando la máquina (ej. Defender escaneando archivos escritos) sin culpar a la persona.
• Las hojas cortas y los fotogramas de prueba únicos no necesitan permiso. Toman segundos.

No negociables (cada uno costó una revisión una vez)

• renderAt(t) es puro.
  • Sin estado entre fotogramas, sin Math.random() (usa mulberry32 con semilla), sin transiciones ni animaciones CSS, sin temporizadores.
  • node render.mjs verify renderiza fotogramas en orden y desorden; deben coincidir.
• Carga cada peso de fuente antes del fotograma 0 (document.fonts.load para cada familia usada). Una fuente usada a mitad de película se muestra invisible durante un fotograma.
• Nunca dejes que dos bloques de texto se superpongan, o que el texto cubra el producto.
  • Un título saliente desaparece antes de que el siguiente ocupe su lugar.
  • Los contadores cambian secuencialmente (viejo fuera, luego nuevo dentro); dos números superpuestos se ven mal.
• Los subtítulos permanecen en pantalla ≥ 1.5 s, ≤ 7 palabras cada uno, una idea por pulso. Haz que el fotograma 0 sea una miniatura legible.
• Nunca inventes un número, cliente, reseña o resultado. Muestra precios solo con una prueba fechada en pantalla, y solo con el visto bueno del cliente.
• El sonido es serio a menos que se pida lo contrario. Sin marimbas de juguete ni campanas para un producto tecnológico, y sin deslizamientos tonales continuos: el sonido de chispa de un reel fue llamado "una sirena del apocalipsis".
• Usa UI real y activos reales (recortes de Playwright del propio sitio del cliente a alto DPR). Nunca redibujes la UI o el logotipo de un cliente a mano. Nunca hagas clic en comprar, enviar o enviar en un sitio real.