Motion

Motion graphics para promo de producto

Una promo de 15 segundos pasa de una mascota en semitono y tarjetas de producto a un checkout escenificado, y resuelve su mensaje en el logotipo de Pennyflow.

OpenDesignAdaptación en código y producción

Oficial

Diseño de motion graphics para promo de producto15s · Motion

Descargar OpenDesign Únete a Discord

Panel de checkout de Pennyflow con el precio de un curso, campos de pago, productos opcionales y un panel con la mascota.

Un fotograma del diseño de motion graphics

Diseñado para

Películas de lanzamiento de productoPromos breves que presentan una oferta, muestran su flujo y cierran con una marca.
Sistemas de identidad en movimientoMovimiento de marca construido con reglas recurrentes de tipografía, personaje, color y transición.
Estudios de vídeo basados en códigoComposiciones guiadas por el tiempo que deben reproducir el mismo fotograma tras buscar en la línea de tiempo.

Aspectos destacados del motion design

Seis capítulos en 15 segundosUn gancho, una oferta, una tienda, un checkout, un mensaje y un cierre de marca tienen cada uno un momento definido.
Reacciones del personaje en semitonoUna mascota con tramado asiente, parpadea, salta y sigue con la mirada los objetos que aparecen a su alrededor.
El texto se convierte en el logotipoEl «flow.» final sale del mensaje y forma la cola del lockup de Pennyflow.

Vista previa del motion design de la promo de producto

Mostrar vista previa Compartir

Cómo se estructura la historia de 15 segundos

La película condensa una narrativa de ventas en seis capítulos. Empieza con una pregunta directa, muestra tres formatos vendibles, monta una tienda móvil, se expande hacia las operaciones del checkout y termina con un mensaje de creador frente a plataforma. La progresión resulta legible porque cada capítulo cambia la composición dominante, en lugar de limitarse a sustituir el texto de un mismo diseño.

Mapa de momentos de la promo de producto
Tiempo	Capítulo	Cambio visible	Compromiso práctico
0:00–0:02,45	Gancho	La mascota entra con «psst…» antes de «Got something to sell?» y un subrayado azul.	La pausa crea expectación, pero deja poco tiempo para una pregunta inicial más larga.
0:02,45–0:04,45	Anything	Las tarjetas de curso, ebook y app aparecen de golpe, una a una, sobre el campo azul.	Las apariciones secuenciales hacen legible cada categoría; añadir más tarjetas debilitaría el ritmo.
0:04,45–0:06,95	Store	Un barrido a blanco introduce una tienda en un móvil que se llena con una dirección, un estado, un avatar y productos.	El montaje rápido comunica la configuración sin explicar cada campo.
0:06,95–0:11,20	Handled	La vista se aleja del pago exprés hacia un panel de checkout con precios, ventas adicionales, IVA, pagos y marcas de finalización.	Caben varias operaciones en una escena, aunque se leen como instantáneas ilustrativas y no como una transacción completa.
0:11,20–0:15,00	Flow y End	Una escena negra con un mensaje da paso a un barrido con tramado y al logotipo completo de Pennyflow.	Los segundos finales dan más tiempo de lectura al logotipo, a costa del tiempo disponible para los detalles de producto.

Personaje, tipografía y movimiento comparten el ritmo

La mascota no se usa como presentadora estática. Aparece junto a las tarjetas de producto, sigue con la mirada los objetos nuevos y puntúa las apariciones con saltos, asentimientos, parpadeos y deformaciones de estiramiento y aplastamiento. Estas reacciones dan al espectador una segunda pista de ritmo, pero también compiten con los pequeños detalles de la interfaz. Mantener al personaje en un lado del encuadre protege de esa competencia a las tarjetas de producto y al texto del checkout.

Hacia los tres segundos, la primera tarjeta de producto aparece junto a la mascota en semitono en el capítulo azul «anything».

Semitono a escala de visualización

El personaje y los objetos de producto se dibujan en gris a resolución reducida y se convierten con una pasada de tramado ordenado por capa. La textura gruesa sigue siendo reconocible en planos generales, mientras que las pequeñas etiquetas de interfaz se mantienen limpias y tipográficas.

La tipografía cambia de voz

Inter se encarga de los titulares y del texto de interfaz, Instrument Serif Italic enfatiza palabras como «create», JetBrains Mono rotula los capítulos y el código de tiempo, y Fraunces da forma al logotipo final. El contraste aporta expresividad, pero demasiados estilos adicionales fragmentarían la secuencia breve.

El HUD como ayuda de navegación

Una etiqueta de capítulo ocupa la parte superior izquierda, mientras que Pennyflow y un código de tiempo a 60 fps ocupan la superior derecha. Quitar este HUD en la tarjeta final permite que el lockup de marca se lea como el destino y no como otro fotograma de producción.

Un checkout mostrado como pieza central de motion

El capítulo del checkout empieza cerca del control de pago exprés y después revela un panel más grande. En la vista 2 coexisten el Design Course de 149 $, el botón de Apple Pay, el campo de tarjeta, el subtotal, el total, las ventas adicionales y el panel de emisión de la mascota. Los momentos posteriores añaden valores y marcas de finalización. El movimiento de cámara convierte una acción en una historia de servicio más amplia, sin exigir una sesión de checkout realista de principio a fin.

El panel de checkout combina el pago, un panel de mascota en directo y ofertas opcionales en una composición escenificada.

Qué comunican las imágenes del checkout
Elemento	Función en el movimiento	Nota de adaptación
Curso de 149 $	Mantiene coherentes, a nivel visual, el producto seleccionado y el total.	Sustituye a la vez el producto, el precio y el periodo de facturación para que los valores no entren en conflicto.
Apple Pay y campo de tarjeta	Ofrece una vía de pago inmediata seguida de una alternativa manual.	Trátalos como accesorios de la película, salvo que el proyecto recreado se diseñe y pruebe por separado como un checkout.
Ventas adicionales de cuaderno de ejercicios y coaching	Añade productos opcionales sin salir del panel.	Limita el número de ofertas para que las etiquetas y los precios sigan siendo legibles durante el movimiento.
Marcas de pagado y sello «Handled.»	Convierte varios detalles operativos en un único momento decisivo de finalización.	Usa una afirmación de finalización solo para la historia ficticia que se muestra, no como prueba de una integración real.

La frase final se convierte en la marca

Sobre negro, «You create.» coloca la palabra en cursiva junto a una frase grande en sans-serif, mientras la mascota ocupa el lado opuesto, como se ve en la vista 3. La línea siguiente empieza con «We handle the», lo que permite que «flow.» sea algo más que texto: viaja al centro, forma la cola del logotipo y recibe las letras restantes. Esta reutilización hace que la transición resulte continua, aunque los nombres de marca de sustitución pueden necesitar otro puente si ninguna palabra sirve a la vez para la frase y para el logotipo.

La escena negra «You create.» reduce la paleta y prepara la transformación del texto en logotipo.

Reduce antes del logotipo
Pasa del detallado panel de checkout a un campo negro con una línea y un personaje. La menor carga visual crea espacio para la transformación final.
Lleva una palabra hacia delante
Elige una palabra del mensaje que pueda convertirse físicamente en parte del lockup de marca. Conserva su posición y su estilo el tiempo suficiente para que el espectador pueda seguir el movimiento.
Termina con un acento del personaje
Cuando las letras aterrizan, la mascota asoma por detrás del logotipo, salta y guiña un ojo. Esto añade un último momento sin reabrir la explicación del producto.

Origen y alcance

Esta es una recreación oficial en código de OpenDesign de una referencia de motion de terceros publicada por @achxvi. La composición se adapta con la marca ficticia Pennyflow y una banda sonora de fondo original; el crédito no implica el aval del creador de la referencia. Es una película promocional renderizada, no una tienda operativa, un flujo de pago ni un producto de comercio conectado. El flujo de trabajo de vídeo relacionado está asociado con el PR8619, aún sin fusionar, por lo que no debe describirse como disponible en la versión estable actual de OpenDesign.

Cómo crear un diseño de motion graphics para promo de producto en OpenDesign

Descargar e instalar OpenDesign
Descarga la aplicación de escritorio, instálala y completa la configuración. Crea un proyecto para tu diseño.
Descargar OpenDesign
Define los capítulos y los tiempos exactos
Planifica una película de 15 segundos como seis escenas cronometradas: gancho, gama de productos, montaje de la tienda, panel de checkout, mensaje y cierre con el logotipo. Asigna a cada escena una única tarea principal de comunicación. Mantén los precios, las etiquetas y las duraciones de los capítulos en una configuración central, para que una adaptación de marca pueda revisarse sin buscar entre el código de animación.

Prompt sugerido

Crea una película promocional de producto de 15 segundos, de borde a borde, para una marca ficticia. Usa seis pantallas: de 0 a 2,45 segundos, una pregunta guiada por una mascota; de 2,45 a 4,45, tres tarjetas de producto; de 4,45 a 6,95, una tienda en el móvil que se va montando; de 6,95 a 11,2, un panel de checkout escenificado; de 11,2 a 13,3, un mensaje del creador; y de 13,3 a 15, un cierre con el logotipo. Muestra productos de ejemplo llamados Course, Ebook y App, con un curso de 149 $ y un cuaderno de ejercicios opcional de 19 $. Anima un puntero que hace clic en «Get it now» y después muestra los detalles de pago y de entrega. Usa una paleta azul, blanca y negra con una mascota monocroma en semitono. Presenta el checkout solo como motion graphics renderizados; no sugieras funcionalidad real de pago, de cuenta ni de tienda. Mantén cada fotograma determinista tras buscar hacia atrás en la línea de tiempo. Si la exportación de vídeo no está disponible en la versión instalada de OpenDesign, conserva la composición cronometrada y captura los fotogramas con el flujo de trabajo local compatible.
Construye reacciones alrededor de las apariciones de producto
Coloca la mascota lejos de las etiquetas activas y coordina parpadeos, cambios de mirada, asentimientos y saltitos con cada aparición. Comprueba si las tarjetas siguen siendo legibles sin el personaje; si no, simplifica el movimiento o aumenta el tiempo de permanencia. Al reajustar los tiempos de un texto de sustitución, puede ser necesario ajustar también los gestos de la boca, que no son sincronización de voz.
Prueba la búsqueda en la línea de tiempo, la legibilidad y el traspaso final
Revisa fotogramas representativos cerca de los tres, ocho y doce segundos; después busca hacia atrás y confirma que los mismos instantes reproducen imágenes idénticas. Carga las fuentes incluidas antes de reproducir y mantén los controles fuera de los fotogramas capturados. Verifica que los totales coincidan, que las etiquetas pequeñas resistan el contraste del semitono y que el mensaje final pueda transformarse en el logotipo de sustitución sin un salto inexplicado.
Exportar y obtener un enlace para compartir
Exporta tu diseño terminado y luego usa Compartir en OpenDesign para obtener un enlace. Abre el enlace en una ventana del navegador independiente y comprueba que la versión prevista y sus recursos estén disponibles antes de enviarlo.