12 prompts de motion graphics para tus reels

Para abrir un reel con tu gancho: el titular aparece letra a letra, como si lo escribieras en directo.

Crea una animación en un único archivo HTML con CSS, en formato vertical 1080x1920 que se adapte a la pantalla. Fondo de color [COLOR FONDO]. En el centro, el texto "[TU TITULAR]" aparece letra a letra como en una máquina de escribir, en tipografía sans serif gruesa, color [COLOR TEXTO], tamaño grande y legible en móvil. Un cursor vertical de color [COLOR ACENTO] parpadea al final del texto. Cuando el texto está completo, se mantiene 2 segundos, se borra de derecha a izquierda y el ciclo vuelve a empezar. Duración total del ciclo: 6 segundos, en bucle infinito. Sin sonido ni elementos adicionales.

Para dirigir la mirada a la palabra que importa de tu frase.

Crea una animación en un único archivo HTML con CSS, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. En el centro, la frase "[TU FRASE]" en tipografía sans serif gruesa, color [COLOR TEXTO]. La palabra "[PALABRA CLAVE]" va en color [COLOR ACENTO] y, un segundo después de aparecer la frase, se dibuja debajo de ella un subrayado grueso de izquierda a derecha con bordes redondeados y movimiento suave (ease-in-out). El subrayado se mantiene 2 segundos y se recoge de izquierda a derecha. Ciclo de 4 segundos en bucle infinito.

Subtítulos dinámicos que acompañan tu voz y retienen a quien ve sin sonido.

Crea una animación en un único archivo HTML con CSS, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. La frase "[TU FRASE]" aparece palabra a palabra en el centro: cada palabra sube 20 píxeles mientras pasa de transparente a visible, con 0,35 segundos de diferencia entre palabras. La palabra "[PALABRA DESTACADA]" va en color [COLOR ACENTO] y el resto en [COLOR TEXTO], tipografía sans serif gruesa y grande. Cuando la frase está completa se mantiene 2 segundos y desaparece de golpe. Ciclo en bucle infinito.

Para mostrar un dato con impacto: la cifra sube desde cero. Usa solo cifras reales y con fuente.

Crea una animación en un único archivo HTML con CSS y JavaScript, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. En el centro, un número muy grande en tipografía sans serif extra gruesa, color [COLOR TEXTO], que cuenta desde 0 hasta [TU CIFRA] en 2 segundos con desaceleración al final (ease-out), seguido del símbolo "[SÍMBOLO, por ejemplo % o €]". Debajo, en texto más pequeño y color [COLOR ACENTO], la etiqueta "[QUÉ MIDE LA CIFRA]". Al terminar, la cifra hace un pequeño rebote de escala, se mantiene 2 segundos y el ciclo vuelve a empezar. Bucle infinito.

Para comparar dos situaciones de un vistazo: lo que había y lo que hay.

Crea una animación en un único archivo HTML con CSS, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. Dos barras verticales con esquinas superiores redondeadas, una junto a otra, crecen desde la base: la primera, etiquetada "[ETIQUETA 1, por ejemplo Antes]", en un tono apagado y hasta el [ALTURA 1]% de la altura; la segunda, etiquetada "[ETIQUETA 2, por ejemplo Después]", en color [COLOR ACENTO] y hasta el [ALTURA 2]%, empezando 0,4 segundos más tarde. Encima de cada barra aparece su valor al terminar de crecer. Título superior: "[TU TÍTULO]" en color [COLOR TEXTO]. Las barras se mantienen 2 segundos y bajan. Ciclo de 5 segundos en bucle.

Para contar una evolución: la línea avanza y el punto final destaca el resultado.

Crea una animación en un único archivo HTML con SVG y CSS, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. Un gráfico de línea con [NÚMERO] puntos que representan [QUÉ SE MIDE] a lo largo de [PERIODO]. La línea, gruesa y de extremos redondeados en color [COLOR TEXTO], se dibuja de izquierda a derecha en 2 segundos. Al llegar al final aparece un punto de color [COLOR ACENTO] con un halo que late y, junto a él, la etiqueta "[DATO FINAL]". Ejes mínimos y discretos, sin cuadrícula. Se mantiene 2 segundos, se borra y vuelve a empezar. Bucle infinito.

Para explicar tu embudo: entran muchos, se quedan los que encajan.

Crea una animación en un único archivo HTML con CSS, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. Un embudo dibujado con línea en color [COLOR TEXTO] ocupa el centro. Desde arriba caen de forma continua pequeños círculos de color [COLOR SECUNDARIO]: la mayoría se desvanecen al tocar las paredes del embudo y solo uno de cada cinco, en color [COLOR ACENTO], atraviesa el cuello y sale por abajo. Junto al embudo, tres etiquetas de arriba abajo: "[ETAPA 1]", "[ETAPA 2]" y "[ETAPA 3]". Movimiento suave y continuo, en bucle infinito.

Para mostrar un proceso en tres pasos: un punto de luz recorre cada etapa.

Crea una animación en un único archivo HTML con CSS, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. Tres círculos grandes conectados por una línea, con un icono sencillo y una etiqueta debajo de cada uno: "[PASO 1, por ejemplo Comentario]", "[PASO 2, por ejemplo Mensaje]" y "[PASO 3, por ejemplo CRM]". Un punto luminoso de color [COLOR ACENTO] recorre la línea del primer círculo al segundo, se detiene medio segundo, y continúa hasta el tercero. Cada círculo se ilumina en [COLOR ACENTO] cuando el punto llega a él. Título arriba: "[TU TÍTULO]" en color [COLOR TEXTO]. Ciclo de 4 segundos en bucle infinito.

Para resumir pasos o beneficios: cada punto se marca en orden.

Crea una animación en un único archivo HTML con CSS, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. Una lista de [NÚMERO] elementos alineados a la izquierda en el centro de la pantalla: [ELEMENTO 1], [ELEMENTO 2], [ELEMENTO 3]. Cada elemento tiene a su izquierda una casilla cuadrada con bordes redondeados. Las casillas se marcan una tras otra, con 0,6 segundos de diferencia, con una marca de verificación que aparece con un pequeño rebote en color [COLOR ACENTO]; al marcarse, el texto pasa de [COLOR TEXTO] atenuado a [COLOR TEXTO] pleno. Con todo marcado, se mantiene 2 segundos y se reinicia. Bucle infinito.

Para cerrar cada pieza con tu firma: el símbolo gira y aparece tu nombre.

Marketing Digital VIP

Crea una animación en un único archivo HTML con CSS, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. En el centro aparece un círculo de color [COLOR ACENTO] que crece desde cero mientras gira un cuarto de vuelta, con un rebote suave al final. Dentro del círculo, las iniciales "[TUS INICIALES]" en [COLOR TEXTO]. Inmediatamente después, a la derecha del círculo, el nombre "[TU MARCA]" se descubre de izquierda a derecha como una cortina, en tipografía sans serif gruesa. Debajo, en texto pequeño, "[TU WEB O USUARIO]". Se mantiene 2 segundos y se recoge en orden inverso. Ciclo de 5 segundos en bucle. (Si tienes tu logo en PNG, pide después en el mismo chat que sustituya el círculo por tu imagen.)

Para presentarte en un video hablado: nombre y cargo entran desde un lado.

Crea una animación en un único archivo HTML con CSS, formato vertical 1080x1920 adaptable, con fondo transparente o en [COLOR FONDO]. En el tercio inferior izquierdo entra desde la izquierda una banda de color [COLOR ACENTO] con el texto "[TU NOMBRE]" en tipografía sans serif gruesa color blanco, y 0,2 segundos después, debajo, una banda blanca más estrecha con "[TU CARGO O ESPECIALIDAD]" en color [COLOR FONDO]. Movimiento rápido al entrar y suave al frenar. Se mantiene 3 segundos y sale por el mismo lado. Ciclo de 5 segundos en bucle.

Para el final del reel: un botón que pide la acción (comentar, escribir, guardar) y atrae la mirada.

Crea una animación en un único archivo HTML con CSS, formato vertical 1080x1920 adaptable. Fondo [COLOR FONDO]. En el centro, un botón con forma de píldora de color [COLOR ACENTO] con el texto "[TU LLAMADA A LA ACCIÓN, por ejemplo Comenta QUIERO]" en blanco y tipografía sans serif gruesa. El botón late suavemente (crece un 6 % y vuelve) mientras un anillo del mismo color se expande desde sus bordes y se desvanece, como una onda. Encima del botón, un texto pequeño en [COLOR TEXTO]: "[FRASE PREVIA, por ejemplo ¿Quieres la guía?]". Ciclo de 1,6 segundos en bucle infinito.