¿Qué hace animonkey?
por Dustkey LLC
Un método de estudio para hacer motion graphics de producto que se sientan como los de las mejores startups: una historia que encaja con la música, títulos que se leen por sí solos, transiciones que transforman en lugar de cortar, personajes que actúan lo que el producto resuelve y la interfaz real en primer plano. Incluye un template de Remotion que compila (template/), scripts para música, locución, mezcla, control de calidad y entrega (scripts/), y documentos de referencia con los números (references/).
El oficio se repite; el aspecto no. Cada película tiene su propia línea visual —paleta, tipografía, acabado de personajes, luz, cámara, personalidad del movimiento, música— definida a partir de la marca del cliente. El skill te da los parámetros para hacer vídeos de esta calidad, no para repetir uno. Nunca copies la línea, la música, el texto o el storyboard de otra película.
Antes de empezar
- Lee
references/template.md(cómo está construido el template y su API) y, antes de escribir código de Remotion, la documentación de la versión instalada (las APIs de@remotion/media,@remotion/threeyConfigcambian entre versiones). - Herramientas: node ≥ 20, ffmpeg/ffprobe,
uv(Python 3.12) para los scripts; para locución, un entorno conmlx-audio,faster-whisper,mlx-whisper,speechbrainylibrosa(Apple Silicon). - Disco: ≥ 5 GB libres para renderizar (
df -h /). Nunca elimines archivos del usuario para liberar espacio sin preguntar. - Un proyecto nuevo comienza como una copia:
cp -R <skill>/template <project>/video && cd <project>/video && npm install.
El flujo de trabajo
Cada paso termina en algo que se ve. Los hitos (G0–G3) se aprueban sobre fotogramas, hojas de contacto o vídeo, nunca sobre una descripción.
0 · Brief
Recopila (y pregunta lo que falta, en un solo lote): qué hace el producto HOY y qué no; para quién es; dónde va el vídeo (landing page, app store, anuncios, evento); duración(es); formatos (16:9, 9:16, 4:5); idiomas; locución o no, y en qué modo; música (con licencia comercial); la marca (logotipo, colores, tipografía, tono); la interfaz real (capturas de pantalla, tokens de diseño del código, iconos) y referencias que le gusten al cliente. Escribe la verdad del producto en el plan: nada en la película puede prometer lo que la app no hace.
1 · La línea visual → G0
Define los diez ejes de la línea con references/art-direction.md y compárala con el registro de líneas usadas (used-lines.md, privado; si no existe, créalo desde used-lines.example.md). Escríbela en kit/palette.ts, style.ts, brand.ts (+ scripts/font-metrics.py si la tipografía cambia) y project/cast.ts. Renderiza tres fotogramas de línea (el problema con el reparto, la interfaz, el cierre) con scripts/still.sh y haz que los aprueben.
2 · La historia y los títulos
Con references/storytelling.md: llena los espacios (donde nace el valor, el reparto, la materia prima que suelta cada personaje, la pérdida, el giro, la pieza de marca viajera, la acción de un toque, la tríada, la prueba, la objeción, el eslogan). Coloca los actos sobre la forma de la canción y escribe los títulos como especificaciones en project/titles.ts con references/kinetic-typography.md. Léelos seguidos sin sonido: deben contar toda la película. Ejecuta npm run check hasta que pase en ambos idiomas.
3 · La música y la rejilla
Con references/audio-and-voice.md: elige la pista para la línea, mapéala (scripts/mapear-musica.py), córtala por compases si es necesario (scripts/cortar-por-compases.py) y pon bpm y v0 en makeGrid en project/timeline.ts. A partir de aquí, cada evento se escribe con bar()/beat().
4 · Animática → G1
Los títulos reales animados, los objetos como siluetas en su sitio y el plano general, sobre la música (y la locución provisional). Lo que se aprueba es el TIEMPO. Lo que se aprueba aquí es lo que se entrega.
5 · Producción por bloques → G2
De mayor a menor riesgo (primero la prueba en la mano y la plantación-y-pago), cada bloque en project/blocks/ y registry.tsx:
- personajes, poses, luz y cámara 3D:
references/characters-3d.md; - la interfaz de producto en DOM pegada al 3D, toques y zooms legibles:
references/product-ui.md; - curvas, recetas de cámara, transiciones de transformación, suelos físicos y traspasos:
references/motion-and-grounds.md.
Revisa cada bloque con una hoja de contacto y recortes al 100 % (references/production-and-qa.md).
6 · Integración, comprobaciones y máster → G3
npm run check, renderiza (scripts/render.sh), scripts/film-qa.py y scripts/hoja-contacto.py sobre el MP4; la locución (scripts/voz/) y la mezcla (scripts/mezclar.py) medidas. Mira el máster sin sonido como alguien que no conoce el producto.
7 · Variantes y entrega
Idiomas, verticales a través de una ventana, cortes de 6–15 s con varias aperturas, un máster sin locución: references/marketing-and-formats.md. Entrega con scripts/entregar.py (nombres que nunca sobrescriben, carátulas, hojas de contacto, manifiesto).
8 · Registrar
Añade la línea de la película a used-lines.md y su firma a USED_LINES en el siguiente proyecto. Registra las decisiones del cliente con sus propias palabras: son el gusto para la siguiente película (references/taste.md).
Innegociables
- La música manda. Todo en fotogramas de rejilla; eventos dentro de ±2 fotogramas de un pulso; mueve la locución, nunca la rejilla.
- Un título = una línea centrada de 2–5 palabras, medida con la tipografía real (sin DOM), con un solo acento; si no cabe, acorta el texto, no la tipografía.
- Nada aparece por opacidad ni cambia por encadenado: la cámara, un objeto o una transformación lo llevan todo.
- El problema es actuado por personajes; lo que sueltan en el problema vuelve como resultado del producto.
- La interfaz es la del producto real, redibujada en DOM y legible cuando se lee (≥ 3.4 px/pt).
- Una pieza de marca viaja por la historia y vuelve al logotipo; el cierre se mantiene quieto con el dominio.
- Verticales sin rehacer: la misma película a través de una ventana; los textos tal cual; ensancha la ventana donde algo no quepa.
- Cada proyecto tiene su propia línea; dos películas del estudio no se parecen (anti-similitud en
art-direction.md). - Una comprobación tiene que poder fallar, y un renderizado verde no prueba nada: mira la hoja de contacto y los fotogramas al 100 %.
- Sin datos reales de clientes ni capacidades inventadas en pantalla.
Qué leer y cuándo
| Necesitas... | Lee |
|---|---|
| Para empezar, entender el template, comandos | references/template.md |
| Para definir el aspecto del proyecto (paleta, tipografía, acabado, luz, música) | references/art-direction.md |
| Estructura, actos, personajes actuando el proceso, texto y locución | references/storytelling.md |
| Especificaciones de títulos, entradas y salidas, medición, otra tipografía o idioma | references/kinetic-typography.md |
| Curvas, cámara, transiciones, suelos, ritmo, métricas de movimiento | references/motion-and-grounds.md |
| Para diseñar un reparto, poses, IK, escenografía 3D, manos, sombras | references/characters-3d.md |
| Para recrear y animar la interfaz de producto y pegarla al 3D | references/product-ui.md |
| Para elegir y cortar la música, locución por IA, la mezcla | references/audio-and-voice.md |
| Cortes publicitarios, verticales, idiomas, entregables | references/marketing-and-formats.md |
| Hitos, reglas medibles, renderizado, herramientas, operaciones | references/production-and-qa.md |
| Para decidir entre dos opciones que ambas funcionan | references/taste.md |
Scripts
| Script | Para qué |
|---|---|
template/scripts/check.sh | comprueba sin renderizar (títulos, sincronía, suelos, contraste, cortes, línea repetida) en dos idiomas |
template/scripts/still.sh | fotogramas individuales para revisar y para los hitos |
template/scripts/render.sh | máster y variantes: silencioso en fragmentos, con verificación de disco, y el audio multiplexado con ffmpeg |
template/scripts/proyecto-json.sh | la línea de tiempo como JSON para los scripts de Python |
template/scripts/font-metrics.py | la tabla de medidas de otra tipografía (estática o variable) |
scripts/mapear-musica.py | tempo, primer tiempo fuerte, rejilla y secciones de una pista |
scripts/cortar-por-compases.py | la música cortada por los segmentos de la rejilla, sin clics |
scripts/mezclar.py | música + locución con ducking, bajos protegidos y un informe de medición |
scripts/voz/ | guion de locución desde los títulos → diseño → clonar → elegir → colocar |
scripts/film-qa.py | cortes, movimiento, suelos y color en el MP4 |
scripts/hoja-contacto.py | hoja de contacto como PDF o PNG |
scripts/comparar-videos.py | dos renderizados comparados con tolerancia |
scripts/entregar.py | entrega con carátulas, hojas de contacto y un manifiesto, sin sobrescribir nunca |
Casos privados
Si existe una carpeta private-cases/ (nunca se publica), contiene el análisis completo de producciones reales del estudio: léela para entender por qué el método es como es, nunca para copiar su línea, su música, su texto o su historia.