sui-motion-graphic-reel · Crea animaciones con diseño usando código

Autor: Sui Yang (IG @asksui.ai). Este skill nació de siete iteraciones de un reel de 15 segundos: cada idea tiene detrás una versión descartada, las imágenes comparativas están en examples/, el historial completo en references/case-0099.md.

En una frase: La calidad de una animación depende un 90% del lenguaje visual y los planos definidos antes de empezar, no de la cantidad de efectos. Este skill se centra en «cómo pensar, cómo pedírselo a la IA, cómo auto-revisarse», sin importar el motor que uses.

El flujo: Encontrar el sistema de diseño (§1: si el usuario tiene uno, se usa; si no, un agente de diseño genera varias opciones) → Guion y voz (§2) → Storyboard para revisión humana (§3) → Definir lenguaje visual, escena por escena (§4, 9 ideas) → Revisión pre-render (§5) → Auto-revisión después del render (§6) → Entrega y correcciones (§7).

Dos cosas separadas (la decisión más importante de este skill):

	Dónde reside	¿Se puede cambiar?
Gusto: colores, degradados, tipografía, velocidad al hablar, personajes	systema de diseño (`references/design-system.md`, uno por proyecto)	El usuario decide. Los ejemplos del systema son solo punto de partida; se puede reemplazar por completo
Técnica: unidad en toda la pieza, una técnica por escena, múltiples capas, sensación de cámara, un foco por momento, auto-revisión	Este mismo SKILL.md §4–§6	No depende del gusto; funciona con cualquier estilo

Cuando las reglas choquen con el estilo que quiere el usuario: el gusto es del usuario, la técnica se aplica igual. Ejemplo: el usuario quiere degradados neón — vale, toda la pieza usa ese mismo lenguaje neón (técnica: unidad en toda la pieza), no primera escena neón y segunda grid suizo.

1. Antes de empezar, encontrar el sistema de diseño

Sin un sistema de diseño (colores, tipografía, estructura de página, elementos de firma, personalidad del movimiento, lista de «no hacer») al empezar, la IA caerá en sus valores por defecto: degradados rosa-morado, brillos, fundidos y zoom en cada escena. Por eso el primer paso es siempre este, y primero buscar, luego preguntar, y solo al final generar.

¿Hay un sistema de diseño existente?
├─ Sí → Usar el del usuario (1A)
└─ No → El usuario responde unas preguntas o da referencias (1B) → El agente de diseño trabaja, genera opciones para que el usuario elija (1C) → El usuario elige → Se usa ese

1A. Primero buscar: ¿el usuario ya tiene uno?

Revisar el proyecto: design-system.md, guías de marca, design tokens, variables CSS del sitio web, exportaciones de Figma, logos, vídeos o imágenes anteriores.
Si no se encuentra, preguntar: «¿Tienes un sistema de diseño o guía de marca existente? Si es así, pásamelo y lo usaré.»
Si tiene → Usar el del usuario. Convertirlo en design-system.md del proyecto (campos en references/design-system.md). No cambiar nada de lo que ya tenga definido; los campos que falten (personalidad del movimiento, elementos de firma, márgenes de seguridad de plataforma) los rellenas tú, marcando cada añadido como «completado por IA» y pidiendo confirmación al usuario.

1B. Si no tiene: el usuario responde preguntas o da referencias

Dos caminos, se puede hacer uno o ambos:

Responder preguntas: preguntar todo de una vez, máximo cuatro preguntas, cada una con opciones.
- Personalidad: sereno y elegante ／ vibrante ／ tecnológico ／ artesanal ／ que lo describa él
- Color: ¿hay algún color que deba usarse sí o sí? Si no, elegir solo un color de acento
- ¿Personaje o mascota? ¿Voz en off?
- ¿Para quién es este vídeo? ¿En qué plataforma se publicará?
Dar referencias: un vídeo que le guste, un sitio web, un póster, una marca. Por cada referencia preguntar «¿qué te gusta de esto?». Aprender su lenguaje (color, cuadrícula, tipografía, movimiento), no copiar la imagen.

1C. El agente de diseño trabaja: genera opciones para que el usuario elija

Los resultados de 1B se pasan a otro agente (el agente de diseño), que solo hace una cosa: proponer sistemas de diseño. La orden de trabajo y el formato de entrega están en references/design-agent.md.

Generar 3 direcciones distintas, que estén bien diferenciadas (no la misma con un color de acento cambiado).
Cada una debe incluir una maqueta real dibujada: las tres con el mismo título y el mismo contenido, dispuestas en una sola imagen. El usuario elige con los ojos, no leyendo códigos de color.
El usuario puede elegir un conjunto completo o mezclar («los colores de A con la tipografía de B»). Si no le gusta ninguna, preguntar qué no funciona y generar otra ronda.
La elegida se escribe como design-system.md del proyecto. A partir de ahí, cada escena solo puede usar lo que está en este archivo; para añadir colores, tipografías o técnicas, primero se modifica este archivo.

¿Por qué otro agente? El agente que hace la animación ya tiene el guion y las imágenes en la cabeza; si genera sus propias propuestas, las tres se parecerán mucho. Al abrir un agente separado que solo ve los requisitos y las referencias, las direcciones son más diversas. Si no se puede abrir un segundo agente en el entorno, seguir la misma orden de trabajo y generar igualmente tres opciones con maquetas.

Cuando el usuario no está presente

Turnos nocturnos, programación, o él dice «tú decides»: no esperar. El agente de diseño igual genera tres opciones, elegir la que mejor se ajuste a los requisitos, marcarlo en design-system.md como «seleccionado por IA» y adjuntar las maquetas de las otras dos opciones. Al entregar, pedir confirmación o cambio.

Los campos y cuatro ejemplos están en references/design-system.md.

2. Guion y voz: la voz primero

El guion se escribe como si se hablara, con conectores coloquiales («mira», «además», «y»), no como lista de términos. Que suene como si se lo contaras a un amigo, no como si leyeras eslóganes.
La voz en off se genera de una sola vez, no frase por frase para luego unirlas — cada frase generada por separado suena a eslogan, y al unirlas no hay continuidad tonal. Al generarla, obtener el tiempo de cada palabra (la mayoría de servicios TTS tienen interfaces con marcas de tiempo).
La imagen sigue a la palabra: cada escena, cada elemento aparece justo cuando se pronuncia esa palabra. La duración del vídeo = duración de la voz + cierre, sin forzar segundos exactos. El movimiento también: cuando se dice «la cámara entra volando», la imagen debe estar volando en ese momento; si el movimiento acaba antes de que se diga, el espectador ve una imagen estática mientras suena la frase. Imprime los tiempos de cada palabra y compáralos, no confíes en estimaciones.
No insertes silencios en la voz para esperar a la imagen. Si la imagen no da tiempo a terminar, simplifícala.
Si no hay voz: escribir primero una tabla de ritmo (qué ocurre en cada segundo) y luego ejecutarla.
Después de renderizar, transcribe el audio del vídeo terminado para confirmar que cada frase está completa y no se ha cortado a medias (un corte en la voz es imposible de detectar solo mirando la imagen).

Cómo conectar la voz, licencias comerciales: references/engines.md «Voz».

3. Storyboard primero, luego animar

Encontrar que la dirección es incorrecta después de animar es la corrección más cara. Antes de animar, crear una tabla de storyboard, una fila por cada momento:

Columna	Qué escribir
Tiempo / palabra dicha	De qué segundo a qué segundo, qué palabras se dicen
Foco	Qué debe mirar el espectador en ese momento (solo una cosa)
Cuatro capas	Qué hay en fondo · personaje principal · primer plano · capa de información (§4, punto 4)
Técnica	Qué método de animación se usa en esta escena (§4, punto 2), no debe repetir la de la escena anterior
Cámara	De dónde a dónde se mueve la cámara, cómo
Ritmo	Esta escena es densa o ligera, clara u oscura (§4, punto 9). Al terminar la tabla, leer solo esta columna para comprobar la variedad
Transición	Cómo se conecta con la siguiente escena

Si es posible, para cada momento dibujar un fotograma clave estático (dibujado realmente siguiendo el sistema de diseño) y componer una hoja de contacto para que el usuario la vea. El usuario da el visto bueno antes de empezar a animar.

Cuando el usuario no está: crear igualmente la tabla de storyboard, guardarla, revisarla con §4 y luego animar. Al entregar, adjuntarla.

4. Nueve ideas

Cada una incluye «por qué» y «cómo se ve cuando sale mal». Los nombres de las técnicas y cómo pedirlas están en references/techniques.md.

① Definir un sistema de lenguaje visual, y usarlo en toda la pieza

Antes de empezar, fijar estos elementos y escribirlos en un archivo de tokens compartido del que cada escena obtiene sus valores: paleta de colores · cuadrícula y márgenes de seguridad · tipografía y jerarquía de tamaños · posición del bloque de título · un «elemento de firma» que recorre toda la pieza (ejemplo: en la muestra A se usan anotaciones de herramientas de diseño — asas de selección, fotogramas clave, etiquetas de formas —, mostrando el proceso de construcción).

Por qué: El espectador no sabe exactamente qué falla, pero nota que «estas escenas no son del mismo vídeo». La unidad es la fuente más barata de «sofisticación».
Cómo se ve cuando sale mal: Se corrige solo la escena que fue criticada, dejando las demás con sus propios colores (comparar examples/v3-only-first-scene-fixed.jpg con examples/v4-unified.jpg). Corregir una escena implica alinear toda la pieza.

② Cada escena usa una técnica diferente, no cambies colores

La riqueza visual viene de «cómo se mueve esta escena», no de cambiar la paleta. Dentro de una pieza, intercala métodos:

Tema	Técnica
Texto grande	Deformación elástica (al aterrizar se aplasta, al rebotar se estira)
Píxel / retro	Saltos fotograma a fotograma, desplazamientos en enteros, sin interpolación suave
Partículas	Simulación física o campo de flujo, se dispersan y luego se agrupan
Escritura a mano	Trazo a trazo siguiendo el orden real de escritura
Interfaz / pantalla	Perspectiva 3D, paneles separados en profundidad, la cámara los rodea
Números	Contador que avanza, cada salto se aplasta ligeramente

Cómo se ve cuando sale mal: Cada escena es «fundido + zoom». Por muchas escenas que haya, solo hay un tipo de movimiento.

③ El texto debe ser cinético de verdad

Cuando el texto grande es el protagonista, debe tener peso: al caer se alarga, al aterrizar se aplasta y rebota, las letras se desplazan con retardo, entran estirándose, salen comprimiéndose en una línea. Fórmulas y cómo escribirlo en references/techniques.md «Texto».

Cómo se ve cuando sale mal: El texto solo aparece con fundido, o una máscara lo empuja planamente.

④ Cuatro capas por escena, un foco por momento

Capa	Función
Fondo	Entorno en movimiento, indica «dónde estamos», oscuro, lento
Plano medio	El único foco: personaje u objeto principal, nítido, grande, centrado
Primer plano	Objetos que pasan cerca de la cámara, crean profundidad
Capa de información	Etiquetas, contadores, pequeños UI, subtítulos

Puede haber muchas cosas moviéndose a la vez, pero solo una debe ser la más brillante, nítida y con el movimiento más notable. La riqueza se consigue con capas, no con cantidad de elementos que compiten por la atención.

Cuando se detiene: el sujeto (foco y texto a leer) se para completamente para que se lea, pero el fondo y los elementos circundantes deben seguir moviéndose lentamente: pequeños marcadores flotando en el fondo, texto grande en el lejano, objetos del primer plano a los lados del sujeto principal, la respiración de un personaje. Si todo se para, la imagen muere. El movimiento se coloca fuera del sujeto, sin atravesar el texto que se debe leer.
Las capas se superponen, no se apilan verticalmente: el fondo va detrás del sujeto, el primer plano se superpone parcialmente al borde del sujeto. Colocar «fondo» y «primer plano» en los espacios vacíos debajo del sujeto solo añade dos cosas, no crea capas; además, la zona inferior en vertical suele estar cubierta por la interfaz de la plataforma.
Cómo se ve cuando sale mal: Una tarjeta sobre un fondo de color sólido (faltan tres capas, se ve «vacío»); o cuatro cosas parpadeando a la vez (sin foco, se ve «caótico»).

⑤ La cámara debe moverse por sí misma

Coloca todos los elementos en un mismo mundo (un lienzo mucho más grande que la pantalla, o un espacio 3D) y deja que la cámara se mueva dentro de él, en lugar de cambiar de escena estáticamente.

Apertura: la cámara entra volando desde lejos (fly-in), atraviesa varias capas de primer plano, y justo cuando se detiene, el sujeto principal hace su movimiento.
Los primeros 4 segundos deben tener dos oleadas: la primera gran desplazamiento (0–1 s), y después de 1,5 s una segunda oleada (otro movimiento de cámara, cambio de zona, o el texto mismo sufre una gran deformación). Si solo vuela una vez y se para, es solo 1 segundo de apertura.
Transiciones: la cámara se desplaza a otra zona del mundo, las tres capas (lejos, medio, cerca) se mueven a diferentes velocidades (paralaje). Los fotogramas de movimiento rápido añaden desenfoque de movimiento, pero los subtítulos no se desenfocan.
Incluso las piezas de tono tranquilo necesitan una segunda oleada, pero de otra forma: no tiene que ser un gran movimiento de cámara, puede ser una deformación del texto (estiramiento, compresión), una línea que barre la pantalla y trae la siguiente línea, o el objeto principal haciendo un gesto. «Lento» significa easing lento, no quieto.
Al mover la cámara, recalcula los márgenes de seguridad: después de un zoom o un movimiento lateral, el texto pequeño que estaba dentro de los márgenes puede quedar fuera. En los fotogramas con movimiento de cámara, recorta a tamaño real y revisa los bordes.
Cómo se ve cuando sale mal: La apertura es una imagen estática; la transición es un fundido a negro y luego la siguiente imagen.

⑥ Si es 3D, que sea 3D real

Para un movimiento de cámara 3D, construye una escena 3D real con una cámara perspectiva real (three.js o similar): que se mueva en arco, con aceleración y desaceleración, que se vean los laterales de los objetos. Las partículas deben tener volumen, profundidad de campo, estelas.

Cómo se ve cuando sale mal: Agrandar una imagen 2D y llamarlo «zoom»; usar unos pocos cubos CSS para simular 3D (faltan caras, la oclusión frontal está mal, al girar se desmorona); las partículas son solo puntos en un plano.
Los segmentos 3D reales deben revisarse fotograma a fotograma ampliados (§6), porque es lo que más a menudo falla y es más difícil de detectar en miniatura.

⑦ Las transiciones son un atractivo en sí mismas

Además del movimiento fluido de cámara, entre segmentos se puede usar: atravesar (la cámara se adentra en un objeto de la escena anterior, y dentro está la siguiente escena) · máscara (la siguiente escena se ve a través de letras o formas, un iris que se abre) · match cut por forma (el punto donde termina la escena anterior es la punta del lápiz de la siguiente) · revelado hacia atrás (lo que vimos antes era solo un panel entre muchos).

Colocar las transiciones en los silencios entre frases.
De cada transición, extraer varios fotogramas y revisarlos en secuencia para detectar cortes o saltos (examples/v4-transitions.jpg).

⑧ Todo se calcula a partir del «número de fotograma»

Independientemente del motor, renderizar un vídeo consiste en capturar fotograma a fotograma. Por tanto, cada posición, tamaño, opacidad debe ser una función del número de fotograma: dado el fotograma 137, dibuja el fotograma 137. No uses cosas que corren su propio tiempo (CSS animation / transition, temporizadores automáticos, bucles de animación del motor 3D) — al capturar, no sincronizan con los fotogramas, causando parpadeos, saltos, elementos que faltan.

Ventaja: cualquier escena se puede colocar en una ventana pequeña de transición, en un resumen final, y seguir moviéndose, porque solo necesita un número de fotograma.
Los datos que requieren tiempo de cálculo (puntos de muestreo de texto, posiciones objetivo de partículas, píxeles de personajes) se calculan primero y se guardan en archivos; no se calculan durante el renderizado.

⑨ El ritmo se escribe como música: altibajos de densidad y claroscuro

Si toda la pieza tiene la misma densidad y el mismo fondo, cada momento por separado puede estar bien, pero juntos pronto aburren. Trata la pieza como una canción: con momentos densos y ligeros, claros y oscuros; planifica dónde subir y dónde bajar antes de empezar.

Escribe una partitura de ritmo: en la tabla de storyboard, cada momento marca dos casillas: denso / ligero, claro / oscuro. Debe leerse algo como «denso-denso-ligero, denso-denso-ligero, denso»; si hay cuatro o cinco momentos seguidos «denso, oscuro», mete uno ligero o cambia el fondo.
Ligero = solo queda una cosa en pantalla: un teléfono, una línea de texto grande, un número, con mucho espacio alrededor. Un montaje rápido no es ligero; es lo más denso de toda la pieza.
Un momento denso también puede empezar ligero: primero solo el título, y al llegar la palabra clave se añade el resto.
El claroscuro se consigue cambiando el fondo: si el sistema de diseño tiene más de un color de fondo, cambiar toda una escena a otro color de fondo es la forma más directa de crear altibajos. Al cambiar, hacerlo en toda la pantalla, no dejar un borde del color anterior.
El color más intenso solo se usa como un destello: llenar toda la pantalla con el color de acento, pasarlo como un brochazo, cubrir un instante (aproximadamente un segundo) es muy potente; usarlo como fondo de una escena entera donde se debe leer texto resulta molesto.
Cómo se ve cuando sale mal: Cada momento es «mismo fondo + título grande + un recuadro en el centro»; o solo al final aparece el primer momento ligero.
Auto-revisión: reduce los fotogramas de parada de cada momento a miniaturas y colócalos en fila, tapando el texto. Deben distinguirse los párrafos, ver dónde hay luz y dónde oscuridad; solo entonces hay ritmo.

5. Revisión pre-render: antes de renderizar, revisar por el usuario

Renderizar una pieza completa es lento. La mayoría de problemas que el usuario señalaría se pueden detectar antes del renderizado, solo mirando unas cuantas capturas estáticas. Por tanto, no renderices directamente después de escribir las escenas; primero pasa por tres niveles, empezando por el más barato:

Nivel	Qué se mira	Qué detecta
① Revisión en papel	Confrontar la tabla de storyboard con el archivo de hábitos de revisión, punto por punto	Técnicas repetidas por escena, falta de capas, más de un foco, apertura sin dos oleadas, desviación de la frase clave
② Medición automática	Capturar unas cuantas imágenes estáticas y ejecutar `scripts/preflight.py`	Texto fuera de márgenes de seguridad, dos momentos casi idénticos, segmentos que deberían estar en movimiento pero están quietos, imagen demasiado vacía
③ Agente revisor	Otro agente que solo mira las imágenes y el archivo de hábitos, como si fueran los ojos del usuario	¿Se reconoce al sujeto principal? ¿Se ve vulgar, vacío? ¿Objetos deformados? ¿Hay unidad?

Archivo de hábitos de revisión (review-habits.md): es el núcleo de este paso. Cada vez que el usuario señala algo al ver un vídeo, se anota una línea aquí. Primero buscar si existe en el proyecto, luego si el usuario tiene el suyo propio; si no, copiar las entradas iniciales de references/review-habits.md.
Cada vez que el usuario señale un problema, añadir una línea al archivo. Al añadirla, preguntar: ¿esta comprobación se podría hacer antes de renderizar? Si sí, escribir cómo. Con el tiempo, este archivo se parecerá cada vez más a los ojos del usuario.
Solo después de pasar los tres niveles se renderiza. No renderizar si hay elementos obligatorios que no se han corregido.
Este paso no detecta problemas de sonido ni de fluidez al reproducir; esos se dejan para §6.

Cómo se hace cada nivel, la orden de trabajo del agente revisor: references/pre-render-review.md. Formato del archivo de hábitos, entradas iniciales, cómo crece: references/review-habits.md.

6. Auto-revisión antes de entregar (obligatorio, no esperar a que el usuario se queje)

No digas «está listo» sin más. Revisa en este orden, anotando «qué veo, qué cambio»:

Hoja de contacto: un fotograma cada 0,5 segundos, para ver el ritmo general y si cada fotograma se entiende. python3 scripts/review.py sheet <vídeo_final>
Ampliar los fotogramas de parada: cuando el sujeto se detiene en cada momento, captura a tamaño real y mira uno por uno. La hoja de contacto reducida no muestra texto pegado al borde, personajes deformados, capas mal superpuestas. python3 scripts/review.py frames <vídeo_final> 1.2 4.5 7.0 …
Revisar tramos en movimiento de forma densa: transiciones, movimiento 3D, partículas, un fotograma cada 0,1–0,2 segundos. python3 scripts/review.py burst <vídeo_final> <inicio> <fin>
Buscar fotogramas congelados: ¿hay algún segmento de más de 1 segundo completamente sin movimiento? (causa común: algún elemento congela toda la escena). python3 scripts/review.py freeze <vídeo_final>
Transcripción: convierte el audio del vídeo a texto y compáralo con el guion.
Verificar contra el sistema de diseño: ¿alguna escena usa colores, tipografía o técnicas que no estén en el sistema de diseño?
Comparar con la versión anterior: ¿esta versión es mejor que la anterior? Si solo es «diferente» pero no «mejor», dilo.

Preguntas para cada fotograma:

¿Cuál es el foco? ¿Se identifica en un segundo?
¿Es el texto suficientemente grande? ¿Está borroso? ¿Toca el borde? ¿Lo tapa algo?
¿Están las cuatro capas? Enuméralas: ¿qué hay en el fondo, qué en primer plano, cuántos elementos en la capa de información? Si solo se cuenta la capa del sujeto, es delgada. Compara la densidad con cualquier fotograma de examples/v7-near-final.jpg.
¿La técnica de esta escena es diferente de la anterior?
¿Aparece algo de la lista de «no hacer» del sistema de diseño?
¿Hay dos elementos haciendo lo mismo en la misma imagen?

Las herramientas de auto-revisión también engañan: si cada fotograma de la hoja de contacto está bien, no significa que no haya un congelado (hay que buscarlo aparte); si los fotogramas muestreados están bien, no significa que en movimiento también lo estén (3D y transiciones requieren revisión densa); la transcripción automática puede confundir homófonos o nombres de marcas en inglés (es un problema de la transcripción, no hay que cambiar la voz).

Máximo tres rondas de corrección. Una ronda = renderizar la pieza completa una vez + pasar por los siete pasos anteriores una vez; las comprobaciones con capturas estáticas antes de renderizar no cuentan como ronda. Si después de tres rondas quedan problemas, enuméralos y díselo al usuario, no los ocultes.

7. Entrega, y cuando el usuario dice «no me gusta»

Al entregar, di tres cosas: qué se ha hecho en esta versión · qué se ha visto y cambiado en la auto-revisión · qué problemas quedan.

La retroalimentación del usuario suele ser una sensación. Primero traduce esa sensación a lenguaje visual, luego corrige; si no sabes traducirla, pregunta, no adivines:

El usuario dice	Suele ser…	Primero revisa
Vulgar / demasiado IA / poco elegante	Lenguaje visual: demasiados colores, degradados brillantes, estilo llamativo por sí mismo	§4① y la lista de «no hacer» del sistema de diseño
Solo se ha arreglado una parte / no es uniforme	Las demás escenas no se han actualizado al mismo lenguaje	§4①
Monótono / todo igual	Todas las escenas usan el mismo tipo de movimiento	§4②
Cansa / sin altibajos / agota verlo de una vez	La densidad y el claroscuro no varían: todos los momentos igual de llenos, un solo fondo en toda la pieza	§4⑨, primero reduce los fotogramas de parada a miniaturas y colócalos en fila
Se ve muerto cuando se para	Al parar el sujeto, el fondo y los alrededores también se paran del todo	§4④ «Cuando se detiene»
Vacío / sin capas	Faltan fondo, primer plano, capa de información; o el sujeto es demasiado pequeño	§4④
Caótico / no sé dónde mirar	Demasiadas cosas llamativas a la vez	§4④
Estático / sin sensación de espacio	La cámara no se mueve, o solo se mueve un instante	§4⑤
El movimiento de cámara se ve falso / el 3D es raro	Se ha simulado 3D escalando 2D, o los objetos 3D están deformados	§4⑥
El texto no tiene impacto	El texto solo aparece con fundido	§4③
Suena a eslogan / el ritmo es muy lento	La voz se ha cortado en segmentos, hay pausas, velocidad de habla	§2
El texto no coincide con lo que se dice	Los elementos no están sincronizados con los tiempos por palabra	§2
Agobiante / demasiado lleno	El sujeto ocupa toda la pantalla sin espacio libre, o no está encuadrado	Reducir sujeto, añadir marco, dejar espacio para título y anotaciones

Dos reglas al corregir:

Si corriges algo, revisa toda la pieza: ¿el mismo problema aparece en otras escenas?
No toques lo que al usuario le gusta. Solo ajusta colores y cuadrícula para alinearlo, pero deja la técnica igual.

Cada ronda de corrección, vuelve a la frase que este vídeo debe transmitir. Después de varias rondas, el accidente más común es que cada ronda corrige lo señalado, pero el vídeo ya no cuenta lo que debía contar.

Anexo: Archivos

Archivo	Qué es
`references/design-system.md`	Campos del sistema de diseño + cuatro ejemplos (para empezar, se puede reemplazar por completo)
`references/design-agent.md`	Orden de trabajo del agente de diseño y formato de entrega (generar tres sistemas de diseño + maquetas)
`references/pre-render-review.md`	Cómo hacer los tres niveles de revisión pre-render, orden de trabajo del agente revisor
`references/review-habits.md`	Archivo de hábitos de revisión: formato, entradas iniciales, cómo anotar cada vez que el usuario señala algo
`references/techniques.md`	Glosario de técnicas: nombre, cómo se ve, cómo pedírselo a la IA, errores comunes
`references/engines.md`	Cómo conectar motores (HyperFrames · Remotion · otros), 3D real, voz, efectos de sonido, licencias
`references/case-0099.md`	Historia completa de un reel de 15 segundos desde v1 hasta v7: qué se dijo de cada versión, cuál era la causa raíz, cómo se corrigió
`examples/`	Hojas de contacto de cada versión del caso anterior (imágenes de aciertos y errores); además, otro reel de prueba con estilo diferente (ver ejemplo C en `design-system.md`)
`scripts/preflight.py`	Medición pre-render: solo consume imágenes estáticas, genera fotogramas de parada alineados (con márgenes de seguridad), ráfagas, lista de advertencias (requiere Pillow)
`scripts/review.py`	Script de auto-revisión: hoja de contacto, capturas a tamaño real, ráfagas densas, detección de congelados (solo requiere ffmpeg; la salida se guarda en `review/<nombre_del_vídeo>/` junto al vídeo, una carpeta por versión para facilitar la comparación)

sui-motion-graphic-reel

¿Qué es sui-motion-graphic-reel?

Preguntar en tu IA favorita

Documentación