Como criamos um filme de motion design com IA e código: o making of de 30 segundos determinísticos

“Não queremos seis slides animados. Queremos uma sequência em que cada elemento nasce do anterior, transforma-se morfologicamente e conduz o olhar do espectador para a próxima cena sem cortes abruptos.”

Introdução: O Fim dos "Slides Animados"

Se você já assistiu a vídeos sobre Inteligência Artificial nas redes sociais, provavelmente percebeu um padrão: uma sequência de prints de tela estáticos, com uma legenda flutuando e uma música genérica ao fundo. O resultado parece uma apresentação de slides de PowerPoint com transições básicas, e não um anúncio de alta agência.

Quando nos propusemos a criar a campanha "Trocar personagens e cenários com IA", estabelecemos uma regra clara: o vídeo precisa transmitir uma única transformação visual contínua.

Tomamos como referência de direção criativa o celebrado filme institucional do Google Gemini, produzido pelo estúdio Ordinary Folk. A premissa central é que a fluidez nasce da causalidade física entre elementos: a linha que corta o ator vira o contorno da barra de busca; a foto do personagem se desdobra em 360 graus e depois colapsa em zoom atravessando a lente para se conectar aos cabos de dados.

1. O QUÊ: O Conceito e os Entregáveis

O objetivo do vídeo é explicar uma técnica avançada de vídeo generativo em 30 segundos exatos (900 quadros cravados a 30 FPS):

1. Você grava uma pessoa real fazendo uma ação ou fala qualquer (vídeo base de movimento).
2. Cria uma folha de referência de 360° com o novo personagem desejado (sem alterar o fundo).
3. Conecta ambos no motor generativo e o modelo replica 100% da atuação original, mas com a nova aparência.

2. ONDE: As Ferramentas e o Pipeline em Duas Camadas

A produção foi dividida em duas camadas complementares: o Pipeline de IA Generativa (onde os assets são concebidos) e o Pipeline de Motion Design Programático (onde o vídeo ganha vida).

3. COMO: A Engenharia de Motion Design Cena a Cena

O segredo de um motion design premium está em nunca dar "fade preto" para trocar de assunto. Todo elemento deve possuir um propósito físico de transição.

4. O CÓDIGO: A Matemática do Render Determinístico

Ao contrário de gravação de tela convencional que sofre com oscilações de FPS (dropped frames) por sobrecarga de CPU, o motor MotionJS baseia-se em uma função matemática pura analítica dependente do tempo t:

Copiar Código// A função pura que desenha o quadro para qualquer segundo t
export function renderVideoFrame(ctx, t, width, height, assets) {
  ctx.clearRect(0, 0, width, height);

  if (t < 4.0)       renderScene01(ctx, t, width, height, assets);
  else if (t < 9.0)  renderScene02(ctx, t, width, height, assets);
  else if (t < 15.0) renderScene03(ctx, t, width, height, assets);
  else if (t < 20.0) renderScene04(ctx, t, width, height, assets);
  else if (t < 26.0) renderScene05(ctx, t, width, height, assets);
  else               renderScene06(ctx, t, width, height, assets);
}

// Exemplo da Cena 01: Scanline Wipe mascarado
function renderScene01(ctx, t, width, height, assets) {
  const pWipe = easeOutCubic(clamp((t - 0.8) / 0.9));
  const wipeX = 90 + pWipe * (width - 180);

  ctx.save();
  // Camada 1: Vídeo Original
  drawImageCover(ctx, assets.actorOriginal, 90, 460, width - 180, 1000);

  // Camada 2: Ator IA revelado pelo Wipe
  if (pWipe > 0.001) {
    ctx.save();
    ctx.rect(90, 460, wipeX - 90, 1000);
    ctx.clip();
    drawImageCover(ctx, assets.actorGenerated, 90, 460, width - 180, 1000);
    ctx.restore();
  }
  ctx.restore();
}

5. DESIGN DE SOM: A Ciência dos Microeventos

Animação sem áudio é apenas metade da experiência. Para este filme, sintetizamos uma trilha estéreo com eventos paramétricos em milissegundos:

• 0.8s (Wipe): Whoosh direcional em ruído branco filtrado exponencialmente.
• 1.7s (Impacto): Sub-grave de 55 Hz na revelação do congelamento de quadro.
• 4.1s–5.0s (Digitação): Transientes acústicos curtos de 8ms simulando teclas mecânicas.
• 9.5s–12.0s (Conexão): Duas notas digitais ao ancorar os arquivos e acorde harmônico ao ligar os cabos.
• 19.1s (Clique): Frequência de 1.2 kHz simulando o clique tátil de um mouse.
• 28.2s–30.0s (Hold): Fade-out suave da reverberação, encerrando em silêncio absoluto.

6. CONTROLE DE QUALIDADE: Os 7 Quality Gates

Antes de qualquer exportação, o código foi auditado por um sistema de testes automáticos com aprovação de 100%:

7. Como Reproduzir e Rodar no seu Computador

Copiar# 1. Iniciar servidor local e visualizar a animação em tempo real
npx serve .
# Abra no navegador: http://localhost:3000/template/character-swap.html

# 2. Executar a auditoria de qualidade automatizada
node engine/quality/character-swap-quality-check.js

# 3. Gerar a folha de contato do Storyboard (18 frames)
node storyboard/character-swap-generator.js

# 4. Renderizar o MP4 final em 1080x1920 @ 30 FPS com áudio
node engine/character-swap-renderer.js

Conclusão

A união entre Inteligência Artificial Generativa e Motion Design Orientado por Código inaugura um novo patamar para os criadores de conteúdo e agências: o vídeo não é refém do tempo real de renderização ou de interfaces pesadas de softwares de edição. Ajustes de texto, paletas de cores, tempos de cena ou substituição de arquivos podem ser feitos alterando algumas linhas de JavaScript.