Cómo crear motion graphics con IA: anuncios profesionales sin After Effects
Un flujo de trabajo de siete pasos para motion graphics con IA: desglosa referencias, planifica sonido e historia, aprueba fotogramas clave, renderiza y perfecciona, con casos reales y prompts reutilizables.
Casos de estudio: qué cambió y por qué
Training Season motion vídeo
Prompt de la ronda 1
Crea una película vertical de motion graphics de 25 segundos con la letra de "Training Season".
1080×1920, 30fps. Three.js + postprocessing, GSAP para superposiciones 2D.
AUDIO
Usa exactamente como está el audio de 25 s de este reel; no lo cortes ni lo empalmes:
https://www.instagram.com/reel/DczJLScIIuV/
Primero extrae la letra completa de este fragmento, crea una cuadrícula de pulsos y sincroniza cada palabra cantada.
REFERENCIA DE MOVIMIENTO
https://www.instagram.com/reel/DerrAaVIxjl/
Toma prestado su esqueleto: la cámara nunca se detiene, la letra envuelve un anillo giratorio,
las palabras clave golpean a todo el ancho al ritmo del compás y hay transiciones con barrido rápido de cámara.
Su movimiento es fantástico, pero su gusto visual no: no copies el único rosa,
el túnel repetido ni la mezcla de fuentes.
HISTORIA
Una mujer escribe el amor que desea en un tablero de manifestación por la noche.
Es su estándar, no una súplica. En "training season's over" deja de
esperar: cada deseo recibe una marca roja y amanece.
Feminista, esperanzador: "there's still tomorrow". Ningún hombre en cuadro.
Arco: noche tranquila → escribir la lista → un momento frágil → sobrecarga → declaración → mañana.
ASPECTO
Collage / impresión: letras recortadas de revistas, tablero de visión, portada de periódico.
Crema / rosa / plata con grano de película cálido; rojo solo como acento. Máximo 2 fuentes.
No muestres el rostro de ninguna persona real; usa siluetas y objetos.
REGLAS DE MOVIMIENTO
- 11 palabras clave son tipografía 3D extruida que aparece ocupando entre el 85 y el 100 % del ancho de pantalla,
nítida y legible durante al menos 0,3 s.
- Todas las demás palabras de la letra aparecen cuando se cantan y miden al menos 90 px de alto.
- Máximo 3 capas por fotograma, un solo elemento protagonista cada vez.
- La profundidad procede de un entorno fijo en el espacio (sala cuadriculada, anillos orbitales,
marcas de graduación), no de decoración flotante.
- Transiciones: barrido rápido de cámara + desenfoque, un único fotograma blanco o vuelo a través de un objeto.
- Desenfoque de movimiento de subfotograma en todos los movimientos rápidos. No dejes que el bloom lo vuelva brumoso.
- Pico visual en el primer golpe del estribillo.
FINAL
En "over": "manifested ✓", aparecen una a una seis marcas rojas
y después "made with OD Motion".
Muéstrame primero entre 3 y 5 imágenes fijas clave. No animes hasta que dé mi aprobación.
IKEA motion vídeo
Prompt de la ronda 1
Crea una película de lanzamiento de producto de 11 segundos para la nueva colección PS 2026 de IKEA.
Concepto no oficial. 1920×1080, 60fps, HTML + GSAP.
REFERENCIA
Copia plano por plano el ritmo de este reel, pero NO su historia:
https://www.instagram.com/reel/DcVTS2exsRR/
(las tarjetas de producto dibujadas con líneas entran una a una → forman una cuadrícula → se condensan en un único lienzo → logotipo)
MARCA (debe reconocerse como IKEA en el primer segundo)
- Colores: azul IKEA #0058A3, amarillo #FFDB00, blanco, gris oscuro #3C3C3C
- Lenguaje visual: dibujos lineales de manual de montaje de IKEA (isométricos, trazo negro fino)
- Fuente: sans geométrica limpia, negrita para los precios
RECURSOS (adjuntos)
- 5 fotografías de producto sobre fondo blanco + precios:
Taburete $69.99 · Silla plegable $59.00 · Mesa auxiliar $39.99 · Sillón cama $399.00 · Mesita de noche $69.99
- 3 dibujos oficiales de dimensiones (úsalos para crear el arte lineal)
- Logotipo de IKEA (SVG)
- Texto: "MAKE ROOM FOR PLAY" / "Playful functionality since 1995."
- Palabras clave de las tarjetas: Playful / Flexible / Affordable
PLANOS
0.0–2.5s Las tarjetas de producto entran por una cinta transportadora; cada impulso coincide con un golpe
(0.55 / 0.775 / 1.0 / 1.175s). Cada tarjeta = dibujo lineal + nombre + precio.
El taburete cae inclinado y se endereza.
Las etiquetas de precio caen y se fijan con una pequeña oscilación elástica.
El dibujo lineal se sitúa en una capa más profunda que su tarjeta (paralaje).
La fila superior se eleva hasta media altura y el sillón cama sube desde abajo.
Mantén 0.3s mientras flotan los dibujos.
2.5–6.0s Las tarjetas se asientan formando el plano de una habitación. La tarjeta del sillón cama se despliega hasta formar su
silueta y aterriza sobre la franja. La fila de productos reales aparece mediante un barrido
del centro hacia fuera. Las etiquetas de precio se fijan sobre los productos reales,
de izquierda a derecha. "MAKE ROOM FOR PLAY" se revela línea por línea.
6.0–8.0s Logotipo: las letras I-K-E-A entran de golpe una a una, pasan mediante un barrido al azul IKEA y avanzan hacia delante.
Tarjeta final "Unofficial concept · not affiliated with IKEA"
REGLAS DE MOVIMIENTO
- Sin destellos blancos ni cortes bruscos. Cada transición es un empuje o barrido continuo.
- Los elementos se solapan y se siguen entre sí; nada aparece de forma aislada.
- Desenfoque de movimiento en los movimientos rápidos.
SONIDO
Cierra primero la música y después coloca cada movimiento clave sobre un golpe.
Un barrido sonoro suave bajo cada movimiento y un pequeño sonido de "fijación" en cada etiqueta de precio.
Mezcla a -16 LUFS, sin agudos estridentes.
Muéstrame primero entre 3 y 5 fotogramas clave. No renderices la película completa hasta que dé mi aprobación.
poppi motion vídeo
Prompt de la ronda 1
Crea una película de marca de 11 segundos para poppi, el refresco prebiótico.
Concepto no oficial. 1920×1080, 60fps, HTML + GSAP.
REFERENCIA
Copia plano por plano el ritmo de este reel, pero utiliza el mundo propio de poppi:
https://www.instagram.com/reel/DbqR1UxhTvE/
MARCA (debe reconocerse como poppi en el primer segundo)
- Cada corte usa el color de un sabor de poppi. Magenta #EC008C, amarillo #FFF200,
azul #0667BE, naranja #F15506, rosa #FF8CCB, rojo #D4002E
- Logotipo denominativo de poppi (SVG, adjunto)
- Texto (de drinkpoppi.com): "Soda's back, but better" / "THE PREBIOTIC SODA"
- Palabras de personalidad: FIZZY / BOLD / FRUITY / BUBBLY / FUN
RECURSOS (adjuntos)
- Logotipo denominativo de poppi en SVG
- Renders de latas: Strawberry Lemon, Orange Cream, Shirley Temple, Cream Soda,
Ginger Lime, Sour Apple, Alpine Blast, Doc Pop
- 3 fotografías de estilo de vida
PLANOS
0.00–1.85 9 cortes bruscos al ritmo del compás. Cada corte = un estallido radial del color de un sabor
(zoom de impacto 1.18 → 1.03) + su fruta apareciendo de golpe (1.3 → 1).
Los bombos en 0.285 / 0.785s bombean todo el fotograma.
Estallidos radiales anidados: el exterior gira lentamente y el interior gira en sentido contrario y crece.
1.85 El logotipo denominativo aparece con squash & stretch, de morado → magenta, con un estallido radial.
2.73 Una ventana de foto se revela con máscara desde abajo y redondea sus bordes hasta convertirse en tarjeta;
"Soda's back, but better" presiona desde arriba; suben burbujas.
3.65 Foto a la izquierda, fresa gigante a la derecha, la pegatina "NEW" entra de golpe.
4.56 Una naranja gigante cae sobre otras dos y las tres se hunden.
5.56 Las palabras de personalidad se desplazan verticalmente con desenfoque de movimiento; la fila central es amarillo intenso.
6.60 Una lata cae de golpe de lado, se extiende un charco de refresco y "THE PREBIOTIC SODA" ocupa todo el ancho.
≈7.5 Las latas entran girando (Sour Apple → Orange Cream), cada una aterriza con un anillo de impacto.
≈8.3 Las tarjetas fotográficas se deslizan de derecha a izquierda.
≈9.2 Foto a pantalla completa, un parpadeo rápido.
≈9.8–11 Tarjeta final: una lata entra dando saltos (al estilo Pixar), se abre, sube una burbuja y
se convierte en el punto de la "i" del logotipo denominativo.
Tarjeta final "Unofficial concept · not affiliated with poppi"
SONIDO
Cierra primero la música y no la cortes. Cada corte brusco coincide con un golpe.
El sonido protagonista es un "tss" real de apertura de lata. Mezcla a -16 LUFS.
Muéstrame primero entre 3 y 5 fotogramas clave. No renderices la película completa hasta que dé mi aprobación.
Duolingo motion vídeo
Prompt de la ronda 1
Crea una película de lanzamiento de 21 segundos para la nueva función de Duolingo, Image Flashcards
(lanzada el 19 de octubre de 2026: después de una lección ves una imagen, sin opciones,
y dices la palabra en voz alta; las tarjetas falladas vuelven a aparecer).
Concepto no oficial. 1920×1080, 60fps, HTML + GSAP.
REFERENCIA (solo movimiento, NO la historia)
https://www.instagram.com/reel/DafsqUut4x1/
Toma prestado: interfaz sobre una escena, palabras grandes que aparecen una a una, una cámara que nunca corta.
La historia debe surgir de la función de Duolingo, no de este reel.
MARCA (debe reconocerse como Duolingo en el primer segundo)
- Duo en pantalla durante el primer segundo
- Verde #58CC02, azul #1CB0F6, rojo #FF4B4B, gris oscuro #3C3C3C
- Botones 3D gruesos; tipografía redondeada (Nunito)
- Usa animaciones Lottie oficiales de Duolingo cuando sea posible (adjuntas)
GUION (voz en off femenina y natural)
1. "Easy." (sobre la conocida lección de tocar las fichas)
2. "Remembering it? … Not so much."
3. "So we took the choices away."
4. "Meet Image Flashcards."
5. "A picture… and your voice."
6. "Miss one? It comes back." → termina con el icono y el nombre de la aplicación Duolingo
PLANOS
0.0–5.9 Lección en el teléfono: unos dedos tocan las fichas; Duo salta fuera del teléfono en "Easy."
5.9–8.0 Las fichas caen; la cámara avanza a través de ellas hasta una tarjeta en blanco.
8.0 "Meet Image Flashcards" — estallido oficial.
10.2 Aparece una imagen, se activa el micrófono y la persona que aprende dice la palabra.
14.2 ¡Correcto!
14.9 Una tarjeta fallada vuelve oscilando: "Miss one? It comes back."
17.3–21 El icono de la aplicación despierta y estalla en "Duolingo".
Tarjeta final "Unofficial concept · not affiliated with Duolingo"
MOVIMIENTO DISTINTIVO
Una pulsación gigante de un botón 3D de Duolingo que inunda la escena siguiente. Úsala en todas las transiciones.
REGLAS DE MOVIMIENTO
Sin destellos blancos ni cortes bruscos. Cámara continua con profundidad de paralaje. Desenfoque de movimiento en los movimientos rápidos.
SONIDO
Graba o genera primero la voz en off y después monta la imagen según cada frase.
Cada acción tiene su propio sonido: toque, estallido, deslizamiento de tarjeta, activación del micrófono, acierto, fallo, explosión.
Música bajo la voz. Mezcla a -14 LUFS.
Muéstrame primero entre 3 y 5 fotogramas clave. No renderices la película completa hasta que dé mi aprobación.
IKEA motion vídeo
Reproduce A y después B con el mismo volumen del dispositivo. A contiene música. B añade una capa de efectos que describe acciones individuales, incluidos barridos sonoros cuyos picos coinciden con el movimiento más rápido. El objetivo es escuchar qué aportan los efectos sin cambiar la imagen.
100K & OpenDesign Logo motion vídeo
La pieza narrativa 100K siguió una referencia de película de lanzamiento de HyperFrames y utilizó una interfaz de tuits, curvas reales y bloques de motion graphics para publicaciones, gráficos y contadores. Su música pasó por 15 versiones antes de que el clímax propio de la pista coincidiera con la imagen. Las notas acreditan a Pixabay como fuente de la música.
Empieza con una referencia. Desglósala compás por compás. Elige un movimiento distintivo. Aprueba imágenes fijas antes de renderizar. Cierra el sonido antes de ajustar los tiempos de la imagen.
Un brief de movimiento como «hazlo más enérgico» deja demasiadas decisiones abiertas. ¿Qué se mueve? ¿Hacia dónde se dirige la mirada? ¿Qué palabra coincide con el golpe musical? ¿Qué debería reconocer el espectador en el primer segundo?
El flujo de trabajo siguiente convierte esas preguntas en decisiones que se pueden revisar. Sirve para el lanzamiento de un producto, un anuncio conceptual de mobiliario, una pieza de tipografía cinética o una breve historia de marca. Al final tendrás un brief, una lista de planos con tiempos, fotogramas clave aprobados, un proyecto de movimiento editable y una exportación de vídeo comprobada.
Qué necesitas antes de empezar
Prepara un mensaje claro, un público objetivo, un formato de entrega y los recursos que hagan reconocible el trabajo: un logotipo, la interfaz del producto, fotografías del producto o un pequeño conjunto de imágenes aprobadas. Elige música o narración que puedas utilizar para la entrega prevista. Una referencia es material de estudio; tener permiso para verla no implica tener permiso para volver a publicar sus imágenes o su banda sonora.
También necesitas una forma de generar o preparar recursos, un motor de renderizado de movimiento y una persona que pueda aprobar la dirección visual. En estos proyectos, Claude se encargó de la dirección y los briefs, Codex de la generación e implementación de recursos, y las adaptaciones repetitivas de marca podían delegarse por separado. Son funciones de producción, no suscripciones obligatorias a modelos.
| Etapa | Resultado concreto | Herramientas |
|---|---|---|
| Buscar referencias | Una selección con enlaces y motivos | Navegador; yt-dlp cuando se permita la descarga |
| Analizar la referencia | Hoja de contactos y notas compás por compás | FFmpeg; herramientas de transcripción y análisis de audio |
| Redactar el brief | Reglas visuales y lista de planos | Claude; un brief sencillo en Markdown |
| Planificar el sonido | Música o narración con marcadores de tiempo | Análisis de audio con Python; ElevenLabs para efectos de sonido |
| Preparar imágenes fijas | Recursos y fotogramas clave aprobados | Generación de imágenes con Codex; recortes; HyperFrames |
| Animar y renderizar | Proyecto editable y vídeo | HyperFrames/GSAP para 2D; Three.js para trabajos espaciales |
| Revisar | Exportación visionada y notas comparativas | FFmpeg; inspección de fotogramas; vídeo en paralelo |
Paso 1: Elige una referencia por su estructura
Empieza por el tipo de comunicación que necesitas y después elige una referencia. Un anuncio de mobiliario y el lanzamiento de un software pueden tener transiciones bonitas, pero resuelven problemas distintos.
Elige entre cuatro formatos de motion:
| Familia | Qué sostiene la historia | Preparación | Úsala para |
|---|---|---|---|
| Demostración de interfaz | Un problema se hace visible y después una interfaz lo resuelve | Pantallas del producto o elementos de interfaz recreados | Lanzamientos de productos y explicaciones de funciones |
| Presentación de productos | Productos recortados y tipografía de gran tamaño crean una actitud | Fotografías de producto coherentes y recortes limpios | Piezas comerciales y de marca |
| Tipografía cinética | Las palabras, la letra de una canción o una declaración breve se convierten en la imagen | Una secuencia de texto precisa y un plan de audio sólido | Eslóganes, letras de canciones y explicaciones breves |
| Película de producto en 3D | Un objeto gira, se separa o se asienta en una composición final | Un recurso 3D utilizable o un objeto modelado | Lanzamientos de hardware y productos físicos |
Guarda el enlace original, el crédito del creador, la fecha de recopilación y una frase que explique qué quieres aprender. Si registras «Me gusta» o comentarios, conserva la fecha de observación: esas cifras cambian y no explican por qué funciona una pieza.
Entre las referencias iniciales útiles de las notas se incluyen Ramp de @studio.ojas, MUJI de @vanshika.motion, Henki de @bymyno_ y Visual Test 01 de @jordans.archivess. Abre las publicaciones originales para estudiar el trabajo de sus creadores.
Punto de control: puedes explicar por qué la referencia encaja con tu mensaje e identificar la técnica concreta que quieres estudiar.
Paso 2: Desglosa la referencia compás por compás
Mírala una vez para entender toda la historia, otra sin sonido y otra concentrándote en la banda sonora. Estas pasadas separan la estructura visual de la energía del audio. Después crea una hoja de contactos para ver la progresión de la pieza sin tener que desplazarte repetidamente por ella.
Si dispones de una copia local autorizada, FFmpeg puede crear una hoja de contactos aproximada:
ffmpeg -i reference.mp4 -vf "fps=1,scale=240:-1,tile=5x4" -frames:v 1 reference-contact-sheet.jpg
Este ejemplo toma muestras de los primeros 20 segundos a un fotograma por segundo. Para piezas más largas, crea hojas adicionales. Las transiciones rápidas requieren una inspección más detallada alrededor de su tiempo real; una hoja de contactos no puede decirte si un movimiento se percibe bien.
Registra cuatro aspectos de cada compás:
- Propósito: ¿qué aprende o siente aquí el espectador?
- Composición: ¿qué hay en primer plano, en el fondo y cuál es el principal foco de atención?
- Movimiento: ¿qué entra, se mueve, cambia o sale? ¿Qué movimiento se repite?
- Sonido: ¿el evento está impulsado por un acento musical, una palabra hablada o un efecto?
Conviene distinguir entre un truco visual y la necesidad a la que sirve. Un muro de notas adhesivas puede comunicar sobrecarga; la lección importante es cómo la pieza hace tangible esa sobrecarga. Tu producto puede necesitar una metáfora distinta.
Analiza esta referencia como diseñador de movimiento.
Para cada compás, describe el objetivo de comunicación, la composición,
el movimiento de entrada/pausa/salida y el evento sonoro.
Identifica el único movimiento recurrente que da identidad a la pieza.
Separa los principios de movimiento reutilizables de la historia del creador,
los recursos de marca y el trabajo gráfico distintivo.
No inventes marcas de tiempo que no puedas observar. Señala las incógnitas.
Punto de control: tienes un desglose con tiempos y puedes explicar cómo el movimiento distintivo refuerza la historia.
Paso 3: Redacta un brief original y una lista de planos
Toma prestado un principio de movimiento y reconstruye la historia alrededor de tu propio tema. En el caso de Duolingo, una versión inicial tomó prestada tanto la historia de VoiceOS como su lenguaje de animación. El resultado no tenía sentido para el nuevo producto. Otra apertura posterior pasaba demasiado tiempo entre cielos y bosques, lo que dificultaba reconocer la marca. La corrección llevó a Duo, el verde de marca y un botón tridimensional al primer segundo.
En una pieza de marca, el reconocimiento durante el primer segundo funciona como regla práctica de dirección. No es un requisito para todas las piezas narrativas, pero sí una comprobación útil cuando el objetivo es reconocer el producto de inmediato.
Anota qué debes tomar de la referencia y qué debes dejar atrás. Fija la tipografía, la paleta, el tratamiento de imagen, un movimiento recurrente y la progresión emocional antes de solicitar un renderizado completo.
Crea un brief de movimiento para [producto o tema].
Público: [quién lo verá].
Un mensaje: [qué debería recordar].
Entrega: [duración, relación de aspecto, resolución, velocidad de fotogramas].
Recursos de marca: [archivos aprobados].
Referencia: [enlace o archivo local autorizado].
Toma prestado: [principio de movimiento concreto].
No tomes prestados la historia, el texto, el trabajo gráfico ni la identidad de la referencia.
Define las reglas visuales, el arco emocional, un movimiento distintivo
y una lista de planos. Asigna a cada plano un propósito comunicativo,
tiempos de inicio y fin, elementos visibles, movimiento y una señal sonora.
Indica qué materiales faltan antes de la implementación.
Detente después del brief y el plan de fotogramas clave; no renderices todavía.
Por ejemplo, un concepto breve de mobiliario podría presentar un producto, mostrar varios objetos que forman una habitación y después mantener una composición final de marca. Su rasgo distintivo puede ser la forma en que cada objeto encaja de golpe en una cuadrícula compartida. Haz que la apertura, el desarrollo y el final sigan siendo comprensibles aunque el espectador se pierda una transición.
| Plano | Objetivo de comunicación | Imagen | Señal sonora | Pregunta de revisión |
|---|---|---|---|---|
| Apertura | Presentar el tema | Producto e identidad reconocibles | Primer acento claro | ¿Puede un espectador nuevo saber qué es esto? |
| Desarrollo | Explicar el valor | Los productos o la interfaz forman un sistema con sentido | Ritmo repetitivo | ¿Cada objeto nuevo añade información? |
| Clímax | Resolver la idea | El movimiento distintivo completa la composición | Pico musical o narrativo | ¿Se ha preparado adecuadamente el final? |
| Pausa final | Dejar una conclusión clara | Mensaje final legible | Resolución musical natural | ¿Hay tiempo suficiente para leer? |
Punto de control: otra persona puede seguir la pieza a partir de la lista de planos sin ver la referencia.
Paso 4: Cierra el sonido antes de ajustar los tiempos de la imagen
Decide si la pieza estará guiada por la música o por la narración. Para una pieza guiada por la música, escucha las frases, los tiempos fuertes, las transiciones y busca un final utilizable. Para una narración, aprueba el texto y graba una pista de voz provisional antes de establecer la duración de los planos.
No te bases únicamente en los BPM. Una cuadrícula de pulsos indica dónde se repiten los golpes; no identifica el inicio de una palabra, una pausa ni el pico emocional de una canción. En el caso de Training Season, las notas registran un tempo de 122,75 BPM, pero la tipografía también necesitaba tiempos al nivel de cada palabra.
Crea una pequeña hoja de señales con el tiempo, el evento, la respuesta visual y el efecto. Añade efectos de sonido solo donde describan una acción. En un barrido sonoro, alinea la parte más intensa del sonido con la parte más rápida del movimiento, en lugar de limitarte a iniciar ambos clips a la vez.
Con el audio aprobado, crea una hoja de señales.
Marca los límites de las frases, los acentos fuertes, los inicios de palabras habladas
y un final natural. Distingue los eventos medidos de las estimaciones.
Asocia cada plano aprobado con esas señales.
Propón una capa contenida de efectos de sonido para movimientos significativos.
No sustituyas ni empalmes la banda sonora sin aprobación.
De las ediciones rechazadas surgieron dos lecciones. En Training Season, unir música de fuentes distintas cambió el timbre. En la pieza narrativa 100K, la música solo funcionó cuando su propio clímax coincidió con el clímax visual y se conservó su progresión musical. Volver a montar la imagen puede ser una solución mejor que recortar la música para darle otra estructura.
Punto de control: la banda sonora tiene un inicio y un final deliberados, y cada momento visual importante tiene una razón sonora.
Paso 5: Genera recursos y aprueba los fotogramas clave
Prepara entre tres y cinco imágenes fijas representativas antes de animar. Incluye la apertura, un fotograma intermedio cargado, el clímax y la pausa final. Si una escena especial sostiene toda la idea, añádela aunque superes los cinco fotogramas; Training Season utilizó ocho imágenes fijas.
Usa instrucciones coherentes de generación de imágenes para la iluminación, el ángulo de cámara, el material y el fondo. En piezas comerciales, comprueba los bordes de los recortes y las sombras de contacto. En piezas de interfaz, verifica el texto y los detalles del producto. Un motor de renderizado no puede corregir una pantalla imprecisa ni una fotografía de producto que pertenezca a otro sistema visual.
Prepara fotogramas clave a partir del brief y la lista de planos aprobados.
Usa los recursos de marca reales, el texto definitivo y la relación de aspecto prevista.
Muestra la apertura, el fotograma más denso, el pico emocional y la pausa final.
Explica el propósito y el movimiento previsto de cada fotograma.
Comprueba la legibilidad del texto, la coherencia de los recursos, el recorte y el reconocimiento de marca.
No animes la pieza completa hasta que se aprueben estos fotogramas.
Revisa los fotogramas al tamaño de visualización previsto, también en un teléfono. No evalúes una composición vertical únicamente como una imagen grande de escritorio. Pregunta si el texto es legible, si la jerarquía resulta evidente y si la idea visual recurrente se mantiene entre los fotogramas.
Punto de control: una persona responsable de la revisión ha aprobado la composición y los recursos reales, no solo un mood board.
Paso 6: Anima con el motor de renderizado adecuado más sencillo
Usa 2D cuando el problema visual sea la tipografía, las tarjetas, los productos recortados, los elementos de interfaz o una composición basada en cuadrículas. El flujo de producción utilizó HyperFrames con GSAP para los casos de IKEA, poppi y Duolingo.
Usa 3D cuando la profundidad, la perspectiva, el movimiento de cámara o las relaciones espaciales formen parte de la idea. Training Season pasó de HyperFrames a Three.js durante las iteraciones. Su flujo posterior utilizó posprocesamiento para profundidad de campo, resplandor y efectos cromáticos, además de desenfoque de movimiento de subfotograma. Estas técnicas son opciones para un aspecto concreto, no ingredientes que necesite cualquier pieza.
Define la entrada, la pausa y la salida de cada plano. Haz que el movimiento distintivo se repita con variaciones y reserva la inmovilidad para los momentos que necesiten lectura o énfasis. Los proyectos citados se renderizaron a 60 fps; elige tu propia velocidad de fotogramas en el brief y mantenla constante durante el renderizado y la exportación.
Implementa el proyecto de movimiento aprobado.
Sigue los fotogramas clave y la hoja de señales aprobados.
Mantén coherente el único movimiento distintivo entre los planos.
Haz que los tiempos sean deterministas para que una marca de tiempo solicitada pueda
renderizarse repetidamente. Mantén los recursos en local y las rutas explícitas.
Renderiza un segmento breve y representativo antes de la pieza completa.
Entrega el código fuente editable, las dependencias de recursos y los ajustes de exportación.
No añadas efectos no aprobados ni cambies la banda sonora.
El segmento representativo debe incluir una transición difícil o el fotograma más denso. Míralo con audio antes de renderizar toda la pieza. Comprueba que el texto siga siendo legible durante el movimiento, que la profundidad no oculte información y que el motor reproduzca las imágenes fijas aprobadas.
Punto de control: el segmento más difícil funciona en movimiento y el renderizado completo es reproducible.
Paso 7: Revisa la exportación y después compara versiones
Mira el archivo exportado real de principio a fin y con sonido. Después revísalo sin sonido e inspecciona fotogramas concretos. Cada pasada detecta defectos distintos: ritmo incómodo, narrativa visual débil y problemas locales de renderizado.
Usa una instrucción de revisión específica. En lugar de «mejóralo», indica una marca de tiempo, el problema observado y el resultado que buscas. Una comparación en paralelo debe usar tiempos alineados y las mismas condiciones de reproducción; de lo contrario, una banda sonora más alta o un corte desplazado pueden distorsionar la comparación.
Revisa la pieza exportada con respecto al brief aprobado.
Comprueba la identidad de la apertura, el mensaje, la legibilidad del texto,
la coherencia de los recursos, el movimiento distintivo, las transiciones, la sincronización del sonido,
el final natural y la pausa final.
Para cada defecto, indica la marca de tiempo, las pruebas visibles o audibles,
el impacto en el espectador y una corrección concreta propuesta.
Compara las exportaciones anterior y actual según esos mismos puntos.
No apruebes el resultado basándote únicamente en una hoja de contactos o en que el renderizado haya terminado correctamente.
Antes de dar la pieza por terminada, verifica lo siguiente:
- El primer fotograma, todas las transiciones y el último fotograma se renderizan correctamente.
- El texto es legible al tamaño objetivo y permanece en pantalla el tiempo suficiente.
- El audio suena de principio a fin, los efectos se alinean con las acciones y el final suena intencionado.
- El archivo se abre, permite desplazarse por él y se reproduce hasta el final.
- La resolución, la relación de aspecto, la velocidad de fotogramas y la duración coinciden con el brief.
- Se incluyen el código fuente editable y los recursos necesarios, y se mantienen intactos los créditos de producción y los límites de uso.
Mantén una biblioteca de referencias reutilizable
Una biblioteca útil registra algo más que miniaturas atractivas. Guarda el creador y el enlace originales, el motivo por el que recopilaste la pieza, su familia de movimiento, el público o caso de uso previsto, los requisitos de recursos, las notas de análisis y el estado actual.
Usa una progresión sencilla: idea → analizada → en producción → terminada. Añade primero una idea con tres campos: un nombre, un enlace y el motivo por el que la guardaste. Amplíala cuando se vuelva relevante para un proyecto real. Una tabla facilita la comparación, una galería facilita la exploración visual y un tablero de estado muestra qué está listo para usar.
Preguntas frecuentes
¿Necesito 3D para conseguir una pieza pulida?
No. En estos proyectos, la tipografía, las tarjetas y las composiciones de productos se resolvieron a menudo con herramientas 2D. Usa 3D cuando la perspectiva o el movimiento espacial sean fundamentales para el mensaje. La complejidad adicional de renderizado debe resolver un problema visible.
¿Por qué revisar imágenes fijas si el trabajo final se mueve?
Las imágenes fijas revelan a bajo coste una jerarquía incorrecta, recursos incoherentes, textos ilegibles y composiciones débiles. No sustituyen la revisión del movimiento. Aprueba primero el sistema visual y después prueba con sonido el segmento en movimiento más difícil.
¿Qué hago si la pieza parece estática?
Examina dónde desaparece la energía. El problema podría ser una pausa larga, una interpolación repetitiva, una banda sonora sin contraste o un plano que no añade información. Conserva las pausas de lectura deliberadas. Añadir movimiento por todas partes puede hacer que la pieza sea más difícil de seguir.
Tu primer proyecto de práctica
Elige un producto y un mensaje. Selecciona una referencia de la familia adecuada, analiza sus compases y redacta un brief original con un movimiento distintivo. Elige el sonido, prepara imágenes fijas representativas, aprueba el segmento difícil y después renderiza y revisa toda la exportación.
Detente cuando el mensaje, la imagen, el sonido y la entrega cumplan el brief. Conserva juntos el código fuente y las notas de revisión: facilitarán la siguiente revisión más que empezar de nuevo con otro prompt impreciso.