Motion: Reels de eventos e interfaces
- Categoría:
- Motion design
- Rol:
- Concepto, motion design y diseño sonoro
- Período:
- 2026
En seis semanas, hice diez Reels verticales sobre ocho eventos de tecnología y startups en Brasil, cada uno construido dentro del sistema de marca del propio evento. Llevé cada Reel del concepto al render final en Remotion, un framework de video en React, con capas de WebGL o filtros SVG cuando la pieza lo pedía. Más abajo, la página también muestra motion en interfaces y en la web, de dos proyectos de producto: Yankee y Zyla.
Origen: los Reels son por iniciativa propia, sin encargo de ningún evento ni marca. Nueve de los diez son públicos en Instagram, todos menos el del Festival SGB. Las piezas de interfaz vienen de los casos de Yankee y Zyla en este sitio.
Lovable Day São Paulo, hecho el día del evento
El Lovable Day São Paulo se realizó el 16 de octubre de 2026, en la Community Creators Academy. Estuve ahí e hice el Reel el mismo día. La idea es un chat de Lovable que construye el evento: abre con un prompt, las fotos y los videos del día toman la pantalla bajo la frase "Do prompt ao palco" (del prompt al escenario) y el cierre vuelve al chat, con una invitación a construir el próximo. La tipografía es Inter Tight, los logos vienen del Brand Hub de Lovable y el fondo es un mesh gradient en WebGL, en modo oscuro, con colores muestreados de los fills oficiales de la marca.
Escena por escena
- 0:00El prompt "Cria o maior evento de Lovable do mundo, em São Paulo." (crea el evento de Lovable más grande del mundo, en São Paulo) se escribe en letras grandes con degradado, se acomoda en la caja de prompt y se envía.
- 0:04Vuelve como mensaje del chat, "Pensando..." late junto al corazón del logo de Lovable y la respuesta se escribe palabra por palabra: "Construindo o Lovable Day São Paulo." (construyendo el Lovable Day São Paulo).
- 0:08Cuatro tarjetas con videos del evento suben en perspectiva, con springs escalonados, y cada una cambia de clip dos veces.
- 0:11Un clic abre una de las tarjetas a pantalla completa. "Lovable", "Day" y "São Paulo" entran una palabra a la vez, y el drop de la pista cae en 0:12.
- 0:16Ocho planos del día, uno cada tres tiempos de la pista de 120 BPM, unidos por whips, cortes secos y una fuga de luz. "Do prompt" y "ao palco." entran encima, una línea a la vez.
- 0:28Cinco tarjetas inclinadas (cuatro clips y una foto) suben con springs y flotan, con motion blur en la dirección de su trayectoria.
- 0:31De vuelta en el chat, la pregunta "Quer construir o próximo?" (¿quieres construir el próximo?) recibe la respuesta "Bora construir!" (¡a construir!), y la cámara se zambulle en el botón de enviar.
- 0:33La tarjeta final trae "Lovable Day", "São Paulo", "16.10.2026" y el logo, cada línea con su propio spring, bajo la misma luz del primer cuadro.
La serie
Un Reel por cada uno de los otros siete eventos, en fragmentos de 10 segundos, sin sonido y en loop. Los enlaces abren las piezas completas en Instagram.
DevDay Exchange, Florianópolis
Toma su lenguaje de la apertura del keynote del OpenAI DevDay 2026: una cara verde plana, con ojos "0", estalla en partículas que escriben "OpenAI", y el "[2026]" de "OpenAI DevDay[2026]" se descifra letra por letra hasta convertirse en "[Floripa]". En el drop, la flor de OpenAI entra girando y la primera foto se abre dentro de ella. Cierra con "Valeu, [Floripa]" (gracias, Floripa). 27 s, evento del 22 de octubre de 2026. Make-a-thon, Friends of Figma Floripa
La pieza de resultados abre con el abrazo de la premiación, antes de cualquier logo, y pone el desafío en texto: "Crie uma experiência que gere muita ansiedade" (crea una experiencia que genere mucha ansiedad). El ganador se revela en dos tiempos: "E o resultado..." (y el resultado...), y luego "Venceu:" (ganó:) y "FinDuck". Las transiciones son formas de la propia identidad: una flor, hexágonos, encaje de bolillos y un damero. 40 s, evento del 24 de octubre de 2026. Room 30, Rivool Edition
El encuentro de Rota 14 y Rivool Finance sobre "O novo dinheiro" (el nuevo dinero). La pieza abre con "Todo empreendedor pensa no negócio. Quem pensa no dinheiro?" (todo emprendedor piensa en el negocio. ¿Quién piensa en el dinero?), y el plano final repite esa composición con la respuesta: "Uma sala inteira, na mesma mesa" (una sala entera, en la misma mesa). En el medio, el video se reproduce dentro de un "30" recortado. 32 s, evento del 30 de septiembre de 2026. Sunset Roundtable, Indicium
Vidrio acanalado en WebGL y un filtro SVG de desplazamiento que deforman las fotos del encuentro. 37 s, octubre de 2026. Festival SGB: ¿confía o verifica?
La pieza que definió las reglas de la serie, con los colores del festival y la tipografía Sora. Abre con "400 currículos. A IA fez o ranking. Você confia?" (400 currículos. La IA hizo el ranking. ¿Confías?) y responde esa pregunta al final. 40 s, septiembre de 2026. Build Day São Paulo, Claude Community
Abre con "Saí de Floripa por causa disso" (salí de Floripa por esto) y cierra con "Floripa vem aí" (la próxima es Floripa). Entre una y otra, un mapa de ruta dibujado a partir de datos del IBGE (el instituto nacional de geografía y estadística de Brasil) y los logos del press kit de Anthropic. 47 s, evento del 18 de septiembre de 2026. EAG Global Buildathon, Florianópolis
La primera pieza de la serie: un globo de puntos, un diamante de Ethereum en 3D y la pista Tides, con licencia CC-BY y con crédito. 60 s, evento del 12 de septiembre de 2026. Dos más de la serie
Una versión con voz en off de la pieza de Lovable y un segundo Reel del Make-a-thon, sobre los pitches.
Las reglas de la serie
La pieza del Festival SGB definió las reglas de fondo, de tipografía, de fotos y videos y de narrativa, y los Reels siguientes partieron de ellas. Solo el Buildathon y el Build Day vinieron antes. Cuando una marca ya tiene un lenguaje visual fuerte, la pieza sigue a la marca: la de Lovable está en modo oscuro, sobre los colores propios de Lovable, y la del DevDay toma su lenguaje del keynote del OpenAI DevDay.
- Fondo
- Un color de la marca, nunca negro por defecto. Oscuro solo cuando el material de la propia marca es oscuro.
- Tipografía
- Una frase grande a la vez, en pantalla el tiempo suficiente para leerse en el celular antes de que entre la siguiente.
- Fotos y videos
- Se mueven como objetos dentro del sistema gráfico, en tarjetas, cuadrículas y letras recortadas, o llenan todo el cuadro bajo una sola frase.
- Narrativa
- Un gancho en los primeros segundos, que el final resuelve.
- Logos
- Solo archivos oficiales, del press kit, del brand hub o del arte oficial de cada marca, con el origen anotado.
- Timing
- La mayoría de las piezas corre sobre una cuadrícula de 120 BPM, un tiempo cada 15 cuadros a 30 fps. Sunset y Lovable cortan solo sus montajes sobre ella, y las piezas del Make-a-thon y del DevDay siguen el tempo de su propia pista. El texto entra con un ease-out fuerte, y los logos y las tarjetas llegan con springs.
- Sonido
- La música, cuando la hay, es una pista con licencia o una CC-BY con crédito, y los efectos vienen de un kit de sonido sintetizado. La mezcla de estos Reels apunta a -14 LUFS, con true peak por debajo de -2 dBTP.
- Control de calidad
- Antes de que salga un render, un script recorre cada cuadro, señala cuadros negros, cuadros congelados y saltos de luma, y mide el volumen.
Motion en interfaces y en la web
Dos piezas del trabajo de producto: la pieza de motion de Yankee, una app social para iPhone, y la apertura animada del caso de Zyla en este sitio, dibujada con código.
Yankee, una red social para iPhone
Un fragmento de la pieza de Yankee. Yankee es un proyecto de cliente: una red social publicada en la App Store. Trabajo dentro de su equipo en el diseño de producto, la identidad visual y el motion. La pieza alterna tipografía cinética con las pantallas de la app. En este fragmento, "the feed adapts to you" entra palabra por palabra, cada color que se elige en el editor de perfil cambia el color de todo el perfil y, en Spin, un toque en la opción de video reúne cuatro videos en una cuadrícula.
Zyla: un rastro que dibuja la Z
La apertura del caso de Zyla, grabada desde la página en línea, que está en portugués. La distancia y el tiempo de la tarjeta suben mientras el rastro traza la Z, y al final "Pausar" pasa a "Correr de novo" (correr de nuevo). El caso de Zyla en este sitio abre con una animación dibujada en tiempo real en un canvas 2D: de noche, vista desde un dron, una corredora deja un rastro de GPS que se enciende en magenta hasta completar la Z del logo de Zyla. La zancada, la cola de caballo y la cámara se calculan solo a partir del tiempo, así que las pruebas pueden verificar cualquier cuadro. Con la opción Reducir movimiento activada, la página muestra el cuadro final.
En la propia app de Zyla, la celebración del final de la carrera muestra la ruta que la persona acaba de recorrer, sin confeti ni sonido. Prototipé su animación en la web, con un modo para Reducir movimiento, e ingeniería usó el prototipo como referencia. También investigué y diseñé el grabador de carreras con GPS y lo entregué con las pantallas en el orden del flujo, un storyboard y una especificación de motion. Ingeniería lo construyó y llegó a las tiendas de apps en septiembre de 2026.
Aprendizajes clave
Una vez definidas las reglas en la pieza del Festival SGB, cada Reel nuevo partió de decisiones ya tomadas sobre el fondo, la tipografía y el material grabado, y pude dedicar el tiempo a la idea de cada evento. Al construir en código, el control del render, el kit de sonido y, en la mayoría de las piezas, la cuadrícula de 120 BPM pasaron de un Reel al siguiente.
¿Tienes un proyecto que necesita motion?
Diseño y animo motion graphics 2D dentro del sistema propio de cada marca, desde Reels de eventos hasta interfaces de producto.
