Respuesta breve
El motion design es diseño gráfico que se mueve: tipografía, logotipos, iconos, interfaces y datos animados en el tiempo, casi siempre con sonido. A diferencia del vídeo grabado, no se filma nada; a diferencia de la animación de personajes, rara vez cuenta una trama. Un negocio lo encuentra en Reels, anuncios, vídeos explicativos e intros de logotipo, y funciona cuando timing, sonido, derechos y accesibilidad se planifican juntos.
Motion design: diseño gráfico que se mueve en el tiempo
Casi todos conocen el motion design antes de saber su nombre: un logotipo que se arma solo antes de un vídeo, un precio que sube en un anuncio, palabras que caen en un Reel al ritmo de la música. Wikipedia describe el diseño gráfico en movimiento, también llamado motion design, como una rama del diseño gráfico que lo combina con los gráficos animados y la producción de vídeo. No hace falta filmar nada. El material son tipografía, formas, iconos, elementos de interfaz y números.
El mismo artículo lo separa de la animación como forma de arte, que se apoya en efectos cinematográficos y en la narración para contar una historia. Este oficio suele poner en movimiento objetos abstractos, texto y elementos gráficos. Para quien encarga, la frontera es práctica: unos dibujos animados con personajes y trama son un encargo de animación; un vídeo que explica un servicio con tipografía y esquemas es del otro tipo. Wikipedia cita entre sus usos los títulos de cine, la publicidad y las interfaces.
Timing, easing y resortes: la gramática del movimiento
Los doce principios básicos de la animación, que Ollie Johnston y Frank Thomas, animadores de Disney, presentaron en su libro de 1981, siguen sirviendo de lista de control. El timing es el número de dibujos o fotogramas de una acción. Slow in y slow out significa poner más imágenes al inicio y al final de un movimiento, para que nada arranque ni frene en seco. En software, eso se llama easing.
Los diseñadores de interfaces lo convirtieron en números. La documentación de movimiento de Material Design para desarrolladores de Android define el easing como una curva que determina cuánto tarda un objeto en arrancar y detenerse. Recoge dieciséis duraciones estándar, de 50 a 1.000 milisegundos: cuanto mayor es el área o la distancia, más larga es la animación. También describe resortes de tres velocidades; los espaciales mueven elementos y los de efectos cambian color u opacidad.
Las Human Interface Guidelines de Apple añaden criterio. Piden usar el movimiento con propósito, apoyando la experiencia sin eclipsarla, y advierten que la animación gratuita o excesiva puede distraer e incluso causar malestar físico. La animación de respuesta debe ser breve y precisa. Y el movimiento debe poder cancelarse sin esperar a que termine. En un vídeo de empresa, cada movimiento apunta al mensaje.
Música, efectos de sonido y derechos en un vídeo animado
Los gráficos animados casi nunca son mudos. La música marca el tempo; los cortes, las palabras, los golpes y los silbidos caen sobre él, y la imagen parece tocada, no mostrada. Wikipedia llama a su parte tipográfica tipografía cinética: texto presentado en el tiempo para transmitir una idea o una emoción. Sitúa su origen en los títulos de Saul Bass para North by Northwest, de 1959, con créditos que entraban volando.
En el sonido se esconden los problemas de derechos. La Oficina de Derechos de Autor de Estados Unidos explica que grabar una canción puede crear dos obras, la composición con su letra y la grabación sonora, que suelen pertenecer y licenciarse por separado. Usar las de otro artista suele exigir permiso del titular o una licencia. Lo mismo vale para metraje de archivo, fuentes e imágenes. Las reglas cambian según país y plataforma: consulta tu caso con un especialista.
Movimiento reducido, límite de destellos y formatos verticales
Las imágenes en movimiento pueden hacer daño. La explicación del W3C sobre el criterio 2.3.3 de WCAG 2.2, Animación desde interacciones, de nivel AAA, dice que algunas personas sufren distracción o náuseas con la animación y que los trastornos vestibulares pueden provocar mareos y dolores de cabeza. El criterio pide que la animación activada por una interacción pueda desactivarse, salvo que sea esencial. En la web sirve la característica CSS prefers-reduced-motion, que según MDN detecta que el usuario pidió al dispositivo reducir el movimiento no esencial.
Un vídeo terminado es igual para todos, así que ahí manda la regla de los destellos. El criterio 2.3.1, Tres destellos o por debajo del umbral, es de nivel A, el básico: nada debe destellar más de tres veces en un segundo, salvo que quede bajo los umbrales general y de rojo. Busca evitar crisis por fotosensibilidad, y el W3C señala una sensibilidad aún mayor al rojo. Y según el 1.2.2, los subtítulos recogen también los sonidos relevantes.
El formato es la última restricción, y cambia. La guía de anuncios de Meta para vídeo en Instagram Reels indica hoy una proporción 9:16, 1440 por 2560 píxeles y una duración de 0 segundos a 15 minutos. Sugiere dejar sin texto ni logotipos al menos un 14 % arriba, un 35 % abajo y un 6 % a cada lado. Según la ayuda de YouTube, las herramientas de Shorts crean vídeos de hasta 3 minutos, con subida de hasta 1080p. Revisa ambas antes de publicar.
Ten Reels in Code, la serie vertical propia del estudio
Ten Reels in Code es una serie de vídeos verticales que el estudio VITON13 hizo para su propio Instagram en 2026. Es trabajo propio, no un encargo de un cliente: la cuenta y el brief son del estudio. Debía parecer obra de diez motion designers distintos. Cuatro vídeos hablan de los servicios del estudio, tres de VITON13 SCHOOL y tres de VJOURNAL.
Cada vídeo dura de 14 a 16 segundos, 152 segundos en total, con su propio estilo, banda sonora y portada. Las técnicas cambian: un globo de partículas, una bandada, una máquina que hace música con choques, un medallón 3D, un montaje de tipografía cinética. En uno, bolas luminosas rebotan entre siete barras de luz con los nombres de las áreas del estudio. Cada cifra en pantalla se tomó de los sitios en vivo del estudio el 12 de octubre de 2026. Del brief a diez vídeos terminados pasó un día.
Fotogramas calculados desde el tiempo, sonido desde la escena
El método conecta el caso con lo anterior. Cada vídeo es una escena HTML en la que cada fotograma es una función pura del tiempo: un mismo instante produce siempre la misma imagen. Un motor compartido aporta resortes, una cámara 3D, partículas, profundidad de campo y tipografía que cae justo en el pulso. Eso último es tipografía cinética literal.
La música y cada golpe, clic y silbido se sintetizan desde la lista de eventos de la escena, así que imagen y sonido no pueden desfasarse. No hay metraje de archivo, imágenes de IA ni música con licencia. Las referencias fueron prompts públicos con la etiqueta «particles». El estudio respondió a cada uno con una idea propia y tomó las técnicas, no metraje ni código.
Las diez escenas se escribieron en paralelo desde un solo brief, se revisaron con un fotograma por pulso y se renderizaron con desenfoque de movimiento en Chrome headless, un navegador sin ventana. Los vídeos quedaron programados, uno al día, desde el 13 de octubre de 2026. El motor se queda: un vídeo nuevo es un archivo de escena, uno de banda sonora y un comando. Por dentro, el oficio son decisiones sobre el tiempo escritas con tanta exactitud que una máquina las repite.
Lo que diez Reels dibujados en código no pueden demostrar
Este caso tiene límites claros. Son Reels propios del estudio, no trabajo para un cliente: enseñan lo que da el método con total libertad, no cómo se adapta a la marca y las aprobaciones de un cliente. Los vídeos acababan de empezar a publicarse, así que todavía no hay cifras de alcance ni de ventas. Nada indica que los Reels en código vendan más que los grabados.
El sonido tiene su propia salvedad: se equilibró con mediciones, no se masterizó de oído. Los prompts de referencia son públicos y pertenecen a sus autores; solo se tomó la idea de cada técnica. Un día de producción dice poco de un encargo, donde primero se acuerda el mensaje con el cliente. La lectura honesta es más estrecha: el motion design puede hacerse con código y sonido sintetizado, y el motor se reutiliza.
Encargar motion design o animación 2D: qué preparar antes
Antes de encargar, escribe el mensaje en una o dos frases: qué debe saber o hacer quien lo vea tras quince segundos. Reúne lo que ya existe: archivos del logotipo, colores, fuentes con licencia, fotos del producto, cifras reales con fuente. Anota las plataformas, con proporción y duración según su ayuda actual, y la fecha de salida. Con esa hoja, el trabajo se planifica sin adivinar.
Una plantilla basta más a menudo de lo que se cree: un aviso semanal, una oferta, un cambio de horario. Da un resultado limpio rápido, aunque el timing, las zonas seguras, los destellos y los subtítulos siguen contando. Encargar motion design tiene sentido cuando el vídeo vaya a llevar la marca durante meses, explicar un producto con tipografía y esquemas o destacar entre plantillas parecidas. Elige animación 2D cuando la idea necesita personajes y una historia.
El estudio VITON13 hace ambos trabajos: motion design para vídeos explicativos y promocionales, y animación 2D con personajes. El caso de los diez Reels muestra su método del brief al render. Las guías enlazadas abajo explican cuánto cuestan un vídeo explicativo y uno promocional y de qué depende el precio. Lleva el mensaje, el material y los formatos, y la conversación empezará por la idea.
Lista práctica
- Escribe el mensaje del vídeo en una o dos frases antes de abrir cualquier editor.
- Reúne archivos del logotipo, colores, fuentes con licencia y cifras reales con su fuente.
- Toma de la ayuda actual de cada plataforma la proporción, la duración y las zonas seguras.
- Comprueba que nada destella más de tres veces por segundo y subtitula el sonido.
- Antes de una campaña de pago, confirma quién es dueño de cada pista, plano, fuente e imagen.
Preguntas frecuentes
¿En qué se diferencia el motion design de la animación 2D?
La animación 2D suele contar una historia con personajes, escenas y trama. El motion design trabaja con tipografía, formas, iconos, interfaces y datos, y su tarea suele ser explicar, anunciar o sostener una marca. Muchos proyectos mezclan ambos, así que la pregunta útil es si tu idea necesita personajes.
¿Motion graphics y motion design son lo mismo?
Los términos se usan casi como sinónimos. Wikipedia trata los motion graphics como las piezas en movimiento en sí, animación o metraje que crea la ilusión de movimiento, y el motion design como la rama del diseño gráfico que las planifica. Para quien encarga, la diferencia rara vez cambia el pedido.
¿Qué normas de accesibilidad afectan a un anuncio animado?
El criterio WCAG 2.3.1 pide que nada destelle más de tres veces por segundo salvo que quede bajo los umbrales, y el 1.2.2 exige subtítulos para el audio grabado. En un sitio web, el movimiento que inicia el usuario debe respetar el ajuste de movimiento reducido, que cubre el criterio 2.3.3 de nivel AAA.
¿Puede un Reel de empresa usar una canción conocida de fondo?
Solo con los derechos. La Oficina de Derechos de Autor de Estados Unidos recuerda que una canción grabada puede implicar dos obras, la composición y la grabación, a menudo con titulares distintos. Las condiciones varían entre plataformas y países, así que lee las reglas de la plataforma y consulta tu caso con un especialista.
¿Por qué dibujar un Reel con código en lugar de grabarlo?
El código hace que cada fotograma sea repetible y permite que el sonido siga la misma línea de tiempo que la imagen. En el caso Ten Reels in Code, cada fotograma se calcula a partir del tiempo y el sonido se sintetiza desde la lista de eventos de la escena. Grabar sigue siendo mejor cuando hay que ver un producto, un lugar o personas tal como son.