mr0ibrahim/motion-graphics

Estudio de gráficos en movimiento

Los videos se renderizan desde código: una página HTML con un seek(t) puro se captura fotograma a fotograma con Playwright y se codifica con ffmpeg. El texto, la interfaz de usuario, los gráficos, los diagramas y el movimiento siempre son código. Los modelos de IA proporcionan ilustraciones, placas filmadas y locuciones (references/ai-assets.md).

Etapas del proceso (nunca saltar; obtener aprobación en cada ✋)

1. Brief: objetivo, audiencia, plataforma/formato, duración, idioma + dialecto, CTA, marca, voz en off sí/no, datos. Elegir el género (references/genres.md); establece la estructura, el preset de energía y el gancho.
2. Conceptos ✋: tres ideas genuinamente diferentes, cada una con una línea más su gancho. El usuario elige una.
3. Guion + storyboard ✋: una hoja de ritmo (un mensaje por escena, gancho ≤ 1.5 s), la biblia de estilo y los activos principales (GenerateImage → cut2.py). Construye las escenas como styleframes, luego node scripts/storyboard.mjs film.html storyboard/name --template templates/storyboard.html --title "…" genera html/png/pdf/json a partir de la propia película (references/storyboard.md). Nada se anima por completo hasta que el storyboard esté aprobado.
4. Animática ✋: node scripts/render.mjs film.html checks_layout.txt --check debe dar 0 problemas de diseño, 0 señales perdidas y 0 errores de página. Luego haz un borrador a 30 fps sin desenfoque (render_chunks.mjs film.html out_draft 30 1) con la mezcla de SFX, para revisión de tiempos.
5. Final: render_chunks.mjs film.html out 60 4 → sfx.mjs → mix.sh → export.sh → qa.sh en el master y en el archivo para redes sociales. Luego MIRA la hoja de contactos y la hoja de transiciones (references/render-qa.md). Solo revisiones acotadas después de esto: cambia solo lo que se pidió.

Reglas estrictas (cada una es una lección de un fracaso real)

1. El grano es estático: un mosaico con semilla dibujado una vez, nunca realeatorizado por fotograma. La prueba FLICKER del escaneo de vibración debe ser correcta.
2. Sin música por defecto: SFX sincronizados con el movimiento + VO. Música solo bajo petición y con licencia (references/sound.md).
3. Un solo sistema de movimiento: duraciones solo de los tokens ENERGY. Resortes z ≥ 0.78 (sobreimpulso ≤ 2 %), sin sacudidas, sin rebotes en texto, arcos para movimientos largos, un fundido encadenado en cada cambio de estado (references/motion-system.md).
4. Renderiza con el renderizador por fragmentos (render_chunks.mjs): un navegador nuevo por fragmento, reintentos y reanudación ejecutando el mismo comando. Nunca un solo proceso de renderizado largo para películas de más de ~20 s.
5. Transcribe correctamente: align.py (large-v3, pasadas con/sin VAD, pasadas de espacio, forzado al guion) → words.json. Nunca uses una sola pasada de whisper.
6. Los subtítulos pertenecen a su escena: se borran y empujan con ella y usan sus colores. Un elemento está al 80 % visible en la palabra hablada correspondiente (±2 fotogramas).
7. Estilo: ilustrado, personajes consistentes (una imagen de referencia → cada pose). Los explicativos técnicos usan visuales conceptuales (flujos, diagramas, tablas, comparaciones, líneas de tiempo) planificados por frase hablada, no imágenes decorativas de stock.
8. Dos exportaciones: el master a 60 fps + un archivo para teléfono/redes sociales a 30 fps. Envíalos como adjuntos. Un enlace de descarga directa, una subida o una publicación solo con la aprobación explícita del usuario.
9. Formato largo (3–10 min): planifica capítulos, recuento de escenas (≈ 1 por cada 4–7 s), un ciclo de variedad de ritmo y variedad visual, una página por capítulo (references/genres.md → Long-form).
10. Mantén el paquete dividido: scripts/, references/, templates/. No hagas crecer un solo archivo gigante.

También: el árabe se anima solo por palabras completas (references/arabic-rtl.md) · sin texto generado por IA en el fotograma · productos, precios y valoraciones ficticios etiquetados como MUESTRA · los hechos provienen solo del usuario · el héroe ocupa el 60–70 % del fotograma · ≥ 3 transiciones diferentes en un anuncio, nunca la misma dos veces seguidas (references/transitions.md) · sin silencio de más de 1 s.

Valores predeterminados (di lo que elegiste)

9:16 1080×1920 para redes sociales, 16:9 para web/YouTube · energía ad para anuncios y reels, explainer para explicativos con VO, calm para lujo/capítulos largos · master a 60 fps + social a 30 fps · −14 LUFS, pico verdadero ≤ −1.5 dBTP · SFX + VO, sin música · grano estático 0.06 · estilo plano ilustrado, un color de acento, Noto Kufi Arabic / Cairo + Figtree.

Configuración

Todas las rutas de scripts/, templates/ y references/ son relativas a la propia carpeta de esta skill (la carpeta que contiene este SKILL.md, donde sea que se haya instalado: .claude/skills/motion-graphics, .agents/skills/motion-graphics, ~/.cursor/skills/motion-graphics, …). Llama a eso $SKILL_DIR y ejecuta los scripts como node "$SKILL_DIR/scripts/render.mjs" … desde la carpeta del proyecto. Ejecuta npm i una vez dentro de $SKILL_DIR. npm i (Playwright), luego npx playwright install chromium una vez. También necesitas ffmpeg/ffprobe, Python 3 con numpy/scipy/pillow (QA, cut2), y pip install faster-whisper para align.py.

Ejemplos prácticos (en el repositorio de GitHub mr0ibrahim/motion bajo examples/, no copiados en la instalación): demo-ar/ (un anuncio de app de 13 s en árabe del Golfo: tipografía cinética RTL, personajes IA, paralaje, empuje de cámara, zoom/empuje/iris/dividido) · demo/ (un anuncio de muestra en inglés de 10.5 s).