Ejemplos de motion graphics: vídeos asistidos por IA ordenados por función
Por Potto AI Team·
Ejemplos de motion graphics ordenados por tarea: películas de lanzamiento, pantallas de producto, kinetic type, historias de datos, explainers y reveals de logo, cada uno de un autor acreditado.
Los ejemplos de motion graphics más útiles se ordenan por la tarea que hace el vídeo, no por el estilo visual: una película de lanzamiento, una pantalla de producto animada, un reel de kinetic type, una historia de datos, un explainer o un reveal de logo. Cada tarea tiene su propia duración, su propia proporción y su propio orden de ideas, así que un «buen ejemplo» solo ayuda si es el tipo de ejemplo adecuado. Esta guía elige 21 ejemplos de motion graphics de la biblioteca de vídeos de motion graphics con IA en Potto, los reparte en esas seis tareas y, para cada uno, indica el autor, la duración, la relación de aspecto y qué conviene mirar.
Una cosa antes: ninguno de estos vídeos lo hizo Potto. Los hicieron y publicaron creadores independientes, acreditados abajo con su usuario de X. Potto los reúne para que puedas verlos, leer el prompt cuando el autor compartió uno y empezar tu propio vídeo a partir de la idea. Las descripciones usan solo el título de cada vídeo y los datos de su página (autor, categoría, duración, proporción, herramientas), porque el objetivo es ayudarte a elegir qué estudiar, no reseñar el trabajo de otras personas. Todo lo que se dice de la herramienta de Potto sale del producto tal como funciona hoy.
Qué cuenta como motion graphics
Los motion graphics son diseño gráfico puesto en movimiento: texto, formas, iconos, gráficos e imágenes que se mueven para explicar algo, anunciar algo o dar un aspecto a una marca. La guía de Adobe sobre motion graphics los define como «gráficos con movimiento» y los llama «piezas de animación más cortas que entretienen o transmiten información», frente a los largometrajes animados con personajes y una trama. El artículo de Wikipedia sobre dice que el motion design suele asociarse a poner en movimiento objetos abstractos, texto y otros elementos de diseño gráfico.
Entre las dos, las fuentes nombran los lugares donde aparece el trabajo: títulos de crédito de cine y televisión, gráficos de emisión y de informativos, publicidad y branding, tipografía animada, diseño de interfaces de usuario, y vídeos explainer y promocionales. Esa lista se organiza por sector. Esta guía se organiza por tarea, porque cuando haces un vídeo la pregunta es «qué intento transmitir» y no «de qué sector es esto». Las seis tareas de abajo corresponden a las categorías de la biblioteca y cubren la mayor parte de lo que una empresa o un creador necesita de verdad.
Tarea
Qué hace
Pregunta típica que responde
Lanzamiento
Anuncia un producto o una release
¿Qué hay de nuevo y por qué debería importarme?
Pantallas de producto
Anima una interfaz
¿Cómo se ve y cómo funciona este producto?
Kinetic type
Mueve las palabras como visual principal
¿Cuál es la frase que debo recordar?
Historia de datos
Hace que un número o una tendencia llegue
¿Qué cambió y en cuánto?
Explainer
Enseña una idea por pasos
¿Cómo funciona esto?
Animación de logo
Revela una marca
¿Quién lo hizo?
Cómo se eligieron los 21 ejemplos
La biblioteca es grande y sigue creciendo, así que esta guía no cita totales; la página muestra siempre las cifras actuales. Para elegir ejemplos, la guía usó cuatro filtros. Cada obra debe tener un autor acreditado, una duración y una relación de aspecto registradas, un vídeo que funcione y un título que diga de qué trata el vídeo. Dentro de cada tarea favoreció obras que varían en duración, proporción y herramientas, para que veas el abanico y no un solo patrón repetido.
Hay dos hechos de toda la biblioteca que conviene conocer antes de los ejemplos. Salen de los registros de la biblioteca comprobados el 2026-10-12, y se moverán a medida que se añadan obras:
La mayoría de las obras son 16:9. Unas cuatro de cada cinco son 16:9, más o menos una de cada ocho es 9:16 y el resto son 1:1. Cada tarea de abajo sigue el mismo sesgo, que coincide con dónde mira la gente: sitios web, presentaciones y X.
La duración depende de la tarea. La duración mediana es de unos 9 segundos para la animación de logo, 15 para el kinetic type, 30 para el lanzamiento, 35 para la historia de datos, 36 para las pantallas de producto y 60 para el explainer. Las medianas por tarea aparecen en cada sección.
Las 21 obras aparecen en sus secciones de abajo, cada una enlazada a su página, donde puedes reproducirla. Para cada obra la guía da el usuario de X del autor, la duración, la proporción, las herramientas cuando la página las lista y si el autor compartió el prompt. «Prompt compartido» significa que el autor publicó el prompt en la página de la obra, así que puedes leerlo antes de decidir si lo reutilizas.
Ejemplos de películas de lanzamiento
Una película de lanzamiento anuncia algo y pide al espectador que recuerde una cosa: el nombre. Entre los vídeos de lanzamiento de la biblioteca, la duración mediana es de 30 segundos, y cerca de la mitad duran 30 segundos o menos. También es la categoría con más variedad de proporciones: aproximadamente uno de cada cinco está en 9:16, para el teléfono.
Reddit marketing tool launch video de @anthonyriera dura 52,8 segundos en 16:9. La página lista Remotion como herramienta, el mismo renderer que usa Potto, lo que lo convierte en una referencia útil de lo que puede contener una película de lanzamiento hecha con código, cerca de un minuto.
TypingMind showreel announces team features de @ann_nnng dura 15,0 segundos en 16:9, está hecho sobre canvas y el autor compartió el prompt. El título nombra el contenido, funciones de equipo, y la forma, un showreel.
CodePilot promo floats 17 model-provider logos de @op7418 dura 50,0 segundos en 16:9. El título ya es un brief preciso: un solo recurso visual repetido, 17 logos, en un reloj de 50 segundos.
Qué mirar. Reproduce una película de lanzamiento una vez sin sonido y anota el segundo en el que aparece por primera vez el nombre del producto. Luego cuenta cuántas afirmaciones distintas hace la película. Los ejemplos de arriba sugieren una regla que se sostiene en toda la categoría: cuanto más corta es la película, menos afirmaciones lleva. Una película de 15 segundos lleva una idea y un nombre; una de 50 segundos tiene sitio para un problema, unas cuantas funciones y una frase de cierre.
Tómalo prestado con Potto. El creador de vídeo de producto de Potto construye películas de lanzamiento a partir de una descripción o de un enlace. Un brief que funciona bien nombra el público, la duración y los beats:
Película de lanzamiento para una app de presupuestos ficticia llamada Ledgerly, 30 segundos, 16:9. Abre con el problema de seguir el gasto en hojas de cálculo, muestra tres funciones y cierra con el nombre de la app y una llamada a la acción.
Ejemplos de pantallas de producto
La animación de pantallas de producto muestra una interfaz haciendo algo: una lista se ordena sola, un panel se llena, un teléfono recorre un flujo. La duración mediana de la categoría es de 36 segundos, pero la mitad central de las obras va de unos 24 a unos 67 segundos, así que es la más variada de las seis. También es donde los ejemplos en 9:16 y 1:1 son más útiles, porque los flujos de una app suelen mostrarse en el teléfono.
Mac app onboarding sorts messages into one calm list de @dhruvalgolakiya dura 13,4 segundos en 16:9. El título nombra una sola transformación, mensajes que se vuelven una lista, y la duración deja sitio justo para eso.
Sixteen UI motion studies laid out in a four-by-four grid de @charliejhills dura 8,0 segundos en 1:1, el único ejemplo cuadrado de aquí: una cuadrícula muestra muchos movimientos pequeños a la vez, en lugar de un solo flujo grande.
Qué mirar. Pausa en el primer fotograma que muestra la interfaz y pregunta qué se supone que mire el espectador. Luego mira cuánto tiempo permanece cada estado en pantalla. La animación de pantallas de producto falla cuando la pantalla cambia antes de que el ojo haya encontrado el cambio, y por eso los ejemplos más cortos de aquí muestran una sola transformación y los más largos agrupan sus estados en pasos.
Tómalo prestado con Potto. Un vídeo demo de producto parte de las capturas que subes, hasta ocho imágenes, documentos o archivos de audio por proyecto. Las escenas de captura hacen zoom y siguen la ruta de un cursor, y cada escena puede llevar un pie, así que el brief habitual es una lista de pasos:
Demo de producto para una app de facturación ficticia, 30 segundos, 16:9. Usa mis tres capturas: crear una factura, enviarla, verla pagada. Un pie corto por captura y cierre con el nombre de la app.
Ejemplos de kinetic type
El kinetic type pone las palabras en movimiento como visual principal. Es la más corta de las tareas llevadas por el texto: la mediana ronda los 15 segundos, y unas siete de cada diez obras duran 30 segundos o menos. Como no hay interfaz ni gráfico que cargue el significado, tiene que hacerlo la escritura.
Showreel opens on a bold Decision title card de @kenn dura 15,0 segundos en 16:9, y el autor compartió el prompt. Es un showreel de tipografía, así que la title card es el movimiento de apertura.
Slanted credit names glide over an orange grid de @goodside dura 75,0 segundos en 16:9, con el prompt compartido. A esa duración, el recurso repetido es una lista de nombres que se mueve sobre un solo fondo.
Qué mirar. Silencia el vídeo y léelo. El kinetic type debe funcionar como texto: si las frases son flojas, el movimiento no las rescata. Luego activa el sonido y comprueba si el tiempo de cada palabra sigue el audio. Los dos ejemplos de 15 segundos atan el movimiento a una title card o a un tempo, mientras que los dos de 75 segundos se apoyan en la estructura, una lista de créditos y títulos de capítulo, para sostener la atención.
Tómalo prestado con Potto. Las escenas de texto de Potto entran a cue, y sus escenas de cita, título y lista llevan líneas cortas. No ofrece animación libre de letras, así que una ondulación a 128 BPM queda fuera de lo que renderiza. Lo que maneja bien es un guion corto en el que cada línea tiene su propia pantalla:
Vídeo de texto cinético, 15 segundos, 16:9, estilo Bold Pop. Cinco líneas cortas, una por pantalla, sobre un equipo que publica cada viernes. Cierra con la línea "Ship it."
Ejemplos de historias de datos
Una historia de datos hace que llegue un solo número o una sola tendencia. Entre los vídeos de historias de datos de la biblioteca, la mediana ronda los 35 segundos, y la dispersión es amplia, de 15 segundos a bastante más de un minuto. La categoría está entre las más pequeñas, lo que convierte estos ejemplos en un buen sitio para estudiar cada uno.
LLM release timeline tracks 2026 models month by month de @nummanali dura 62,1 segundos en 16:9, está hecho sobre canvas y el prompt está compartido. La página describe una animación en canvas que recorre 2026 mes a mes, así que el tiempo es el eje.
Qué mirar. Encuentra el único número que el vídeo quiere que recuerdes y luego comprueba cómo se lo gana el vídeo: qué viene antes y qué se muestra después. Los tres ejemplos usan tres recursos distintos para la misma tarea. Uno enuncia un resultado, uno recorre una línea de tiempo y uno empareja un número con una imagen de lo que mide.
Tómalo prestado con Potto. Las escenas de estadística muestran un solo número grande, y las escenas de gráfico dibujan gráficos de barras o de donut con tres a seis valores que cuentan hacia arriba. Si escribes las cifras en el brief, el vídeo las usa tal como están escritas, así que contrasta cada número con tu fuente antes de exportar. La página de gráfico animado reúne más de estos:
Historia de datos, 30 segundos, 16:9. Las tazas medias al día de una cafetería ficticia pasaron de 120 en junio a 190 en septiembre. Abre con la pregunta, muestra los cuatro meses como gráfico de barras y cierra con la subida del 58%.
Ejemplos de explainer
Un explainer enseña una idea por pasos. Es el más largo de los seis: la duración mediana es de 60 segundos, y solo alrededor de uno de cada cinco dura 30 segundos o menos. Los vídeos explainer de la biblioteca también tienen el abanico de tratamientos más amplio, del pixel art a las pizarras dibujadas a mano.
Kinetic word cloud pitches an AI inference startup de @deedydas dura 26,0 segundos en 16:9, hecho con SVG y GSAP, con el prompt compartido. Es el explainer más corto de aquí y comprime un pitch en un solo recurso en movimiento.
Qué mirar. Un explainer debe pasar la prueba de la frase: después de un solo visionado, ¿puedes enunciar la idea en una frase? Busca el momento en que el problema se convierte en la solución y cuenta los pasos entre ese momento y el final. Dos de los tres ejemplos apuntan a un sujeto pequeño y concreto (un dígito, un flujo de onboarding) y dejan que cargue toda la lección.
Tómalo prestado con Potto. La estructura detrás de la mayoría de los explainers es problema, solución, cómo funciona y siguiente paso, que la guía sobre qué es un explainer video trata en detalle, y 12 ejemplos de explainer video desglosa por orden de escenas.
El creador de vídeo explicativo de Potto puede partir de un tema, un enlace o un documento como un PDF. No tiene estilo dibujado a mano ni de pizarra: los doce estilos integrados son Clean Modern, Midnight Tech, Editorial Paper, Bold Pop, Blueprint, Warm Organic, Neon Night, Soft Pastel, Mono Minimal, Sunset Gradient, Studio Noir y Fresh Mint.
Ejemplos de animación de logo
Un reveal de logo es la tarea más corta: la duración mediana en la biblioteca está por debajo de 9 segundos, y los ejemplos de aquí van de 8,7 a 21,0 segundos. Hay una sola cosa que mirar, así que el vídeo trata sobre todo del timing y de la forma del movimiento.
TypingMind logo reveal de @tdinh_me dura 21,0 segundos en 16:9, con el prompt compartido. La página describe un reveal lento en el que la marca se compone poco a poco.
Qué mirar. Mira el último fotograma. Un reveal de logo funciona si la marca final está limpia, centrada y es legible el tiempo suficiente para registrarse, y el movimiento anterior es lo que le da personalidad a la marca. El ejemplo de 8,7 segundos muestra cuánto puede hacer un solo movimiento, una forma que se convierte en otra.
Tómalo prestado con Potto. La escena de cierre con llamada a la acción de Potto puede terminar un vídeo en tu logo, y la categoría logo animation de la biblioteca es el sitio para estudiar reveals autónomos. Potto renderiza a partir de un conjunto fijo de tipos de escena y de estilos, sin código de animación a medida, así que una curva de easing concreta como el morph elástico de arriba es algo que estudiar, no algo que copiar al pie de la letra.
Haz tu propia versión
Tienes tres caminos hacia un vídeo como estos. Escribe el código tú, pide a un agente de código que lo escriba, o describe el vídeo a una herramienta que lo renderice por ti.
Muchos creadores de la biblioteca construyen con código. Remotion, el renderer que usa Potto, se describe como una forma de crear vídeos y motion graphics con React, y publica skills de agente para que los agentes de código puedan trabajar con él. La página de skills de Potto reúne skills de agente gratuitas de autores terceros que puedes instalar en un agente que lee archivos SKILL.md; se ejecutan en tu propio agente, con tu propio modelo.
Claude Motion de Anthropic, anunciado el 8 de octubre de 2026 y en beta en los planes Team y Enterprise a fecha de 2026-10-12, anima texto, gráficos, formas e imágenes a partir de un prompt y exporta un MP4. Potto no es Claude Motion y no tiene relación oficial con Anthropic. El artículo sobre alternativas a Claude Motion compara los caminos con hechos que puedes comprobar.
El camino de la descripción es la herramienta de motion graphics con IA de Potto. Le das un prompt, un enlace público o un documento. Claude Opus 5.5 escribe el brief, el guion y el storyboard, y Remotion renderiza las escenas en un MP4 con voz en off, subtítulos y música, en 16:9, 9:16 o 1:1. Puedes editar el storyboard pantalla a pantalla o pedir un cambio en el chat. En las páginas de la biblioteca, un vídeo con un prompt compartido tiene un botón «Usar este prompt» que lo envía al creador de vídeo de Potto. El resultado es la versión de Potto, con sus propios tipos de escena y estilos, así que no coincidirá con el original; trata el original como referencia de la idea, el ritmo y el aspecto.
Las vistas previas y los storyboards no cuestan nada; los créditos se cobran al exportar, y el total se muestra antes de que confirmes (consulta los precios). Potto no genera metraje de acción real, avatares ni personas, y no edita un vídeo que ya tengas.
Preguntas frecuentes
¿Cuáles son los tipos de motion graphics?
Los tipos de motion graphics suelen agruparse por dónde aparecen: secuencias de títulos de cine y televisión, gráficos de emisión y de informativos, publicidad y branding, tipografía cinética, animación de interfaces de usuario, y vídeos explainer o promocionales. Esta guía los ordena por tarea: películas de lanzamiento, pantallas de producto, kinetic type, historias de datos, explainers y animaciones de logo. El artículo de Wikipedia sobre motion graphic design también separa gráficos explainer, emotivos y promocionales, según si el objetivo es aclarar, evocar un sentimiento o aumentar el conocimiento.
¿Qué se considera motion graphics?
Los motion graphics son diseño gráfico animado: texto, formas, iconos, gráficos e imágenes puestos en movimiento para informar, promocionar o marcar. Adobe los define como «gráficos con movimiento» y los describe como piezas de animación más cortas que entretienen o transmiten información. Un vídeo que anima una captura de producto, un gráfico de barras o un logo es motion graphics. Un largometraje animado con personajes y una trama suele llamarse animación.
¿Cuál es la diferencia entre motion graphics y animación?
Los motion graphics mueven elementos de diseño gráfico, como tipos, formas y gráficos, normalmente para transmitir información en una pieza corta, mientras que la animación, en un sentido más amplio, cuenta historias con personajes y tramas. Los dos se solapan, así que la línea es cuestión de propósito y de escala más que de técnica. La guía de Adobe traza la línea por duración y propósito: los motion graphics son piezas más cortas que entretienen o transmiten información.
¿Cuánto debe durar un vídeo de motion graphics?
Depende de la tarea. En la biblioteca de Potto a fecha de 2026-10-12, la duración mediana es de unos 9 segundos para la animación de logo, 15 para el kinetic type, 30 para los vídeos de lanzamiento, 35 para las historias de datos, 36 para las pantallas de producto y 60 para los explainers. Ajusta la duración al número de ideas: una idea cabe en 15 segundos, y un problema, tres funciones y una frase de cierre caben en 30 a 45. Las opciones de duración de Potto son 15, 30, 45, 60 y 90 segundos.
¿Los vídeos de esta guía se hicieron con Potto?
No. Los hicieron creadores independientes y cada uno se acredita a su autor por el usuario de X. Potto no los reclama como obra propia. Están incluidos como referencias, y la página de cada obra enlaza la publicación original cuando hay una disponible.
¿Puedo hacer motion graphics como estos con Potto?
Sí, para los tipos de motion graphics que ofrece Potto: películas de lanzamiento, pantallas de producto, vídeos llevados por el texto, historias de datos y explainers construidos a partir de sus once tipos de escena, doce estilos y los colores de tu marca. Potto renderiza su propia versión a partir de tu prompt, así que el resultado no copia un original, y no admite código de animación a medida, estilos dibujados a mano ni animación libre de letras.
Páginas de Potto AI de las 21 obras, sus autores, duraciones, proporciones y prompts compartidos, y de las medianas de la biblioteca por categoría (comprobadas el 2026-10-12)
Potto AI
Crea tu próximo video de lanzamiento.
Convierte aquello que despertó tu interés en un video o una imagen propios. Trae capturas de pantalla, un tema o un prompt.
