Cortometraje dibujado en código

anim-skill · Generación de animación de extremo a extremo

Entra un tema, sale un video. Las imágenes se dibujan completamente cuadro por cuadro mediante código (Remotion + React), sin depender de bibliotecas de素材, modelos de video generativo ni imágenes externas.

El estilo es un plugin, la voz es un plugin, el flujo es fijo. Añadir un nuevo estilo no cambia el proceso, cambiar el motor de voz no cambia el proceso.

---

Cuándo usarlo

• "Hazme un video explicativo sobre X"
• "Convierte este documento / plan de clase en un video"
• "Ponle narración a este video"
• "Rehazlo con el estilo X"
• "Revisa si este video tiene parpadeos o espacios vacíos"

No usar en: casos que requieran素材 de video real, locutor en persona, o renderizado 3D (para eso está Blender).

---

Entrada: dos modos, primero decidir

Modo	Condición de activación	Paso adicional
A · Basado en tema	El usuario solo da una palabra clave o frase	Primero hacer investigación (hechos, cifras, conceptos erróneos comunes), luego entrar en diseño
B · Basado en documento	El usuario ya ha proporcionado un documento temático (plan de clase, informe técnico, guión de PowerPoint)	Primero hacer refinamiento y corrección (completar datos, unificar términos, marcar párrafos no visualizables), luego entrar en diseño

Después de decidir, repite lo que vas a hacer antes de empezar: modo A/B, duración N segundos, qué estilo, para qué audiencia. Si de estas cuatro cosas hay dos que no están claras, pregunta. No adivines.

---

Seis fases (orden obligatorio, no se pueden saltar)

0 PREFLIGHT → 1 Contenido → 2 Guion gráfico → 3 Construcción → 4 Voz → 5 Control de calidad y entrega
                                    ↑                ↓
                                    └── Retrabajo ←──────┘

0 · PREFLIGHT (una vez, 2 minutos)

node <skill>/scripts/preflight.mjs

Verifica node / npm / ffmpeg / navegador; muestra los motores de voz disponibles en el equipo. Si falta alguno, indícalo claramente, no esperes a que falle el renderizado.

1 · Contenido (A investigación / B refinamiento)

Genera research.md: una frase de tesis, 3–6 hechos de apoyo, cifras con fuentes, errores comunes que deben evitarse, lo que la audiencia sabe y lo que no.

• Modo A: principalmente verificación. Cada cifra debe tener fuente; si no se encuentra, marca "pendiente de confirmar". No inventes.
• Modo B: basado en el original, solo complementa, no modifiques. Marca las frases del original que no se puedan visualizar (la animación solo puede dibujar acciones, comparaciones, cambios).

2 · Guion gráfico

Genera plan.md (formato en references/storyboard.md): una línea por plano: rango de fotogramas, imagen, primitiva de acción, subtítulo.

Criterios estrictos (si no se cumplen, reescribe):

• Cada plano tiene un protagonista, que ocupa al menos 1/3 de la altura del área de contenido (gráfico ≥170px, texto grande ≥96px y línea completa ≥300px)
• El protagonista entra en el 1.er o 2.do compás
• Solo tres tamaños: protagonista ≥170 / secundario 60–110 / explicativo 22–30
• Al menos 1 "momento culminante" en todo el video (frase tesis, presentación del protagonista, o payoff final; elige uno), no acumules decoración

3 · Construcción

node <skill>/scripts/scaffold.mjs <directorio-proyecto> --title "Título" --style <id-estilo>

Según el brief del estilo (styles/index.json), escribe src/scenes/*.tsx, encadenando escenas con <Series>.

Reglas de hierro (violarlas arruina el renderizado o hace que el video se rompa):

1. Todo se deriva de useCurrentFrame(). Prohibido Math.random(), Date.now(), contadores con setState. La aleatoriedad debe ser determinista: hash(seed) = fract(sin(seed*127.1+311.7)*43758.5453).
2. Cada interpolate() debe incluir {extrapolateLeft:'clamp', extrapolateRight:'clamp'}. Si falta uno, los fotogramas fuera del plano se dispararán.
3. Prohibido CSS transition / animation / @keyframes. Las animaciones solo con interpolate y spring.
4. No importes素材 externos ni dependencias pesadas (three.js / GSAP / imágenes). Para imágenes, dibuja SVG y degradados CSS.
5. Máximo 12 primitivas de desenfoque SVG por fotograma, máximo 15 elementos con filter: blur(). De lo contrario, el renderizado será 10 veces más lento.

4 · Voz (opcional)

node <skill>/scripts/srt.mjs <directorio-proyecto>            # Genera SRT a partir del guion gráfico
python <skill>/scripts/narrate.py <video> --provider edge|volc --voice <id>

• Se puede entregar sin voz (si el profesor explica en clase).
• Si hay voz, primero genera el SRT, luego sintetiza. La línea de tiempo se toma de los números de fotograma renderizados, no de estimaciones.
• El motor es un plugin, ver references/voice.md.

5 · Control de calidad y entrega

python <skill>/scripts/qc.py <video>          # Espacios vacíos / tamaño del protagonista
python <skill>/scripts/qc_flicker.py <video>  # Parpadeos / cortes bruscos

Dos criterios estrictos (ver references/qc.md):

• Espacio vacío: si el objeto más grande en el área de contenido mide <110px durante más de 45 fotogramas → defecto; <80px → bloqueante
• Parpadeo: si el brillo se desvía más de 6 de la mediana local (salto 0/1) → defecto

Lista de entrega: <slug>.mp4, <slug>.srt, plan.md, research.md, src/ (proyecto editable), README.md (cómo modificar, cómo volver a renderizar).

---

Plugin de estilo

styles/index.json incluye 15 estilos integrados. Cada uno es un breve ejecutable (color de fondo, color de tinta, siete colores, grosor de línea, vibración, brillo, textura, fuente, carácter, legibilidad de proyección, para qué es adecuado).

Modo de uso: --style neon / --style paper / --style crayon …

Añadir un nuevo estilo: añade una entrada en index.json + coloca un breve en styles/, sin necesidad de modificar el proceso, los scripts ni las plantillas. Ver el contrato de extensión en references/styles.md.

Experiencia para elegir estilo: primero filtra por "legibilidad de proyección" (si se ve desde atrás), luego por "carácter". Papel / Crayón son adecuados para niños pequeños, Neón / Minimalista para aulas con poca proyección.

---

Plugin de voz

Dos proveedores integrados:

Proveedor	Coste	Necesario	Notas
edge	Gratuito	Nada	Voz neuronal de Microsoft Azure, estilo locutor
volc	0.0003 yuanes/carácter	APPID + API Key	Voz Doubao, cercana a humana; las cuentas nuevas tienen saldo gratuito

Añadir nuevo motor: implementa synthesize(text, voice) -> mp3 bytes y regístralo en scripts/tts/<provider>.py; narrate.py no necesita cambios. Ver references/voice.md.

---

Autocomprobación antes de entregar (marca cada punto)

• remotion render código de salida 0, ffprobe número de fotogramas = número de fotogramas diseñado
• qc.py sin elementos bloqueantes; qc_flicker.py sin picos excepto cortes de capítulo
• Todos los interpolate incluyen clamp (grep -c "interpolate(" = grep -c "extrapolateLeft")
• Sin Math.random / Date.now / CSS animation
• Subtítulos coinciden con las imágenes (verificar 3 fotogramas de compás)
• La fuente china existe en el equipo local (de lo contrario, aparecen cuadrados en el renderizado)

---

Referencia rápida

node scripts/preflight.mjs
node scripts/scaffold.mjs ./videos/mi-pelicula --title "Título" --style paper --seconds 20
cd videos/mi-pelicula && npm install
node <skill>/scripts/render.mjs . main out/mi-pelicula.mp4
node <skill>/scripts/srt.mjs .
python <skill>/scripts/narrate.py out/mi-pelicula.mp4 --provider volc --voice zh_female_cancan_uranus_bigtts
python <skill>/scripts/qc.py out/mi-pelicula-volc.mp4

Detalles en references/: pipeline.md (despliegue por fase), storyboard.md (plantilla de guion gráfico), styles.md (catálogo de estilos y extensión), voice.md (voz y extensión), qc.md (criterios de control de calidad), render-env.md (problemas de entorno: sandbox de Windows, TEMP, ruta del navegador, parámetros de ffmpeg).