Motion: Reels de eventos e interfaces
- Categoria:
- Motion design
- Papel:
- Conceito, motion design e sound design
- Período:
- 2026
Em seis semanas, fiz dez Reels verticais sobre oito eventos de tecnologia e startups no Brasil, cada um dentro do sistema de marca do evento. Levei cada Reel do conceito ao render final em Remotion, um framework de vídeo em React, com camadas de WebGL ou filtros SVG quando a peça pedia. Mais abaixo, a página mostra também motion em interfaces e na web, de dois projetos de produto: Yankee e Zyla.
Origem: os Reels são autorais, sem encomenda de nenhum evento ou marca. Nove dos dez são públicos no Instagram, todos menos o do Festival SGB. As peças de interface vêm dos cases do Yankee e da Zyla neste site.
Lovable Day São Paulo, feito no dia do evento
O Lovable Day São Paulo aconteceu em 16 de outubro de 2026, na Community Creators Academy. Eu estava lá e fiz o Reel no mesmo dia. A ideia é uma conversa na Lovable que constrói o evento: abre com um prompt, as fotos e os vídeos do dia tomam a tela sob a frase "Do prompt ao palco" e o fim volta para o chat, com o convite para construir o próximo. A tipografia é Inter Tight, as logos vêm do Brand Hub da Lovable e o fundo é um mesh gradient em WebGL no modo escuro, com as cores amostradas da paleta oficial da Lovable.
Cena a cena
- 0:00O prompt "Cria o maior evento de Lovable do mundo, em São Paulo." é digitado em letras grandes com gradiente, encaixa na caixa de prompt e é enviado.
- 0:04Ele volta como mensagem do chat, o "Pensando..." pulsa ao lado do coração da logo da Lovable e a resposta se escreve palavra por palavra: "Construindo o Lovable Day São Paulo."
- 0:08Quatro cards com vídeos do evento sobem em perspectiva, com spring, um depois do outro, e cada um troca de vídeo duas vezes.
- 0:11Um clique abre um dos cards em tela cheia. "Lovable", "Day" e "São Paulo" entram uma palavra por vez, e o drop da trilha cai em 0:12.
- 0:16Oito planos do dia, um a cada três tempos da trilha de 120 BPM, ligados por whip, corte seco e vazamento de luz. "Do prompt" e "ao palco." entram por cima, uma linha por vez.
- 0:28Cinco cards inclinados (quatro vídeos e uma foto) sobem com spring e flutuam, com desfoque na direção do movimento.
- 0:31De volta ao chat, a pergunta "Quer construir o próximo?" recebe a resposta "Bora construir!", e a câmera mergulha no botão de enviar.
- 0:33O card final traz "Lovable Day", "São Paulo", "16.10.2026" e a logo, cada linha com o seu spring, sob a mesma luz do primeiro quadro.
A série
Um Reel para cada um dos outros sete eventos, em trechos de 10 segundos, sem som e em loop. Os links abrem as peças completas no Instagram.
DevDay Exchange, Florianópolis
A linguagem vem da abertura do keynote do OpenAI DevDay 2026: um rosto verde chapado, com olhos "0", explode em partículas que escrevem "OpenAI", e o "[2026]" de "OpenAI DevDay[2026]" se embaralha até virar "[Floripa]", letra por letra. No drop, a flor da OpenAI entra girando e a primeira foto se abre dentro dela. O fecho é "Valeu, [Floripa]". 27 s, evento de 22 de outubro de 2026. Make-a-thon, Friends of Figma Floripa
O Reel do resultado abre no abraço da premiação, antes de qualquer logo, e põe o desafio em texto: "Crie uma experiência que gere muita ansiedade". O vencedor é revelado em dois tempos: "E o resultado..." e depois "Venceu:" e "FinDuck". As transições são formas da própria identidade: flor, hexágonos, renda de bilro e xadrez. 40 s, evento de 24 de outubro de 2026. Room 30, Rivool Edition
O encontro da Rota 14 com a Rivool Finance sobre "O novo dinheiro". A peça abre com "Todo empreendedor pensa no negócio. Quem pensa no dinheiro?", e o plano final repete a composição da abertura com a resposta: "Uma sala inteira, na mesma mesa". No meio, o vídeo aparece dentro de um "30" vazado. 32 s, evento de 30 de setembro de 2026. Sunset Roundtable, Indicium
Vidro canelado em WebGL e um filtro SVG de deslocamento distorcem as fotos do encontro. 37 s, outubro de 2026. Festival SGB: confia ou confere?
A peça que definiu as regras da série, nas cores do festival e na fonte Sora. Abre com "400 currículos. A IA fez o ranking. Você confia?" e responde a essa pergunta no final. 40 s, setembro de 2026. Build Day São Paulo, Claude Community
Abre com "Saí de Floripa por causa disso" e fecha com "Floripa vem aí". No meio, um mapa de rota feito com dados do IBGE e as logos do press kit da Anthropic. 47 s, evento de 18 de setembro de 2026. EAG Global Buildathon, Florianópolis
A primeira peça da série: um globo de pontos, um diamante do Ethereum em 3D e a trilha Tides, licenciada em CC-BY e com crédito. 60 s, evento de 12 de setembro de 2026. Mais dois da série
Uma versão com narração da peça da Lovable e um segundo Reel do Make-a-thon, sobre os pitches.
As regras da série
A peça do Festival SGB definiu as regras de fundo, de tipografia, de fotos e vídeos e de narrativa, e os Reels seguintes partiram delas. Só o Buildathon e o Build Day vieram antes. Quando a marca já tem uma linguagem visual forte, a peça segue a marca: a da Lovable roda em modo escuro sobre as cores da própria Lovable, e a do DevDay toma a linguagem do keynote do OpenAI DevDay.
- Fundo
- Uma cor da marca, nunca preto por padrão. Escuro só quando o material da própria marca é escuro.
- Tipografia
- Uma frase grande por vez, na tela o tempo suficiente para ser lida no celular antes de a próxima entrar.
- Fotos e vídeos
- Entram como objetos dentro do sistema gráfico, em cards, grids e letras vazadas, ou ocupam o quadro inteiro sob uma única frase.
- Narrativa
- Um gancho nos primeiros segundos, que o final resolve.
- Logos
- Só arquivos oficiais, do press kit, do brand hub ou da arte oficial de cada marca, com a origem anotada.
- Timing
- A maior parte das peças roda numa grade de 120 BPM, um tempo a cada 15 quadros a 30 fps. Sunset e Lovable cortam só as montagens nela, e as peças do Make-a-thon e do DevDay seguem o andamento da própria trilha. O texto entra com um ease-out forte, e logos e cards chegam com spring.
- Som
- A música, quando a peça tem, é uma faixa licenciada ou uma CC-BY com crédito, e os efeitos vêm de um kit sintetizado. A mixagem destes Reels mira -14 LUFS, com true peak abaixo de -2 dBTP.
- Checagem
- Antes de um render sair, um script varre cada quadro, aponta quadros pretos, quadros congelados e saltos de luma, e mede o volume.
Motion em interfaces e na web
Duas peças do trabalho de produto: a peça de motion do Yankee, um app social para iPhone, e a abertura animada do case da Zyla neste site, feita em código.
Yankee, rede social para iPhone
Um trecho da peça do Yankee. O Yankee é um projeto de cliente: uma rede social publicada na App Store. Trabalho dentro do time deles no product design, na identidade visual e no motion. A peça alterna tipografia cinética com as telas do app. Neste trecho, "the feed adapts to you" entra uma palavra por vez, cada cor escolhida no editor muda a cor do perfil inteiro e, no Spin, um toque na opção de vídeo reúne quatro vídeos em uma grade.
Zyla: um rastro de GPS que forma o Z
A abertura do case da Zyla, gravada da página no ar. A distância e o tempo do card sobem enquanto o rastro traça o Z, e no fim "Pausar" vira "Correr de novo". O case da Zyla neste site abre com uma animação renderizada ao vivo em canvas 2D: à noite, vista de drone, uma corredora deixa um rastro de GPS que acende em magenta até completar o Z da marca. Passada, rabo de cavalo e câmera são calculados só a partir do tempo, então os testes conferem qualquer quadro. Com movimento reduzido, a página mostra o quadro final.
No próprio app da Zyla, a celebração do fim da corrida mostra a rota que a pessoa acabou de fazer, sem confete nem som. Prototipei a animação em web, com um modo de movimento reduzido, e a engenharia usou o protótipo como referência. Também pesquisei e fiz o design do gravador de corrida com GPS e entreguei o handoff com as telas na ordem do fluxo, um storyboard e a spec de movimento. A engenharia construiu o gravador, que chegou às lojas em setembro de 2026.
Principais aprendizados
Com as regras definidas no Reel do Festival SGB, cada Reel novo partiu de decisões já tomadas sobre fundo, tipografia e vídeo, e o tempo foi para a ideia de cada evento. Por ser código, a checagem do render, o kit de som e, na maior parte das peças, a grade de 120 BPM passaram de um Reel para o seguinte.
Tem um projeto que precisa de motion?
Crio e animo motion 2D dentro do sistema de cada marca, de Reels de evento a interfaces de produto.
