Burbujas de chat
Una animación de mensajes de texto con tu propia conversación
Un hilo estilo iMessage en un teléfono grande sobre un fondo crema cálido: burbujas grises y azules aparecen desde abajo y empujan la conversación hacia arriba, llega un video adjunto, los puntos de escritura laten y el último mensaje queda marcado como “Read”. Seis segundos, en vertical, y cada palabra es tuya.
- 6s
- duración
- 4
- relaciones de aspecto
- 10
- controles
- 720p
- exportaciones gratis e ilimitadas
UI & devices · 6s · 9:16
Chat · Messages · Phone · Story
Una animación de burbujas de chat que se comporta como un teléfono real
La mayoría de las animaciones de mensajes de texto son una pila de rectángulos redondeados que aparecen con un fundido sobre un color plano. Esta está construida como la pantalla real: barra de estado, flecha de regreso con un contador de no leídos, la foto y el nombre del contacto arriba, un ícono de videollamada, una barra de escritura con micrófono abajo, y un hilo que se mantiene pegado al borde inferior, así que cada burbuja nueva empuja la conversación hacia arriba exactamente como lo hace iOS.
Los cuatro mensajes se alternan (gris para los recibidos, azul para los enviados), con un video adjunto de 0:12 entre el segundo y el tercero y una burbuja de escritura que late antes de que llegue la respuesta. El nombre del contacto, su foto, la miniatura del video y los cuatro mensajes son controles con nombre propio, así que los mismos seis segundos pueden ser la conversación de una demo de producto, un intercambio con un cliente o el gancho de un video corto. Es una plantilla corta, no un generador completo de historias de chats falsos: cuatro mensajes, un adjunto y un aviso de lectura.
6 segundos, tres momentos
Qué aparece en pantalla y cuándo. Cada elemento nombrado aquí es una capa del documento: puedes hacer clic en cualquiera en el lienzo y cambiarlo.
Momento 1 · 1.08s
Llega el primer mensaje
La foto y el nombre del contacto están en el encabezado, la marca de hora estilo iMessage apareció con un fundido y la primera burbuja gris subió desde la parte inferior del hilo.
Momento 2 · 2.4s
La respuesta y el adjunto
La respuesta azul empujó el hilo hacia arriba y el video adjunto, con su botón de reproducción y su etiqueta de 0:12, llegó debajo.
Momento 3 · 4.9s
Cuatro mensajes y luego “Read”
Los puntos de escritura dieron paso al tercer mensaje, el cuarto llegó en azul y el aviso “Read” está a punto de aparecer debajo.
Tres pasos para tu propio hilo de mensajes
- 01
Escribe los cuatro mensajes
Los mensajes 1 y 3 son las burbujas grises recibidas, y el 2 y el 4, las azules enviadas. Deja cada uno en una o dos líneas: la cuarta burbuja está pensada para pasar a una segunda línea.
- 02
Define el contacto y el adjunto
Escribe el nombre del contacto, sube una foto para el avatar redondo de arriba y una miniatura para la burbuja del video adjunto. Los dos son espacios de foto, así que tu imagen cae en el mismo marco.
- 03
Elige el acento y exporta
El acento colorea las burbujas enviadas y los íconos del encabezado. Déjalo en el azul de iOS o cámbialo por el color de tu marca, ajusta el tamaño del teléfono entre 0,8× y 1,15× y exporta.
Pegado al borde inferior
El hilo se mueve como en un teléfono
Cada burbuja nueva aparece con un pequeño rebote y toda la conversación sube para hacerle espacio. Ese detalle es lo que hace que una animación de burbujas de chat se lea como un teléfono real y no como una diapositiva.
Escribiendo, luego la respuesta
La pausa antes de la respuesta ya viene incluida
Tres puntos laten en una burbuja gris durante casi un segundo antes de que llegue el tercer mensaje. Es el momento que hace que el espectador espere la respuesta, y se reajusta con el control de velocidad.
Texto real, capas reales
Cada mensaje es texto, no una captura de pantalla
Las burbujas se dibujan con una tipografía de interfaz real al exportar, así que reescribir un mensaje nunca deja una palabra borrosa o mal escrita, y puedes reescribirlo cuantas veces quieras.
Qué puedes cambiar
Diez controles, con los mismos nombres que en el panel del estudio. La línea de la hora, la etiqueta de duración del video y el aviso “Read” son capas que puedes seleccionar con un clic y editar en el lienzo.
- Haz clic en cualquier elemento del lienzo para editarlo directamente
- O describe el cambio en una frase y deja que el asistente lo haga
- Exporta en 9:16, 16:9, 1:1, 4:5 desde el mismo documento
Controles del Studio
10 con nombre
- Message 1TextDid the launch video render?
- Message 2TextYep, sending it now
- Message 3TextWait, that took a minute?
- Message 4TextPicked a template, swapped the text.
- Contact nameTextLeila Haddad
- Contact photoPhoto
- Video thumbnailPhoto
- AccentColour#1E6FE8
- Phone sizeSlider 0.8–1.151
- SpeedSlider 0.5–21
Por qué animar una conversación en lugar de hacerle una captura
Una captura de pantalla de un chat trae el teléfono, las notificaciones y la compresión de otra persona, y no puede sostener un espacio en un feed que premia el movimiento. Una animación estilo iMessage hecha con capas de texto te da la misma forma (burbujas, una respuesta, un aviso de lectura) con tus propias palabras y tu color, y a un ritmo que el espectador realmente sigue. Además es un documento, así que una serie de cinco conversaciones son cinco ediciones, no cinco grabaciones.
Burbujas de chat: preguntas y respuestas
¿La plantilla de animación de mensajes de texto es gratis?+
Abrirla y editarla es gratis, y con una cuenta gratis puedes exportar en 720p sin límite, con una pequeña marca de agua de LazyKiwi. El 1080p sin marca de agua viene incluido en cualquier plan de pago.
¿Puedo agregar más de cuatro mensajes?+
La plantilla está diseñada para cuatro mensajes, un video adjunto y un aviso de lectura. Puedes pedirle al asistente de Motion Studio que agregue una burbuja, pero el ritmo de seis segundos está pensado para cuatro: para una historia larga de mensajes falsos, conviene un formato más largo.
¿En qué relaciones de aspecto puedo exportar?+
9:16, 16:9, 1:1 y 4:5 desde el mismo documento. Está diseñada en vertical a 1080×1920, que es donde mejor se lee un hilo de teléfono.
¿Puedo cambiar los colores y el contacto?+
Sí: el color de acento, el nombre del contacto, su foto, la miniatura del video, el tamaño del teléfono y los cuatro mensajes son controles con nombre propio.
¿Necesito After Effects?+
No. No hay archivo de proyecto ni nada que instalar: se renderiza en tu navegador y exporta un MP4 directamente.
Más social hooks
Todas las social
Tarjeta de resumen de entrenamientoEl resumen de un entrenamiento, estilo app de fitness, sobre una foto oscurecida: las calorías suben como un contador, entran tres datos y la barra de meta se dibuja hasta una estrella.
Logo al final de la rutaSobre un mapa pálido de calles blancas, una ruta se dibuja sola desde un pin de salida y pasa por tres puntos intermedios; en el destino cae un pin de mapa con tu logo y debajo aparece una tarjeta con el nombre de la marca
Historia con corte estiradoDos fotos intercambian lugares con un corte que las estira y desenfoca en horizontal; las palabras de póster se estiran con ellas bajo barras de progreso estilo historia.
Póster de cinePóster de cine: una foto oscurecida, cuatro líneas de mayúsculas gruesas que suben una por una, una línea de acento naranja y una línea de datos en tipografía condensada.
Edición de fotos anidadasEdición de fotos con imagen dentro de imagen: un recuadro pequeño crece hasta ocupar el cuadro principal y la siguiente foto se anida dentro de él, tres niveles en un bucle perfecto.
Anuncio de transmisión en vivoUna insignia LIVE y la hora entran deslizándose, tres líneas de título tamaño póster llegan de golpe desde la izquierda y una foto del invitado estilo sticker aterriza arriba a la derecha.Escribe la conversación.
Cuatro mensajes, un contacto y una miniatura. Exporta una animación vertical de burbujas de chat en más o menos un minuto.