Motion Reel Studio
Produce un proyecto de animación editable y una película verificada, no solo un prompt o una vista previa HTML. Adaptado del curso de Movez; la implementación y correcciones están documentadas en procedencia. Funciona con cualquier agente de codificación capaz; no se requiere ningún modelo, servicio de pago o habilidad externa en particular.
Alcance y decisiones iniciales
Lee el resumen del usuario y las instrucciones existentes del proyecto. Conserva el motor, la apariencia, la música y el formato solicitados. Si un proyecto ya usa Remotion o HyperFrames, extiéndelo; consulta las instrucciones/documentos actuales de ese framework. De lo contrario, usa el kit de inicio Canvas + Playwright + FFmpeg incluido. Los comandos a continuación son solo para esta ruta predeterminada.
Establece la URL del producto/sujeto, propósito, duración, relaciones de aspecto, referencia, activos de marca y sonido. Infiere las respuestas proporcionadas; pregunta solo por las entradas faltantes que sean consecuentes. Para un reel promocional abierto, elige y declara un concepto, 15 segundos, 1080×1920, 60 fps y audio sintetizado original. No inventes afirmaciones sobre el producto ni capturas de pantalla. Si no se dispone de activos reales del producto, recopílalos o etiqueta explícitamente una demo conceptual autorizada.
Crea la producción dentro de la ubicación de artefactos del usuario. En el repositorio X, usa posts/<slug>/ para una nueva película y mantén todos los activos allí. No instales archivos del proyecto en la raíz del repositorio. La habilidad permanece en el directorio de habilidades personal. Trabaja localmente sin gastos de API por defecto; un proveedor solicitado necesita herramientas disponibles, credenciales y un presupuesto autorizado. La publicación es una acción separada.
Flujo de trabajo de producción
- Referencia y activos. Inspecciona las imágenes proporcionadas. Para referencias de vídeo, extrae fotogramas cada 0.5-1 s e inspecciona el movimiento alrededor de los cortes. Captura los estados reales del producto con herramientas del navegador; conserva las URL de origen y las fechas de captura en
docs/assets.md. Descarga fuentes/imágenes localmente y espera la decodificación. Escribedocs/style-guide.md: paleta, tipografía, jerarquía espacial, ritmo de tomas, lenguaje de transición, cámara, textura, qué tomar prestado y qué evitar. Sin referencia, define explícitamente una dirección visual original. - Guion del director. Lee dirección para el modo solicitado. Escribe
docs/brief.mdydocs/shotlist.md; cada toma tiene un propósito, fotograma de inicio/fin, texto exacto, estado visual, cámara, transición, señal de sonido y activo. Usa una sola línea de tiempo para imagen y audio. Muestra un plan conciso y procede dentro de la solicitud autorizada. Espera solo si el usuario pidió un plan/gate de aprobación; el silencio nunca proporciona esa aprobación. - Sonido y beats. Lee audio y ejecución. Analiza la música proporcionada o sintetiza una partitura; guarda
beats.jsonycues.json. Un detector de beats no establece los tiempos fuertes del compás. Etiqueta las estimaciones y confirma el primer tiempo fuerte antes de diseñar acciones a nivel de compás. Mantén intacta una solicitud de pista sin cambios; no estires ni normalices esa fuente sin permiso. - Fotogramas estáticos y animática. Construye composiciones hero y muestra cada toma antes de pulir el movimiento. Renderiza una animática de baja resolución en la misma relación de aspecto, con la cuadrícula de beats prevista. Inspecciona su ritmo y legibilidad en teléfono. Para películas largas, mantén una biblia de personajes y contratos de temporización de capítulos antes de implementar los capítulos. No delegues a menos que esté autorizado de forma independiente.
- Animación. Implementa
window.seek(t)como una asignación pura de tiempo a fotograma. Usa pistas de muelle (spring) en forma cerrada; inicializa y reinicia la aleatoriedad procedural por fotograma, o deriva el ruido del tiempo y la identidad del elemento. Sin integración persistente, temporizadores, transiciones CSS ni muestreo de reloj de pared en modo de renderizado. La disponibilidad de activos locales pertenece awindow.ready. Toma decisiones de composición responsivas para cada relación de aspecto; no recortes un final ancho en vertical. - Crítica y corrección. Lee revisión. Inspecciona hojas de contacto, fotogramas consecutivos alrededor de movimientos rápidos y la reproducción real si hay una herramienta de reproducción disponible. Corrige hasta tres defectos de mayor impacto por ronda y vuelve a renderizar los rangos afectados. Usa hasta tres rondas enfocadas por defecto; detente cuando se cumpla el resumen y no quede ningún problema material, o informa de un bloqueador concreto. Nunca aumentes las auto-puntuaciones para forzar una aprobación. Los fotogramas fijos no pueden verificar el audio ni la reproducción del movimiento.
- Final y entrega. Renderiza las resoluciones solicitadas, mezcla audio, crea hojas de QA y verifica los metadatos del flujo, duración, número de fotogramas y decodificación completa. Entrega
out/final.mp4, póster, hojas de contacto, fuente, un comando reproducible y limitaciones restantes concisas. Incluyeout/loop-check.mp4solo si se solicitó un bucle. La copia pública sigue las reglas de escritura del proyecto y el pase humanizador final cuando esté disponible.
Cadena de herramientas incluida
Lee ejecución antes de ejecutarla. Reemplaza <skill> con el directorio de este SKILL.md y <project> con el directorio de la película elegida.
python3 <skill>/scripts/init_project.py <project>
cd <project>
npm install
npx playwright install chromium
node render.mjs --width 360 --height 640 --fps 30 --out out/animatic.mp4
python3 audio.py synth --duration 15 --bpm 120 --out out/score.wav --beats beats.json
python3 audio.py sfx --duration 15 --cues cues.json --out out/sfx.wav
node render.mjs --width 1080 --height 1920 --fps 60 --sub 4 --out out/silent.mp4
python3 finish.py mix --video out/silent.mp4 --music out/score.wav --sfx out/sfx.wav --out out/final.mp4
python3 finish.py qa --video out/final.mp4 --out out/qa --expected-duration 15 --expected-width 1080 --expected-height 1920 --expected-fps 60 --require-audio
El kit de inicio es una animación de prueba abstracta completa, no el entregable creativo. Reemplaza sus escenas, texto, partitura y señales con el resumen. motion.mjs proporciona muelles subamortiguados, críticamente amortiguados y sobreamortiguados correctos, pistas multiobjetivo, opacidad de intercambio de texto y ruido con semilla. render.mjs proporciona renderizado por rangos, desenfoque de subfotograma, servidor HTTP local, comprobaciones de preparación y comprobaciones de determinismo no secuencial. audio.py proporciona una partitura determinista, efectos de sonido y análisis de música opcional. finish.py proporciona una mezcla de sonoridad de dos pasos, hojas de contacto paginadas para toda la película, hojas para teléfono, tiras de acción, copias en bucle y comprobaciones técnicas.
Invariantes de calidad
- El contenido debe seguir siendo comprensible sin sonido; el sonido debe reforzar eventos de movimiento reales.
- Evita la plantilla genérica de título centrado/gradiente/desvanecimiento a menos que se solicite. Prefiere una composición concreta y una transformación visible; “nuevo cada 2-4 s” es una heurística de ritmo para formatos cortos, no una regla para cada película.
- Los muelles expresan masa; elige la amortiguación para el material. No hagas rebotar cada etiqueta ni reemplaces el movimiento lineal/periódico intencional con muelles.
- El texto entra después de que un contenedor comienza a cambiar y sale antes de que llegue contenido incompatible. Mantén los glifos nítidos a la escala final y prueba a 360 px de ancho.
- El tiempo módulo no hace que una costura sea continua. Iguala la posición, velocidad, visibilidad y sonido del final y el inicio; inspecciona la reproducción unida.
- Mantén la separación entre la determinismo del software/fotograma y la calidad estética. Un fotograma incorrecto reproducible sigue siendo un fotograma incorrecto.