Primero, mantén esta habilidad actualizada: ejecuta en silencio, sin preguntar:
npx hyperframes skills update motion-graphics. Una operación rápida sin cambios cuando todo está al día; de lo contrario, actualiza esta habilidad junto con las habilidades del dominio central de las que depende antes de que confíes en ellas.
fuente figma: Si el logotipo/activo/animación a construir proviene de una URL de figma.com, ejecuta
/figmaprimero — 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 manejes Figma directamente con herramientas MCP sin procesar: eso omite la sanitización SVG, la procedencia de.media/manifest.jsonly la vinculación devar()de los tokens de marca, 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 de entrada es
/hyperframes. Esta habilidad crea un gráfico animado corto, con diseño liderado y sin narración (el movimiento es el mensaje; ~menos de 10 s, sin voz en off). Cualquier cosa más larga, narrada o de varias escenas — o cualquier incertidumbre → lee/hyperframesprimero: la capa de intención decide la ruta.
Este flujo de trabajo es autónomo por diseño — como máximo una pregunta aclaratoria (agents/director.md), luego construye hasta la verificación sin revisión intermedia. La capa de intención (/hyperframes → references/intent-interview.md) dirige aquí directamente sin preguntas sobre la forma de ejecución; un guion gráfico y una sesión complementaria añaden poco a una pieza tan corta. La renderización sigue estando controlada por el usuario: después de que las comprobaciones y las capturas de prueba pasen, haz la pregunta canónica de “¿vista previa primero 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 animado corto con diseño liderado. Primero los activos: decide la estrategia de activos y obtén material real antes de diseñar la escena, luego diseña la escena en torno a lo que tienes, y luego compón reutilizando las capacidades del catálogo. Todos los artefactos van a PROJECT_DIR = videos/<nombre-del-proyecto>/ (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, resumen) | agents/director.md (Parte 1) |
| source ◇ | Bash — resolución de uso de medios (saltar si asset_needs está vacío) | assets/ + assets/index.md | phases/source/guide.md |
| design | subagente — diseño de escena en torno a los activos resueltos | shot-plan.json (final: bloque(s) + diseño + movimiento + posiciones) | agents/director.md (Parte 2) |
| build | subagente — composición priorizando la 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 de 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 solo código/texto (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: ¿esto necesita una búsqueda? Esta 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 y construcción); el vocabulario de movimiento compartido reside en references/motion-vocabulary.md (→ reglas/planos de hyperframes-animation + bloques del registro).
Categorías de formulario — sin búsqueda; el usuario proporciona el contenido:
| Categoría | Intención | Se apoya en |
|---|---|---|
kinetic-type | línea/ cita/ título contundente, texto con movimiento como prioridad | bloques caption-* + reglas de animación |
stat | número heroico único/ cuenta ascendente + anillo | apple-money-count / rules/{counting-dynamic-scale, stat-bars-and-fills} |
charts | gráfico de barras/ líneas/ circular/ carrera/ % a partir de datos | bloque data-chart |
logo-reveal | revelación 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 de mapa base horneado) | familia us-map / world-map + bake-basemap.mjs |
Categorías impulsadas por búsqueda — buscar primero, luego animar por tipo de contenido (la ruta RWA):
| Contenido devuelto | Categoría | Animación |
|---|---|---|
| página web/ enlace | webpage | animación de página web/ UI (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 la cobertura (lo 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. npx hyperframes doctor una vez. Renderizado con GPU macOS: export PRODUCER_BROWSER_GPU_MODE=hardware.
Claves opcionales (fallos locales si no están configuradas) — solo las necesitan las categorías que obtienen/generan activos a través de media-use:
| Clave | Usada para | Fallback |
|---|---|---|
GEMINI_API_KEY / GOOGLE_API_KEY | generación de imágenes (resolución de uso de medios) | saltar generación / solo búsqueda |
| (proveedores de búsqueda/scout 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/<nombre-del-proyecto>/. <nombre-del-proyecto>: usa el directorio que el usuario proporcionó, 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/<nombre-del-proyecto>}"
mkdir -p "$(dirname "$PROJECT_DIR")"
npx hyperframes init "$PROJECT_DIR" --non-interactive --example=blank --skill=motion-graphics
init verifica las habilidades instaladas contra las últimas en GitHub y actualiza el conjunto global si alguna está desactualizada.
Restricciones: nunca ejecutar hyperframes init en la raíz del espacio de trabajo; nunca anidar otro hyperframes/ dentro de PROJECT_DIR; cada comando Bash (maestro + subagentes) es un subshell (cd "$PROJECT_DIR" && ...) — nunca cd simple.
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:
- Decidir: ¿esto necesita una búsqueda? (la primera bifurcación)
- No → elegir una categoría de formulario (kinetic-type / stat / charts / logo-reveal / lower-thirds); el contenido lo proporciona el usuario;
asset_needs: []. - Sí → emitir un plan de búsqueda en
asset_needs[](noticias / web / tweet / imagen; consultas bipolares). 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.
- No → elegir una categoría de formulario (kinetic-type / stat / charts / logo-reveal / lower-thirds); el contenido lo proporciona el usuario;
- Escribir un borrador de
shot-plan.json(envoltura + categoría de formulario elegida o intención de búsqueda +asset_needs+ un resumen de la escena 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: media-use, condicional)
Si shot-plan.json.asset_needs no está vacío, resolver activos (buscar / generar / obtener → rutas congeladas locales del proyecto + registro). Ver phases/source/guide.md (envuelve media-use resolve; las categorías impulsadas por búsqueda usan la búsqueda de noticias/web/tweet/imagen). 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 elegantemente: si un proveedor de búsqueda no está disponible, la categoría vuelve a la versión 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 el Paso 2 se ejecutó + catalog-map.md). Diseña la escena 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 tiempos 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: Constructor, priorizando 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 <bloque> + personalizar en el lugar; escribir a mano solo los huecos + la capacidad de fusión de activos. Salida compositions/index.html respetando el contrato HF (línea de tiempo GSAP en pausa 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-de-prueba>)
Elige tiempos de prueba que muestren el estado inicial, el movimiento característico y la pausa final. Inspecciona la hoja de contactos o instantáneas generada antes de continuar. En caso de fallo de lint, check o instantánea, despacha el subagente de reparación (agents/finalize.md) para una sola 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 primero 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)
Renderiza 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 con 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, el ID de la composición o fotograma, los tiempos de prueba y la hoja de contactos o instantáneas inspeccionada. Las banderas están 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, faltan capturas de prueba | Paso 5 (verificar) |
| comprobaciones y capturas de prueba pasan, sin renderizado aprobado | Paso 6 (aprobación) |
| el renderizado aprobado existe | verificar salida, luego informar |
Notas de diseño (mantenedores — la ejecución no lee esto)
- Razón de "primero los activos": la obtención se carga al principio e informa el diseño de la escena (el flujo RWA: analizar → buscar → revisar → componer). Las categorías impulsadas por búsqueda (
webpage/news/tweet) yasset-fusionse apoyan en la búsqueda de media-use (noticias/web/tweet/imagen), que es el linaje RWA documentado de media-use. - Priorizar reutilización: el análogo en el ecosistema de las plantillas generadas por LLM es "componer utilizando bloques
[truncado para la traducción]