Communitygithub.com

Motion Edits

Crea videos de gráficos en movimiento de alta calidad, videos explicativos y ediciones cortas (Reels/Shorts/TikTok/YouTube) como MP4 renderizados en cualquier proporción de aspecto, usando un motor Remotion basado en el análisis cuadro por cuadro de 82 ediciones profesionales.

¿Qué es Motion Edits?

Esta skill (habilidad) permite a agentes de IA como Claude Code producir videos de motion graphics y ediciones de footage de nivel profesional usando el motor Remotion. Se basa en un análisis cuadro por cuadro de 82 referencias profesionales para garantizar cortes precisos, sincronización palabra-a-palabra y transiciones pulidas. Soporta dos modalidades principales: gráficos en movimiento independientes (sin necesidad de footage, usando tipografías, recortes, mockups de UI, gráficos y partículas) y edición de footage donde los clips del usuario son la base. La skill también permite trabajar con voz en off, detección de beats, análisis de footage, creación de máscaras de sujetos y renderizado con acabado cinematográfico (grano y viñeta). El usuario puede especificar cualquier proporción de aspecto (9:16 por defecto, 16:9, 1:1, 4:5, etc.) y la skill genera videos MP4 listos para publicar en plataformas como TikTok, YouTube Shorts, Reels o YouTube.

Compatible con~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/highontrading/motion-edits-skill/tree/HEAD

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

Documentación

¿Qué hace Motion Edits?

Esta skill produce videos de motion premium acabados. Funciona a partir de cuatro elementos:

  • reglas y números medidos cuadro por cuadro a partir de 82 ediciones de referencia (references/)
  • 12 familias de estilos para elegir y combinar (references/styles/)
  • un motor Remotion (remotion/) que renderiza un VideoSpec en JSON: una escena por cláusula, easing medido, cortes con momentum, tipografía sincronizada con palabras, texturas procedurales y un acabado cinematográfico
  • herramientas para voz en off, beats, análisis de footage, recortes, máscaras, renderizado y QA (tools/)

Dos modos, que se pueden mezclar en un mismo video:

  • Gráficos en movimiento independientes: no se necesita footage. Tipografías, recortes, mockups de UI, gráficos, contadores, partículas y texturas lo sostienen.
  • Edición de footage: los clips del usuario son la columna vertebral. Aprieta, acerca, añade subtítulos, inserta palabras clave y tarjetas de material de archivo, coloca texto detrás del sujeto, etalonaje, añade transiciones.

Cualquier proporción de aspecto: establece width/height en el spec (por defecto 9:16 1080×1920; 16:9, 1:1, 4:5 y otras funcionan).

Leer primero

  1. references/playbook.md: las reglas. Léelo cada vez.
  2. references/engine-spec.md: cada campo del spec, capa, transición y comando de renderizado. Léelo antes de escribir un spec.
  3. references/styles/README.md: elige una familia de estilos, luego lee el archivo de esa familia (su ejemplo de spec es un buen punto de partida).

Lecturas profundas, cuando una decisión lo requiera:

  • script-structure.md: plantillas de género, ganchos, reglas cláusula → escena → accesorio, ejemplos resueltos
  • motion-language.md: easing, fotogramas por segundo, ritmo, números de sincronización
  • transitions.md: 63 transiciones con conteo de fotogramas y cómo construir cada una
  • typography-color.md: clases tipográficas, combinaciones, tamaños, zonas seguras, paletas, cantidades de acabado
  • sound-design.md: fondo, ducking, colocación de SFX, sincronización con el beat, ediciones solo con música
  • footage-editing.md: modos de integración, acercamientos, montaje, subtítulos, dos specs de footage resueltos
  • engine-gaps.md: lo que el motor aún no puede hacer, y soluciones alternativas
  • breakdowns/vNN.md + breakdowns/_TAXONOMY.md: evidencia plano por plano. Busca por etiqueta para un precedente (grep -l "text-behind-subject" references/breakdowns/*.md).

Un ejemplo completo y resuelto (guión → VO de prueba → spec) está en remotion/src/specs/examples/zeigarnik.json (guión: work/zeigarnik.script.txt).

Flujo de trabajo

0. Configuración (una vez por entorno)

cd remotion && npm install
pip install faster-whisper librosa opencv-python-headless "rembg[cpu]" piper-tts pillow numpy

Se requiere ffmpeg. Si librosa falla con un segfault, establece NUMBA_CACHE_DIR=/tmp/numba_cache.

1. Brief

Obtén estos datos, o elige valores predeterminados sensatos sin estancarte:

  • tema o mensaje
  • plataforma y proporción de aspecto
  • duración (shorts: 20–45 s)
  • voz: el archivo de VO del usuario, un guión para locutar, o ninguno
  • footage o fotos
  • marca (paleta, fuentes, logo)
  • tono
  • cuántas versiones

Si el usuario solo da un tema, escribe el guión tú mismo.

2. Guión → hoja de cláusulas

Usa script-structure.md. Gancho en la primera frase (8–15 palabras, impacto en las primeras 3 palabras) → planteamiento → giro → principio nombrado al 16–40% → prueba → moraleja antitética → CTA (último 10–14%, ≥2.5 s). Divídelo en cláusulas: una cláusula = una escena ≈ 6 palabras ≈ 2–2.8 s. Para cada cláusula, anota:

  • el accesorio o imagen literal para el sustantivo
  • la palabra clave: 1–3 palabras que se convierten en tipografía
  • un recurso: insignia, contador, UI, gráfico, garabato, intercambio, partículas
  • el corte hacia ella

3. Voz y sincronización

  • VO del usuario: python3 tools/transcribe.py vo.mp3 remotion/public/<proj>/vo.words.json
  • Sin VO aún: python3 tools/tts.py script.txt remotion/public/<proj>/vo.wav --speed 1.15 --words remotion/public/<proj>/vo.words.json da una voz de prueba offline. Informa al usuario que es un marcador de posición; su propio VO puede reemplazarlo después, ya que las referencias de palabras se re-sincronizan automáticamente cuando se vuelve a transcribir.
  • Guiado por música o sin VO: python3 tools/beats.py music.mp3 remotion/public/<proj>/beats.json, luego establece "beats" y usa referencias {beat|downbeat|onset: n} y snap.
  • Inicios de escena: {"word": "...", "offset": -0.06} en la primera palabra de cada cláusula. Las referencias de palabra de escena se resuelven en orden, pero usa una referencia multi-palabra ("por qué escribir") cuando la palabra también aparece justo antes. Las palabras clave usan sync o at: {word}.

4. Aspecto

Elige una familia de estilos (styles README). Luego fija:

  • paleta: colores de campo que rotan por escena, más 1–2 acentos con significados fijos
  • combinación tipográfica: una voz display pesada más una voz susurrada
  • animFps: 15 para collage/editorial, 12 para impresión rugosa, 0 para UI/3D/cinematográfico
  • acabado: grano + viñeta, más semitono para looks de impresión
  • una transición principal, repetida, más 1–3 tipos de apoyo

5. Assets

  • Footage:
    • python3 tools/analyze_footage.py clips/*.mp4 --out work/footage.json --sheets work/sheets, luego mira las hojas
    • tools/tighten.py elimina el aire muerto
    • tools/matte.py crea una máscara de sujeto para texto detrás del sujeto
  • Fotos: python3 tools/cutout.py photos/* --out remotion/public/<proj>/cutouts --trim, luego úsalas como image con cutout: true. Coloca la tipografía en un z más bajo que el recorte para esconderla detrás.
  • Sin assets: tipografía, fondos procedurales, mockups de UI, gráficos, contadores, formas, partículas y embed. Escribe un componente personalizado en remotion/src/custom/ solo cuando un objeto literal sea esencial.
  • Usa solo logotipos, imágenes, música y SFX que el usuario proporcione o para los que tenga derechos. Aprende técnicas; nunca copies la marca, los personajes, las tarjetas finales o los guiones de un creador.

6. Escribe el spec

Escribe work/<proj>.spec.json como {"spec": {...}}, comenzando desde el ejemplo de la familia elegida. Los assets van en remotion/public/<proj>/. Aplica la lista de verificación del playbook mientras escribes.

7. Vista previa, renderizado, revisión, corrección

  1. Primero los fotogramas fijos:
    cd remotion && npx remotion still src/index.ts MotionVideo /tmp/f.jpg --frame=N --props=../work/<proj>.spec.json --scale=0.4
    
    Haz uno por escena (fotograma a mitad de escena), colócalos en mosaico, mira y corrige desbordamiento, contraste, saturación y fotogramas vacíos.
  2. Renderiza:
    python3 tools/render.py work/<proj>.spec.json out/<proj>.mp4
    
    Añade --draft para una vista previa a media resolución. Aplica el acabado de grano y semitono en ffmpeg, que es mucho más rápido.
  3. Revisa:
    python3 tools/review_render.py out/<proj>.mp4 out/review/
    
    Lee las hojas de contacto y las tiras de corte. Verifica que los cortes caigan en los inicios de cláusula, que nada sea ilegible durante menos de 0.5 s, que ningún tramo muerto dure más de 1.5 s, y que nada se haya roto (capas en blanco, espacios negros, revelaciones de borde).
  4. Corrige y vuelve a renderizar. Entrega el MP4 con una breve lista de tomas y cualquier cosa que el usuario deba reemplazar (VO de prueba, assets de marcador de posición, música).

8. Versiones y series

  • Variaciones: mantén el guión y varía la familia de estilos, paleta, combinación tipográfica, transición principal, texturas y recurso de gancho. Renderiza cada una.
  • Series de canal: fija un kit (paleta, combinación tipográfica, acabado, insignia superpuesta, tarjeta CTA, 2–3 transiciones principales). Guárdalo en remotion/src/specs/kits/<channel>.json y comienza cada episodio desde él (ver kits/README.md).

Valores predeterminados en caso de duda

  • Formato: 1080×1920, 30 fps.
  • Estilo: halftone-poster-collage para explicativos, native-ui-explainer para negocios/tecnología, dark-product-promo para herramientas.
  • Movimiento: animFps 15, settle 1.10 (el predeterminado), escenas 1.2–2.8 s.
  • Tipografía: palabras clave en impact/bebas en tamaño 18–30, con una palabra susurrada serif-italic o script. Insignias stitched en un acento profundo.
  • Cortes: zoom como firma, cut simple para impacto, flash o invert para revelaciones, circle hacia el CTA.
  • Acabado y audio: grain 0.07, vignette 0.35. Música de fondo en musicVolume 0.3 con duckTo 0.12.

Skills relacionados