motion-graphics

Primero, mantén este skill actualizado — ejecuta en silencio, no preguntes: npx hyperframes skills update motion-graphics. Una operación rápida sin cambios si todo está al día; de lo contrario, actualiza este skill junto con los skills principales del dominio de los que depende, antes de que confíes en ellos.

fuente figma: Si el logotipo/activo/animación a construir proviene de una URL de figma.com, ejecuta /figma primero — exportación de activos, tokens de marca y traducción de Motion→GSAP si el gráfico es una importación de Figma Motion — luego construye a partir de su salida. No uses herramientas MCP directamente para controlar Figma: eso omite la sanitización de SVG, la procedencia de .media/manifest.jsonl y la vinculación de tokens de marca var(), por lo que un cambio posterior de marca no se puede propagar sin una reimportación completa.

motion-graphics — punto de entrada de despacho

La puerta principal es /hyperframes. Este skill crea un gráfico en movimiento corto, impulsado por diseño y sin narración (el movimiento es el mensaje; ~menos de 10s, sin voz en off). Para cualquier cosa más larga, narrada o de múltiples escenas — o cualquier incertidumbre → lee /hyperframes primero: la capa de intención posee cada decisión de ruta.

Este flujo de trabajo es autónomo por diseño — como máximo una pregunta aclaratoria (agents/director.md), luego construir hasta la verificación sin revisión intermedia. La capa de intención (/hyperframes → references/intent-interview.md) te dirige aquí directamente sin preguntas sobre la forma de la ejecución; un storyboard y una sesión complementaria agregan poco a una pieza tan corta. El renderizado sigue estando controlado por el usuario: después de que las comprobaciones y las capturas de prueba pasen, haz la pregunta canónica "¿vista previa o renderizar?" de ../hyperframes-core/references/brief-contract.md. Cuando exista un BRIEF.md, léelo antes de la pregunta del director.

Un gráfico en movimiento corto impulsado por diseño. Primero los activos: decide la estrategia de activos y obtén material real antes de diseñar la toma, luego diseña la toma en torno a lo que tienes y finalmente compone reutilizando capacidades del catálogo. Todos los artefactos van a PROJECT_DIR = videos/<project-name>/ (creado en el Paso 0); todas las rutas a continuación son relativas a él.

Fase	Ejecución	Artefacto principal	Flujo detallado
init	Bash	hyperframes.json	Paso 0
plan	subagente — ¿decidir búsqueda? + clasificar + estrategia de activos	shot-plan.json (borrador: categoría, consultas asset_needs, brief)	agents/director.md (Parte 1)
source ◇	Bash — resolver uso de medios (saltar si asset_needs está vacío)	assets/ + assets/index.md	phases/source/guide.md
design	subagente — diseño de toma en torno a activos resueltos	shot-plan.json (final: bloque(s) + diseño + movimiento + posiciones)	agents/director.md (Parte 2)
build	subagente — composición priorizando reutilización	compositions/index.html	agents/builder.md
verify	Bash — lint, check, capturas de prueba; reparar en caso de fallo	snapshots/contact-sheet.jpg	Paso 5
approve	Preguntar vista previa o renderizar; esperar la respuesta	aprobación explícita del renderizado	Paso 6
render	Bash — hyperframes render (MP4, o --format webm/mov para superposición)	renders/video.mp4 o superposición transparente	Paso 6

◇ source se ejecuta solo cuando la categoría elegida declara activos. Las categorías de código/texto puro (por ejemplo, kinetic-type, la mayoría de charts/stat) tienen asset_needs: [] y saltan directamente del plan al diseño.

Categorías — divididas por la decisión de búsqueda

La primera decisión de plan es: ¿necesita esto una búsqueda? Esa bifurcación divide las categorías en dos grupos; luego se elige la categoría específica — para las impulsadas por búsqueda, por el tipo de contenido que devuelve la búsqueda. Cada categoría es un categories/<id>/module.md (sus reglas de planificación + construcción); el vocabulario de movimiento compartido vive en references/motion-vocabulary.md (→ reglas hyperframes-animation / planos + bloques de registro).

Categorías de forma — sin búsqueda; el usuario proporciona el contenido:

Categoría	Intención	Se apoya en
kinetic-type	línea / cita / título impactante, texto con movimiento como prioridad	bloques caption-* + reglas de animación
stat	un solo número / cuenta regresiva + anillo	apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills}
charts	gráficos de barras / líneas / circulares / de carrera / % a partir de datos	bloque data-chart
logo-reveal	secuencia de logotipo / bloque de marca (logotipo del usuario)	logo-outro / rules/svg-path-draw
lower-thirds	barras de nombre / título, llamadas, superposiciones sociales	caption-* + bloques de superposición del registro
maps	movimiento geográfico — resaltar regiones, conectar lugares, acercar a una ubicación (carril vectorial o carril de mapa base horneado)	familia us-map / world-map + bake-basemap.mjs

Categorías impulsadas por búsqueda — buscar primero, luego animar según el tipo de contenido (la ruta RWA):

Contenido devuelto	Categoría	Animación
página web / enlace	webpage	animación de página web / interfaz de usuario (desplazamiento, revelación, cursor, llamadas)
artículo de noticias	news	revelación de titular + tarjeta de fuente + llamadas de datos clave
tweet	tweet	tarjeta de tweet animada
imagen / entidad	asset-fusion	la geometría del activo se convierte en el gráfico (fusión diegética RWA)

Orden de construcción: uno a la vez, priorizando cobertura (aproximado está bien). kinetic-type portado del prototipo; el resto sigue.

Prerrequisitos

macOS Apple Silicon o Linux x64. Herramientas del sistema: brew install node ffmpeg. Ejecuta npx hyperframes doctor una vez. Renderizado por GPU en macOS: export PRODUCER_BROWSER_GPU_MODE=hardware.

Claves opcionales (fallbacks locales si no están configuradas) — solo necesarias para categorías que obtienen/generan activos mediante uso de medios:

Clave	Usado para	Fallback
GEMINI_API_KEY / GOOGLE_API_KEY	generación de imágenes (resolución de uso de medios)	saltar generar / solo búsqueda
(proveedores de búsqueda / rastreadores de activos)	búsqueda de activos reales para webpage/news/tweet + asset-fusion	la categoría se degrada a sin activos

Flujo

Paso 0 — Inicializar

El directorio de trabajo actual es la raíz del espacio de trabajo del agente; escribe todos los artefactos bajo PROJECT_DIR = videos/<project-name>/. <project-name>: usa el directorio que dio el usuario, si no, un nombre corto en kebab-case a partir de la intención (<asunto>-motion). No el nombre base del espacio de trabajo ni una marca de tiempo.

Solo cuando $PROJECT_DIR/hyperframes.json está ausente:

PROJECT_DIR="${MOTION_GRAPHICS_DIR:-videos/<project-name>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics

init verifica los skills instalados contra los últimos en GitHub y actualiza el conjunto global si alguno está desactualizado.

Restricciones: nunca ejecutes hyperframes init en la raíz del espacio de trabajo; nunca anides otro hyperframes/ dentro de PROJECT_DIR; cada comando Bash (maestro + subagentes) es un subshell (cd "$PROJECT_DIR" && ...) — nunca un cd suelto.

Paso 1 — Planificar (subagente: Director Parte 1)

Despacha un subagente. prompt = contenido completo de agents/director.md + ## Contexto de despacho (SKILL_DIR / PROJECT_DIR / la solicitud del usuario / Schema: <SKILL_DIR>/references/shot-plan-ir.md). Debe:

1. Decidir: ¿necesita esto una búsqueda? (la primera bifurcación)
   • No → elegir una categoría de forma (kinetic-type / stat / charts / logo-reveal / lower-thirds); el contenido lo proporciona el usuario; asset_needs: [].
   • Sí → emitir un plan de búsqueda dentro de asset_needs[] (news / web / tweet / image; consultas de dos polos). La categoría impulsada por búsqueda específica (webpage / news / tweet / asset-fusion) se confirma por el tipo de contenido devuelto en el Paso 2, y se finaliza en el Paso 3.
2. Escribir un borrador de shot-plan.json (envoltura + categoría de forma elegida o intención de búsqueda + asset_needs + un brief de toma de un párrafo). Esquema: references/shot-plan-ir.md.

Validación: [ -s "$PROJECT_DIR/shot-plan.json" ] && echo ok || echo missing.

Paso 2 — Obtener ◇ (Bash: uso de medios, condicional)

Si shot-plan.json.asset_needs no está vacío, resolver activos (búsqueda / generación / obtención → rutas locales fijadas del proyecto + ledger). Ver phases/source/guide.md (envuelve media-use resolve; las categorías impulsadas por búsqueda usan la búsqueda de news/web/tweet/image). Si asset_needs está vacío, saltar al Paso 3.

# ilustrativo — ver phases/source/guide.md
(cd "$PROJECT_DIR" && node <SKILL_DIR>/phases/source/resolve.mjs --plan ./shot-plan.json --out ./assets)

Degradar con gracia: si una búsqueda/proveedor no está disponible, la categoría vuelve a sin activos (anótalo en context.log).

Paso 3 — Diseñar (subagente: Director Parte 2)

Despacha un subagente (prompt = agents/director.md Parte 2 + contexto de despacho incluyendo el assets/index.md resuelto si se ejecutó el Paso 2 + catalog-map.md). Diseña la toma en torno a los activos disponibles: elige el/los bloque(s) del catálogo + las reglas/planos de hyperframes-animation, el diseño, el movimiento, los beats, y (para asset-fusion) las element_positions + la paleta de cuentagotas. Finaliza shot-plan.json (content.block + content.customize + contenido por categoría).

Paso 4 — Construir (subagente: Builder, priorizar reutilización)

Despacha un subagente. prompt = contenido completo de agents/builder.md + contexto de despacho (shot-plan.json, catalog-map.md, el module.md de la categoría, references/motion-vocabulary.md, references/builder-contract.md). Priorizar reutilización: npx hyperframes add <block> + personalizar en el lugar; escribir a mano solo los vacíos + el gesto de fusión de activos. Salida compositions/index.html respetando el contrato HF (línea de tiempo de GSAP pausada en window.__timelines, class="clip" + ids estables, tl.seek(0), determinista).

Paso 5 — Verificar (Bash → subagente de reparación en caso de fallo)

(cd "$PROJECT_DIR" && npx hyperframes lint .)
(cd "$PROJECT_DIR" && npx hyperframes check .)
(cd "$PROJECT_DIR" && npx hyperframes snapshot --at <tiempos-prueba>)

Elige tiempos de prueba que muestren el estado inicial, el movimiento característico y la retención final. Inspecciona la hoja de contacto generada o la hoja de capturas antes de continuar. En caso de fallo de lint, check o captura, despacha el subagente de reparación (agents/finalize.md) para una pasada de corrección en el lugar, luego vuelve a ejecutar la compuerta fallida. Nunca cambies una duración fija solo para ocultar un defecto.

Paso 6 — Aprobar y renderizar (Bash)

Haz una pregunta: "¿vista previa o renderizar?" Si el usuario elige vista previa, abre Studio y regresa a la misma compuerta de aprobación después de las revisiones:

(cd "$PROJECT_DIR" && npx hyperframes preview --background)

Renderizar solo después de una respuesta explícita de renderizado:

(cd "$PROJECT_DIR" && npx hyperframes render . --skill=motion-graphics -q high -o ./renders/video.mp4)
# variante de superposición transparente: --format webm  (o mov)

Verifica que la salida exista, no esté vacía y tenga la duración prevista. La entrega final nombra el artefacto, la duración real, la composición o ID del fotograma, los tiempos de prueba y la hoja de contacto o capturas inspeccionada. Las banderas viven en /hyperframes-cli → references/preview-render.md.

Tabla de reanudación

Estado	Continuar desde
sin shot-plan.json	Paso 1 (planificar)
shot-plan.json tiene asset_needs, sin assets/	Paso 2 (obtener)
shot-plan.json final, sin compositions/index.html	Paso 3/4 (diseñar+construir)
compositions/index.html existe, capturas de prueba ausentes	Paso 5 (verificar)
comprobaciones y capturas de prueba pasan, sin render aprobado	Paso 6 (aprobación)
render aprobado existe	verificar salida, luego informar

Notas de diseño (mantenedores — la ejecución no lee esto)

• Justificación de activos primero: la obtención de activos se carga al principio e informa el diseño de la toma (el flujo RWA: analizar → buscar → revisar → componer). Las categorías impulsadas por búsqueda (webpage/news/tweet) y asset-fusion se apoyan en la búsqueda de uso de medios (news/web/tweet/image), que es el linaje RWA documentado de media-use.
• Priorizar reutilización: el análogo dentro del ecosistema de plantillas generadas por LLM