¿Qué hace Motion Craft Pro · 动效工坊 Pro?

Gráficos animados programáticos. Alineados con la estética y hábitos de Claude Opus 5.5 al escribir código para piezas visuales: primero el storyboard, luego la locución, luego los fotogramas fijos, luego el render completo.

No es como Kling/Jimeng — esos videos generados por IA. La imagen se pinta fotograma a fotograma en Canvas mediante código.

Primero: ubicar el directorio del skill (siempre obligatorio)

engine.js / scenes.js / render.js / compose.py / tts.py / film.html / storyboard.json todos en el mismo directorio que este SKILL.md (plano, sin subcarpetas).

<directorio_skill> = ruta absoluta del directorio padre de este archivo.

# Autoverificación de ruta
python "<directorio_skill>/compose.py" --check

Prohibido usar rutas relativas como python scripts/compose.py — el entorno de revisión no las encontrará.

Dependencias

Dependencia	Uso
Node 18+	render.js
puppeteer-core	Controlar Chrome local
Chrome / Chromium	Renderizado
Python 3.9+	tts / compose
edge-tts	`pip install edge-tts`
FFmpeg completo	Composición (no usar la versión reducida de Playwright)

Estándares de calidad (para que sea "Pro")

Por defecto 1920×1080 (también compatible con 1440×1080 / 1080×1920 / 1080×1080)
Una cosa por pantalla; fundido obligatorio entre escenas; hold largo, entrada corta
Spring con ligero overshoot (damping≈16–18, prohibido el rebote excesivo en toda la pantalla)
Espacio en blanco: margen exterior ≥ 8% del lado corto; texto cuerpo en blanco cálido #f4f1ea, color de acento sobrio (por defecto bronce #c4a574)
Títulos con espaciado entre letras; diferencia de tamaños entre niveles ≥ 1.5×
Locución primero + exportar subtítulos con WordBoundary siempre que sea posible
Primero exportar ≥4 fotogramas fijos para revisión, luego renderizar la duración completa
renderFrame(t) es una función pura: prohibido Date.now() / Math.random()

Flujo de trabajo (estrictamente en orden)

1. Escribir el storyboard JSON (antes que cualquier código)

Copiar storyboard.json, completar según storyboard.schema.json:

meta: formato, duración, texto completo de la narración, voz
beats[]: id, start, end, type, copy, visual
Tipos de escena: TitleBeat / BulletReveal / StatCounter / CompareBars / QuoteCard / EndCard

Usar números, no adjetivos. Ejemplo: título 86px, entrada 0.9s, hold 2.2s — no escribir "que se vea grandioso".

2. TTS → Duración real → Reajustar la línea de tiempo

python "<directorio_skill>/tts.py" \
  --text-file narracion.txt \
  --out "<directorio_trabajo>/voice.mp3" \
  --voice es-ES-AlvaroNeural \
  --rate=-6% \
  --captions-json "<directorio_trabajo>/captions.json" \
  --captions-vtt "<directorio_trabajo>/captions.vtt"

Usar la duración real de voice.mp3 para ajustar beats[].start/end y meta.duration. No escribir primero los tiempos a ojo y luego añadir la locución.

Nota sobre subtítulos: Si Edge TTS devuelve WordBoundary se agrupa por palabra; actualmente la mayoría de voces en español solo tienen SentenceBoundary, el script divide por comas y puntos para crear VTT por frases.

3. Completar film.html (o basarse en la plantilla)

Referencias al mismo directorio: engine.js, scenes.js (no ../assets/)
Incrustar el storyboard en la página, o mantenerlo sincronizado con storyboard.json
Llamar a MCScenes.drawScene(...); la decoración lateral se puede escribir a mano, pero el contenido debe usar los componentes de escena

4. Revisión de fotogramas fijos (obligatorio)

Primero renderizar una muestra corta o arrastrar t en el navegador, o renderizar puntos clave a 1fps. Al menos revisar: inicio, mitad, datos/comparación, final.

Verificar: superposiciones, texto desbordado, oscuridad excesiva, alineación, legibilidad de subtítulos.

5. Renderizado completo

node "<directorio_skill>/render.js" \
  "<directorio_trabajo>/film.html" \
  "<directorio_trabajo>/frames" \
  30 \
  18

6. Composición

python "<directorio_skill>/compose.py" \
  --frames "<directorio_trabajo>/frames" \
  --voice-file "<directorio_trabajo>/voice.mp3" \
  --captions "<directorio_trabajo>/captions.vtt" \
  --out "<directorio_trabajo>/out.mp4" \
  --duration 18 \
  --width 1920 --height 1080

Opcional: --bgm music.mp3 (ducking de locución), --burn-captions, o --text para que compose integre TTS inline.

7. Leer qa-report.json + cuatro qa-stills

Si no pasa la revisión, modificar el storyboard/maquetación y re-renderizar — no entregar a la fuerza.

API del motor (engine.js)

const {
  Ease, spring, springSeg, seg, lerp, beatAlpha,
  glow, beam, drawBackdrop, createParticles, drawParticles,
  drawGrain, drawVignette, drawColorGrade,
  drawTracked, wrapCN, camera, transition, applyWipe,
  divider, card, ring, bars,
  drawCaptions, captionsFromWordBoundaries, layoutGrid, Palette
} = MC;

const { TitleBeat, BulletReveal, StatCounter, CompareBars, QuoteCard, EndCard, drawScene } = MCScenes;

Parámetros recomendados para Spring (estética Claude)

Uso	damping	stiffness	overshootClamping
Entrada de título	16–18	140–160	false (permitir ligero rebote)
Elementos de lista	18	145	true
Contador numérico	14	120	false

Formatos de pantalla

Uso	Tamaño
Horizontal por defecto	1920×1080
Diapositivas / 4:3	1440×1080
Vertical	1080×1920
Cuadrado	1080×1080

Usar layoutGrid(W,H) para obtener márgenes y columnas dobles.

Entregables

storyboard.json
film.html (renderizable de nuevo)
voice.mp3 + captions.vtt / captions.json
out.mp4 (calidad 1080p)
qa-report.json + qa-stills/*.png ≥ 4

Límites

Produce motion graphics, no imágenes reales, no video generado por difusión
No incluye 3D complejo / animación de personajes / fluidos
Edge TTS no es una voz humana real; su rango emocional es limitado
No incluye un proyecto completo de Remotion (ecosistema React, clúster de renderizado server-side); este paquete es un stack de dirección ligero listo para usar

Motion Craft Pro · 动效工坊 Pro

¿Qué es Motion Craft Pro · 动效工坊 Pro?

Preguntar en tu IA favorita

Documentación