Communitygithub.com

Iwang-f/motion-reel

Crea un video de movimiento renderizado desde código en este estudio (canvas + window.seek(t), Playwright, ffmpeg, sonido sintetizado). Úsalo cuando el usuario pida un video de lanzamiento, showreel, Reels, contenido para TikTok o Historias, animación explicativa o anuncio en movimiento, entregue un borrador o carrusel para convertir en video, o quiera 'una nueva película' en el repositorio del estudio de movimiento; `/motion-reel build <film>` construye una película cuyo storyboard está aprobado.

¿Qué es motion-reel?

Motion Reel es un skill especializado para construir películas animadas y videos de movimiento de alta calidad, ejecutándose dentro de su propio motor de renderizado basado en canvas y la función `seek(t)`. Su propósito principal es permitir la creación de contenido visual dinámico como lanzamientos, reels, contenido para TikTok, Historias, animaciones explicativas y anuncios en movimiento, partiendo de un borrador, un carrusel o una solicitud directa. El skill soporta una metodología de dos sesiones: pre-producción y construcción, donde la pre-producción define el brief, la historia, los activos, la voz en off, la cuadrícula de ritmo, la lista de tomas y el storyboard, mientras que la construcción se encarga de la implementación técnica del código. Está diseñado para plataformas como Claude Code, Cursor y Codex, y su flujo de trabajo incluye herramientas de línea de comandos para gestionar el brief, la voz, el ritmo y la revisión, con reglas estrictas sobre la función pura del tiempo, la gestión de contexto y la separación por marcas.

Compatible con✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/Iwang-f/motion-reel-skill/tree/HEAD/.claude/skills/motion-reel

Preguntar en tu IA favorita

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

Documentación

Motion reel

Construye una nueva película en el motor propio de este repositorio. No cambies a Remotion o HyperFrames a menos que el usuario los nombre explícitamente; el contrato de renderizado del repositorio está en CLAUDE.md y prevalece sobre este archivo.

Una película se ejecuta en dos sesiones, separadas por el único visto bueno del propietario sobre la lista de tomas y el storyboard:

  • Pre-producción (este archivo): brief, historia, activos, voz, cuadrícula de ritmo, lista de tomas, storyboard.
  • Construcción (/motion-reel build <film>): lee build.md y síguelo; omite este archivo.

El corte mantiene la construcción en un contexto nuevo. La pre-producción llena la ventana con referencias, tomas e imágenes del storyboard, y cada turno posterior paga por todo ello.

1. Definir el brief

Ejecuta node tools/brief.mjs --in=<draft.md> sobre el borrador del propietario (--film=<film> una vez que el proyecto exista: escribe brief/original.md sin el base64 incrustado). Imprime el encabezado, las palabras del VO contra el presupuesto y lo que el borrador deja abierto. Sin borrador, rellena los campos de encabezado de docs/brief-template.md a partir de la solicitud y propón un valor predeterminado para cada vacío: el propietario responde con un "oke" o una corrección.

Pregunta qué sigue abierto en un solo mensaje, antes de tocar código y antes de citar créditos; las respuestas ya en brief/decisions.md se mantienen. Añade lo que la herramienta no puede ver:

  • Superposición: una película pasada sobre el mismo tema o pilar (projects.json). Di cuál y qué añade esta. Una nueva versión deja la carpeta antigua intacta y pregunta qué respuestas de su decisions.md siguen vigentes.
  • Producto + URL (o tema). Para películas de OpenView, el pilar y la fórmula de docs/content-map.md.
  • Marca: las películas de OpenView usan lib/brand.js. Otras marcas: colores, fuentes, un acento, logotipo real.
  • Una referencia: fotograma, video o carpeta de imágenes. O "ninguna" (entonces dilo; sin apariencia predeterminada).
  • Música: una pista suministrada (mídela) o "sintetizar" (predeterminado).
  • Voz en off: necesita ELEVENLABS_API_KEY en .env. Si está vacío, detente y nombra la variable.

El brief está definido cuando el idioma, la voz, la duración, la relación de aspecto, el tema (incluidos los tickers), la fuente de datos (aplicación, kit o ilustración) y la energía están fijos. Cada uno de estos se movió después de la primera toma en una película pasada, y mi-demo-40 pagó su VO tres veces. Registra las respuestas en <project>/brief/decisions.md.

Un paquete de otra herramienta (storyboard, zip, entrega): cópialo intacto a <project>/references/<tool>-<date>/, que queda fuera del commit, y ejecuta tools/brief.mjs solo sobre su brief. Abre otro de sus archivos solo cuando una decisión necesite ese archivo. Su lista de tomas y guion son material, como el orden de un borrador.

Límites: palabras, figuras o hechos que el brief o las reglas legales excluyen de la pantalla van en <src>/forbid.json (tools/forbid-lib.mjs): tools/vo.mjs los rechaza antes de gastar créditos, tools/check.mjs falla si aparecen en pantalla. Un límite que ningún patrón puede ver (un nombre que nunca lleva un porcentaje) va en brief/decisions.md, leído contra cada storyboard y hoja de revisión.

Elige un slug de película ([a-z0-9-]+). Todo lo siguiente se nombra por él: <film>.

Estructura del proyecto. Una nueva película obtiene su carpeta de proyecto CONTENT (CLAUDE.md "Carpetas de nuevo proyecto de video") y una línea "<film>": "CONTENT/<n>. <Título> (<fecha>)" en projects.json; luego las herramientas lo encuentran allí (tools/paths.mjs): lista de tomas y brief en <project>/brief/ (shotlist.md), código en <project>/src/ (film.js, timeline.js, vo-lines.json, beats.json, sfx-<film>.mjs), tomas y medios en <project>/assets/, storyboards, hojas y renders en <project>/output/. Las películas más antiguas mantienen docs/<film>-shotlist.md, film/<film>/, assets/<film>/ y out/. A continuación, <shotlist>, <src>, <assets> y <output> significan lo que corresponda.

2. Pre-producción

  1. Activos. En <assets>/, listados antes de cualquier animación.

    • Logotipo y símbolo de OpenView: dibujados solo a través de lib/brand.js; nunca copies los SVG en la película.
    • Mascota de OpenView: el rig de código en lib/mascot/ (API en el encabezado y exportaciones de lib/mascot/index.js).
    • OpenView Market Intel: figuras y nombres de la última versión origin/main, la imagen dibujada en código con el kit de UI de Market Intel. Captura la aplicación en ejecución solo cuando el brief pida la aplicación real; entonces sigue "Fuente de Market Intel" en CLAUDE.md; elige bandas de capture_mi.mjs --review y dibuja con lib/proof.js.
    • Otro producto con una URL: captura capturas de pantalla reales, logotipo, colores, fuentes con Playwright.
  2. Mundo visual. Lee REFERENCES/motion/visual-grammar-2026-10.md, luego escribe ## Mundo al inicio de <shotlist> antes de cualquier toma: un lugar, sus objetos, quién está en él, qué hace la luz, y cómo cada figura y relación en el brief se convierte en algo que se pueda señalar. Dibújalo con lib/world.js. El sistema de diseño se mantiene en las pantallas propias del producto. Guía de estilo. Si existe una referencia, mídela primero: uv run --python 3.11 --with librosa --with numpy tools/ref_probe.py refs/<film>/ref.mp4 refs/<film>/analysis.json luego escribe docs/<film>-style_guide.md: paleta (hex), tipo, duraciones de tomas, transiciones, movimientos de cámara, textura, cómo el texto entra y sale. Toma la gramática, nunca el contenido. El aspecto de la casa es CLAUDE.md "Aspecto" más docs/motion-vocab.md; las guías de estilo de otras películas registran esas películas, no la casa.

  3. Historia. Lee story.md, pasa el tema por su escalera de temas, y escribe su tabla de espina dorsal al inicio de <shotlist>, antes de cualquier guion. La espina dorsal está lista cuando cada fila está llena y las pruebas del guion al final de ese archivo pasan en la primera línea y el esquema; el orden del borrador es material aquí, no un guion, y un borrador ALUR CERITA y KANDIDAT HOOK (docs/brief-prompt.md) son su primera versión. Muestra la espina dorsal con la cita del VO: es el momento más barato para cambiar la película. A partir de un borrador, el mismo mensaje nombra lo que el borrador cubre y el guion descarta, con ambos recuentos de palabras: pandu-supra-80 volvió como "ga selengkap draft" después de su primera película, y la extensión tomó tres sesiones más.

  4. Voz en off (si el brief tiene VO): sigue "Voz en off" en CLAUDE.md. Escribe el guion desde la espina dorsal en la voz de investigador (story.md "El espectador"), hasta el presupuesto de palabras, contando las figuras a medida que se pronuncian: su 1,7 indonesio es lo que seis películas ejecutaron a 1,12 (1,65–1,75 palabras por segundo de película), por lo que un presupuesto completo aterriza cerca de los segundos del brief. character por defecto es narrador tranquilo y justo, hablando a una persona. Luego <src>/vo-lines.json y la última sección de story.md, hasta que tools/script.mjs pase; su línea de credits es la cita. Genera con tools/vo.mjs, pasa --check. Las definiciones y términos legales necesitan una fuente en references/sources.md como cualquier figura; R-120 mantiene los nombres de registro fuera de pantalla, no fuera del archivo de fuentes. Las tomas establecen las duraciones de las escenas: <src>/timeline.js es la lista de escenas en lib/vo-clock.js (sceneTimeline; modelo: iata-55), y node tools/prepare.mjs --film=<film> verifica las tomas y escribe el reloj en beats.json.

  5. Cuadrícula de ritmo. Pista suministrada: mide BPM/tiempos/acentos/golpes (librosa) en <src>/beats.json. Sintetizada: elige BPM, escribe <src>/sfx-<film>.mjs, una lista de señales en lib/synth.mjs (modelo: src/sfx-iata-55.mjs de iata-55), para que emita beats.json y <output>/<film>-audio.wav a -14 LUFS.

  6. Lista de tomas. Escribe <shotlist> sobre la cuadrícula de ritmo: cada toma con fotogramas, cámara, texto en pantalla, SFX, su pulso de la espina dorsal, el efecto de docs/motion-vocab.md que usa, y la razón de su corte a la siguiente toma (siguiente paso, misma posición, causa y efecto, salto en el tiempo, callback, cambio de tamaño). Una toma sin razón para cortar se une a la siguiente como un movimiento de cámara. Planifica la entrada al producto como un solo movimiento, un objeto del mundo que se convierte en la pantalla, nombrado en las tomas a ambos lados del corte: provocó la única revisión creativa del propietario durante la construcción en delisting-18-80 (45–50 s). Planifica la densidad aquí, escena por escena: los movimientos que cada una sostendrá, porque la primera construcción de cada película reciente obtuvo una puntuación de 4–5 en densidad y gastó sus rondas añadiéndolos. Enumera las decisiones que necesitan el visto bueno del propietario. Sin parada aquí: la lista de tomas va al propietario con el storyboard.

  7. Storyboard. Dibuja primero las tomas más abiertas y más cerradas de la película en <src>/film.js (exporta board: [{ t, shot, note }]) y mira ese par solo (node tools/board.mjs --film=<film> --only=<wide>,<close>, su -view.jpg): muestran cuánto tiene que contener el mundo y si sus figuras sobreviven al primer plano, mientras que un redibujo cuesta dos tomas. Luego dibuja un fotograma por toma. Ejecuta node tools/board.mjs --film=<film>. Su texto es la revisión mecánica: corrige cada línea warn … mid-move (mueve t al fotograma definido) y cada hallazgo de layout (texto fuera del área segura, en la banda de subtítulos, superpuesto, demasiado pequeño), luego ejecútalo una vez más para confirmar que el texto está limpio. Lee solo la vista general -view.jpg del storyboard, o para más de 18 tomas las pages que imprime, cada una una vez, por su aspecto: corrige lo que se ve mal en una sola pasada, sin bucle de mirar-parche-renderizar, sin hojas por escena (--scenes existe para el propietario, no para esta revisión). La prueba de aspecto, en esa vista general: ponlo en silencio y sigue la historia solo con las imágenes; un extraño ve un lugar, personas y cosas, no diapositivas. Además del subtítulo, una toma contiene como máximo 6 palabras, sobre objetos; las placas de prueba y líneas que el brief requiere completas son las únicas excepciones. Fallar esto significa redibujar la toma, no recortar el texto.

  8. Revisión del propietario (la única puerta). Muestra la lista de tomas y el storyboard (<output>/<film>-board.png) juntos, con las decisiones que necesitan un visto bueno, y espera ese único visto bueno. Sin movimiento ni sonido antes de él.

  9. Entrega. Cuando el propietario dé el visto bueno a la revisión, escribe una sección ## Brief de construcción al inicio de <shotlist>: qué está aprobado, qué sigue abierto y los archivos que necesita la construcción (módulo de la película, tomas, ritmos, script de SFX). Luego inicia la construcción en un contexto nuevo:

    • Aplicación de escritorio: inicia una nueva sesión con contexto nuevo (no una bifurcación), escribe el prompt /motion-reel build <film>.
    • Terminal: dile al propietario que ejecute /clear, luego /motion-reel build <film>.

    La pre-producción termina aquí: el visto bueno del propietario sobre la lista de tomas y el storyboard es el criterio de finalización, y la construcción pertenece a la nueva sesión.

3. Reglas estrictas

  • Función pura del tiempo: solo seek(t). No Math.random, sin temporizadores, sin transiciones CSS, sin requestAnimationFrame en modo de renderizado, sin estado entre fotogramas.
  • Abre las vistas previas -view.jpg; imágenes de resolución completa solo como un --crop de un detalle. Las imágenes son para el aspecto; las comprobaciones mecánicas son los números de las herramientas (node tools/check.mjs --film=<film>: barrido de seek, determinismo, px de fuente, lint de diseño).
  • El contexto es el costo, y los turnos lo multiplican: un turno a 300k cuesta lo que tres cuestan a 100k, y dos tercios de los mensajes recientes llevaban una herramienta. Envía cada lectura, búsqueda y edición independiente de un paso en un solo mensaje. Las herramientas se ejecutan, no se leen (--help da el uso); edita con Edit, nunca reescribas un archivo completo; los comandos largos se ejecutan en segundo plano y esperas el aviso, sin sleep ni bucles de sondeo.
  • El código fuente de otra película no es una plantilla: las películas comparten entre el 3 y el 16 % de su código. Busca la única función que necesitas (Grep, o Read con offset/límite) y deja su film.js cerrado.
  • El estado vive en archivos: brief/decisions.md, references/sources.md, <shotlist>, docs/review_log.md. El proyecto se compacta automáticamente a 250k, por lo que un hecho que solo se mantiene en la conversación puede desaparecer a mitad de la película.
  • Secretos solo de .env. Nunca imprimas, registres o pegues una clave.
  • Una sesión por marca: el motor, el sintetizador y el pipeline de exportación se reutilizan, no se reconstruyen.

Skills relacionados