xiaoxiao8096/code-motion-video-skill

Especificación para producción de videos animados con código puro

Gráficos, animaciones, transiciones, música, efectos de sonido, diseño y tipografía: todo generado exclusivamente mediante código. No se utilizan modelos de generación de video ni muestras o música generadas por IA. Cada fase produce un entregable que se muestra al cliente o stakeholder para su aprobación antes de continuar.

Stack recomendado: Remotion (React) para gráficos, Python + NumPy/SciPy para síntesis de audio, FFmpeg para composición final. Puede sustituirse por Motion Canvas, Revideo, Manim, HyperFrames, etc.; el flujo permanece igual.

1. Definición de requisitos

• Protagonista: producto, marca, persona, evento. Audiencia objetivo. Nombres o elementos permitidos/no permitidos. Si no se especifica, redactar como si se hablara a "cualquier espectador".
• Duración (habitual 15–60 s), relación de aspecto (horizontal 1920×1080, vertical 1080×1920 o cuadrado), fotogramas por segundo (recomendado 60 fps para versión final), canales de publicación.
• Leer el material oficial del protagonista (web, comunicados, documentación). Extraer citas textuales: cómo se describe a sí mismo, argumentos de venta clave, tono de voz. Los hechos del video solo pueden provenir de estas fuentes.

2. Investigación de referencias open-source

Cada referencia debe verificarse realmente existente. Registrar dirección, licencia y valor de referencia. No listar referencias no verificadas. Categorías habituales:

• Frameworks de video y sus repositorios de ejemplo: Remotion, Motion Canvas, Revideo, Manim, HyperFrames, theatre.js, GSAP, Lottie.
• Sistemas de diseño y paletas de colores: Radix Colors, Open Color, Tailwind, Catppuccin, IBM Carbon, Primer, Geist, awesome-design-systems.
• Fondos con gradientes y shaders: shadergradient, whatamesh, three.js.
• Animación: Motion, react-spring, anime.js, awesome-creative-coding.
• Audio: Tone.js, jsfxr, ZzFX, tonal.
• Tipografía: solo usar licencias que permitan uso comercial (p. ej. SIL OFL). Para chino: Noto Sans SC, Noto Serif SC, Smiley Sans (solo cursiva, apta para títulos), LXGW WenKai. Para occidente: Inter, Space Grotesk, Unbounded, JetBrains Mono.
• Iconos: Lucide, Tabler, Phosphor.
• Guías de estilo de redacción: chinese-copywriting-guidelines, Humanizer-zh, humanizer, stop-slop.
• Logotipos o assets especificados: localizar archivos originales, verificar licencia y si son marcas registradas. Los logotipos sin autorización solo se usan en vistas previas internas; antes de publicar se debe obtener permiso.

3. Redacción del plan (sin renderizar aún)

• Frase temática y tono general.
• Línea de tiempo unificada: definir un BPM (ej. 120 BPM, 2 segundos por compás). Cada punto de corte cae en línea de compás o en el pulso. Registrar tiempos usando el número de fotograma de la tasa oficial (ej. 60 fps). Escribir en timeline.json. Las pistas de video y audio comparten estos datos.
• Storyboard por escenas: código de tiempo e intervalo de fotogramas, texto en pantalla, descripción visual, animación (curvas de easing o parámetros de resorte), sonido.
• Tabla de transiciones: cada transición diseñada individualmente, incluida apertura y cierre. Especificar técnica (cortinilla con máscara, morph, match cut, avance de cámara atravesando, elemento compartido ampliado, cortinilla de color, volteo, etc.), intervalo de fotogramas, easing, elementos que se arrastran a la siguiente escena, efecto de sonido y tiempo de caída.
• Sistema visual: paleta de colores (hex), cuadrícula y márgenes, combinación tipográfica (tamaños, pesos), tratamiento de fondos.
• Música: tonalidad, progresión de acordes, estructura de secciones, método de síntesis para cada instrumento, correspondencia con puntos de corte.
• Lista de efectos de sonido: qué efectos se usan en cada escena y cómo se sintetizan.
• Fotogramas estáticos de estilo: generar 4 capturas de estilo con HTML + navegador headless. Además, 1–2 desgloses de transiciones (estados intermedios combinados en una línea).

4. Direcciones visuales alternativas

Cuando el estilo no esté definido o el cliente tenga objeciones, presentar 3–4 direcciones claramente diferenciadas (p. ej.: revista brillante, gradientes cálidos con cristal esmerilado, pop polícromo estilo sticker, retícula suiza, tecnología oscura). Cada dirección incluye: paleta, fondo, tipografía y fuentes de inspiración. Capturar un fotograma de la misma escena para cada dirección y montar una imagen comparativa para que el cliente elija. El storyboard y las transiciones permanecen igual; solo cambia el aspecto visual.

5. Producción

• Gráficos: usar fuentes locales, esperar a que carguen antes de renderizar. Todas las animaciones deben estar controladas por el número de fotograma; las animaciones SVG, CSS o JS que dependan del tiempo real del navegador deben reescribirse para calcularse por fotograma, de lo contrario el renderizado no es determinista.
• Animaciones: estilo enérgico: resortes con overshoot + squash & stretch. Estilo contenido: easing suave. El rebote del resorte puede producir valores de escala negativos; truncar.
• Audio: sintetizadores propios, p. ej.: pads con dientes de sierra desafinados, campanas FM, cuerdas pulsadas Karplus-Strong, bombo sinusoidal descendente, platillos y palmadas con ruido filtrado, compresión sidechain, reverberación. Efectos de sonido: ruido, barrido, resonancia. Se puede diseñar un "sonido de marca" de 2–3 notas para usarlo en cierre y final.
• Al escribir WAV: verificar profundidad de bits y normalización correcta; de lo contrario, el volumen puede diferir decenas de dB. Usar FFmpeg para unificar la sonoridad al valor objetivo (común en plataformas web: -14 LUFS) y dejar margen de pico.
• Composición: H.264 + AAC, activar faststart.
• Si la memoria es limitada: reducir el número de procesos de renderizado paralelos.

6. Previsualización

• Renderizar previsualización completa en baja resolución (p. ej. 960×540, 30 fps) con mezcla de audio final, para verificar ritmo y sincronía.
• Autocomprobación: usar ffprobe para verificar duración, fotogramas y pistas de audio. Extraer fotogramas a intervalos fijos y componer un contact sheet para revisar superposiciones, caracteres faltantes, "cuadrados" (tofu). Buscar en el código fuente para confirmar que no aparece contenido no deseado.
• Al entregar la previsualización, indicar riesgos conocidos, p. ej.: transiciones que puedan resultar demasiado rápidas, sonidos que solo se han verificado numéricamente sin escucha humana.

7. Eliminación de jerga de IA en el texto

• Eliminar estructuras como "no es... sino...", enumeraciones triples repetitivas, eslóganes vacíos, tono propagandístico, acumulación de sustantivos abstractos.
• Escribir escenas concretas con cifras específicas, ritmo coloquial, una idea por frase, duración que encaje en el compás.
• Insertar espacios entre caracteres chinos e ingleses, y entre chinos y números.
• Proporcionar tabla comparativa antes/después por escena.

8. Versión final

• Contenido idéntico a la previsualización aprobada, solo se mejora la calidad: ej. 1920×1080, 60 fps, CRF 16–18, yuv420p, AAC 320 kbps.
• Verificar con ffprobe las especificaciones, extraer fotogramas clave del video final para comprobar nitidez, revisar todos los problemas corregidos.
• Si el archivo es demasiado grande, generar una versión comprimida para compartir.
• Si se necesita, re-maquetar la misma línea de tiempo para exportar en vertical u otra relación de aspecto.

Estructura de archivos

project/
  plan_v*.md         # Plan (guardar nueva versión por iteración)
  frames*/           # Fotogramas de estilo y archivos HTML fuente
  fonts/  assets/
  timeline.json      # Línea de tiempo compartida por video y audio
  video/             # Proyecto de video
  audio/compose.py   # Script de síntesis de audio
  out/               # Previsualización, versión final, capturas