clementsprs/product-motion-film

Filme de motion premium para produto

Uma receita para filmes de produto de ~40 s que parecem o vídeo de lançamento da própria marca e transmitem uma sensação de vitalidade: impulsionados pela interface, sem pessoas, sem narração, com música e alguns acentos sonoros. Foi refinada ao longo de cerca de quinze rodadas de revisão em um filme de lançamento real, incluindo a revisão de conteúdo do próprio parceiro da marca; toda regra abaixo começou como uma nota que voltou na revisão.

Padrões de código: references/remotion-patterns.md. Leitura da marca: references/brand-reading.md. Formato do briefing: references/brief-template.md.

Entradas a serem coletadas primeiro

1. O briefing: uma linha por capacidade (o que o usuário pergunta, o que o produto faz, o que a IA responde). Se não houver, escreva-o (references/brief-template.md) e obtenha aprovação antes de construir.
2. As superfícies ativas da marca: a página de marketing mais próxima do tópico e o aplicativo do produto, abertos em um navegador.
3. Ativos que o usuário traz: logotipo (SVG), ícone, padrão de fundo, logotipos de parceiros e canais (arquivos reais), fontes woff2 licenciadas, avatares para pessoas fictícias (gerados ou licenciados) e música: pergunte se eles têm uma faixa de que gostam antes de gerar uma.
4. Formatos: 16:9 primeiro; cortes 1:1 e 4:5 somente após a aprovação do 16:9.

Se você não puder abrir um navegador, diga isso e peça capturas de tela. Nunca adivinhe as cores ou a tipografia de uma marca de memória.

1. Leia a marca do site ativo e do aplicativo

Extraia os valores reais com um pequeno script na página (getComputedStyle no H1, body, botão principal, um cartão; veja references/brand-reading.md): fonte / peso / tracking do título, cinzas de tinta e secundários, cor de destaque, raio do cartão e linhas finas, o tratamento de fundo, o visual característico (por exemplo, um cenário de céu noturno) e o SVG do logotipo. Escreva cada valor em um único theme.ts com onde e quando foi lido; nenhum literal de cor em nenhum outro lugar.

Uma versão construída em um kit de motion genérico foi rejeitada como "não premium, não alinhada à marca": construa sobre o próprio sistema ativo da marca.

2. Estrutura: uma conversa contínua

Parte	Duração	Conteúdo
Gancho	~5 s	As IAs com as quais funciona como logotipos completos com nomes, alternando em um chip e terminando com todos os seus ícones juntos; uma breve afirmação de duas linhas (tinta + cinza); o logotipo do produto entra com impacto (" faz funcionar.")
Conversa ×4	~7-10 s cada	O prompt surge e se digita grande no centro → enviado, desliza para a direita → linha de status ("Pesquisando …" + o nome real da ferramenta, pontos → ✓) → o cartão do produto aparece dentro da thread e é reproduzido completamente → a resposta da IA flui em um balão de mensagem
Final	~3,2 s	O fundo escuro da marca sobe em tela cheia (o único momento escuro); "Todo o poder da [logotipo], agora na sua IA."; URL simples

• Sem interstícios, sem cartões de título, sem legendas no topo. Uma discussão mostra as capacidades. Cada novo prompt é a transição: a thread rola, e a nova mensagem que surge empurra a troca anterior para cima. Dentro de uma etapa, a câmera vai de prompt → cartão do produto → resposta.

• Uma coisa em foco por vez. Sem tela dividida com o chat de um lado e o produto do outro ("muita informação na tela").

• Fundo claro durante todo o tempo. Os resultados do produto vivem na conversa como cartões; um painel escuro subindo no meio do filme parecia um corte chocante. O escuro é para o cartão final.

• Neutro em relação à IA quando o produto funciona com qualquer IA (um servidor MCP, uma API pública): nenhum logotipo, tipografia ou cor de um único assistente no chat. Cabeçalho = um chip " MCP" + "funciona com" + os ícones da IA; respostas na fonte do corpo do produto com uma cauda na cor do produto nas palavras ainda chegando.

• A IA fala em balões de mensagem (branco, à esquerda, oposto ao balão cinza do usuário). Texto de resposta simples é lido como uma legenda, "não faz parte da conversa". Nenhum avatar necessário.

• Termine a execução antes da resposta: a resposta começa apenas quando o cartão termina. Duração da etapa = digitação + status + tempo de execução do cartão + resposta.

• Tamanhos para dispositivos móveis: prompt ~62 px, status ~44 px, resposta ~58 px em uma tela de 1920 × 1080; cartões de produto escalados ~1,2-1,4× (por cartão, para que o mais alto ainda ultrapasse o cabeçalho).

• Variante liderada pelo agente (o produto É o agente de IA): mesma gramática com papéis invertidos. O agente escreve primeiro (balões brancos, sua marca + marca nominativa no cabeçalho), o usuário decide (balões cinza, uma nota de voz com forma de onda ao vivo e transcrição). Mostre o dispositivo, não o escreva: um momento de telefone abre em uma tela de bloqueio com a notificação push do agente que cai, então um toque e o banner se expande para o quadro inteiro como um aplicativo abrindo, e a conversa está dentro dele; o ícone do aplicativo é o rosto do agente em um bloco branco. O dispositivo aparece na largura: momentos de telefone ficam dentro de um quadro de telefone (coluna estreita, a notificação abre dentro dele), momentos de laptop usam a largura total; o quadro se abre entre eles e todo o histórico se reorganiza para a nova largura (disponha a thread duas vezes, telefone e laptop, e misture posições e tamanhos com o quadro), para que a conversa nunca desapareça. Nomeie o dispositivo uma vez ("No seu laptop"), depois os divisores mostram apenas a hora. Nunca corte a cena de prova (uma história de cliente, uma referência) apenas para atingir uma duração: ela voltou a pedido. Em um filme liderado por agente, a pequena marca do agente fica ao lado de cada uma de suas mensagens (ao contrário dos filmes MCP neutros em relação à IA). Um dia entre dispositivos se torna um chip de contexto de cabeçalho que muda ("No seu telefone · 8:42 AM" → "No seu laptop") mais divisores de tempo na thread, nunca quadros de dispositivo. Construa como uma lista de itens (agente / usuário / voz / cartão / divisor, cada um com uma duração de leitura) e calcule os inícios, o layout e a câmera de rolagem a partir dela.

• Variante de agente proativo (preferida para externo): quando o ponto é que o agente trabalha para você, não mostre um chat. O agente ENVIA (uma linha de cabeçalho em sua voz + um cartão) e o usuário apenas toca em Aceitar ou Pular (pressionar + ondulação, então um chip "Aceito"; Pular / Aceitar por linha quando o agente envia uma lista); quando o cartão enviado já tem seu próprio botão de ação ("Adicionar às chamadas de hoje"), o usuário toca nesse botão e não há uma linha de Aceitar separada. Um usuário digitando instruções ("corte a introdução e envie") é lido como um chat LLM simples. Permita UM momento além de Aceitar: o usuário faz uma pergunta que o agente responde com um insight ("Algo que eu deva saber sobre o Tom?") ou pede um extra que ele faz na hora; nunca uma correção de cópia. Abra cortes externos com energia: uma tempestade de notificações de aplicativos reais se acumulando e tremendo, jogadas para longe, então "Muitas threads." e a marca do agente entrando com impacto.

3. Cópia

• Os prompts soam como uma pessoa continuando uma conversa: a continuidade vem de referências ao que veio antes ("para eles", "esses sinais", "execute isso"), com no máximo uma leve reação. Nunca uma palavra de elogio em cada prompt.
• Específico e carregando o valor, com um vocabulário compartilhado entre as etapas (por exemplo, "sinais de intenção de compra" em cada prompt).
• Poucos números: nenhum no gancho (sem preço); os números vivem dentro dos cartões. Números de afirmação têm uma fonte no briefing; números de interface são sinalizados como ilustrativos; pessoas e empresas são fictícias.
• Nomes reais de ferramentas ou APIs na linha de status, verificados na lista real de ferramentas do produto. Nunca invente um.
• Logotipos substituem nomes: o logotipo dentro da linha de fechamento; um logotipo + word lockup mantém seu espaço de palavra. Nenhuma seta ou botão em uma URL: nada é clicável em um vídeo.

4. Cartões de produto: mostre o que a IA realmente fez

• Um cartão por etapa, 3-4 linhas, o logotipo completo do produto no cabeçalho.
• Qualitativo, saída da era da IA, não encanamento: sem tags de mesclagem {{firstName}} ("não qualitativo o suficiente para a era da IA"). Mostre uma mensagem real escrita ao vivo para um registro, a frase extraída de seus dados destacada com um traço de marcador e um ângulo de uma linha.
• Fluxos de trabalho são fluxos com ramificações condicionais (etapa com suas palavras reais → "Aguardar 3 dias" → "Não aberto" → e-mail / "Aberto, sem resposta" → mensagem de voz com forma de onda ao vivo), não uma linha de ícones de dia. O cartão cresce para baixo conforme o fluxo desenha: nunca um bloco vazio.
• Logotipos reais de canais (LinkedIn, Gmail…) tornam autêntico.
• Listas de status são logs de execução modernos: trilha fina que preenche, pontos pendentes → anel giratório → marca de seleção preenchida na cor da marca, uma linha de resultado por etapa, uma pequena duração. Quadrados de ícones com marcas de seleção verdes parecem "antigos".
• Uma mudança de estado é seu próprio momento: um botão de alternância espera o cartão pousar, então a trilha aparece gradualmente, o botão se comprime, um anel de pulso se espalha, um rótulo "Ativo" aparece, e só então a execução começa.
• Corte a interface que não pertence à ação mostrada (um cartão de resumo de chat de equipe em uma etapa de agendamento "não faz sentido").

5. Gramática de movimento: dinâmico nos elementos, legível nas pausas

A referência: filmes de lançamento lúdicos onde cada elemento tem física (um exemplo público: "We decided to give Grok Bot a phone" da Allo, Out 2026; nenhum mascote necessário) e os próprios filmes de lançamento de assistentes de IA (conversa sem moldura, tipo grande).

• Molas, não facilitações para tudo que chega (spring() com ultrapassagem; predefinições e um kick() amortecido no arquivo de padrões).
• Palavras saltam com uma leve inclinação e empurram umas às outras conforme uma linha se constrói; linhas antigas são jogadas fora, nunca apenas desbotadas. O logotipo entra com impacto e a linha treme uma vez.
• Câmera da thread: disponha a thread a partir de estimativas de comprimento de texto e role-a com molas suaves entre pontos de foco (novo prompt centralizado → cartão centralizado → resposta à vista), pequenos solavancos no envio e no pouso do cartão. O cabeçalho fica em um fade branco para que o conteúdo rolado deslize sob ele.
• Cartões pousam com uma mola (leve inclinação, um pequeno solavanco quando a chamada de ferramenta pousa); linhas deslizam, tags e marcas de seleção aparecem, barras ultrapassam, pré-visualizações viram.
• As pausas ficam longas, o movimento fica rápido: etapas de 3,2 s foram "muito rápidas, não conseguimos ler". O dinamismo vem de entradas rápidas (0,3-0,6 s), nunca de pausas mais curtas. Resposta a ~9 palavras/s, ~1 s antes do próximo prompt. Quando duração e legibilidade entram em conflito, a legibilidade vence: ofereça-se para remover uma etapa.
• Sem cortes bruscos, sem crossfades de quadro inteiro: um espaço contínuo.

6. Música e som

• Agradável, animada, moderna: ~115-122 bpm, bateria nítida e rápida sem um kick de clube, baixo animado, plucks / guitarra / marimba, palmas e estalos. Rejeitado na revisão: um fundo de piano calmo ("mais dinâmico"), electro-pop quadradão ("muito nightclub"), qualquer coisa retrô ("não old school").
• Uma faixa escolhida que é muito curta (grooves de stock geralmente têm ~25 s): repita blocos inteiros de 4 compassos de sua seção completa nos limites do compasso, comece após sua introdução para que o filme abra com energia total, mantenha seu final real no último quadro. Nunca estique o tempo de uma faixa escolhida. Receita no arquivo de padrões ("Som").
• Gerando uma: solicite a duração exata do filme e verifique a sonoridade por segundo antes de construir sobre ela; os modelos ignoram a estrutura solicitada (uma faixa ficou em silêncio por 15 s antes de sua batida). Um prompt que funcionou está no arquivo de padrões.
• Efeitos sonoros apenas com uma causa visível (estalos nas trocas de logotipo e pousos de cartão, cliques nos envios, assobios suaves conforme os prompts surgem e no final, um toque quando a última etapa é marcada). Mixar para cerca de -14 LUFS.

7. Qualidade: nitidez absoluta

• Mestre supersamplado 2x (--scale=2, CRF 14, JPEG 100, x264 lento); as rodadas de revisão podem usar uma renderização direta de 1080p.
• Sem blur CSS em superfícies grandes; sem box-shadow de blur enorme (o Chrome os bandeja, use gradientes radiais); fontes woff2 locais com uma espera limitada; SVGs com fill="currentColor" renderizam em preto dentro de <Img>, reescreva o fill.
• Mudança apenas de imagem: renderize uma vez --muted, renderize cada mix de áudio como WAV e multiplexe. Mudança apenas de áudio: re-multiplexe a imagem existente.

8. Construção e ciclo de revisão

1. Estruture um projeto Remotion (estrutura no arquivo de padrões), preencha theme.ts, coloque os ativos do usuário em public/.
2. Escreva o filme nesta ordem: lista de logotipos + cópia do gancho, PROMPTS, TOOLS, STATUSES, REPLIES, um componente de cartão por etapa com sua altura e escala, então as constantes da linha do tempo (inícios e duração são calculados), então o offset da música.
3. Still em cada etapa antes de qualquer renderização completa (npx remotion still … --frame=<seg × 60> --scale=0.5), como uma folha de contato: sobreposições, quebras de linha, cartões sob o cabeçalho, blocos vazios, branding remanescente de um único assistente.
4. Envie a revisão em 1080p primeiro; 4K e cortes para redes sociais somente após aprovação. Escreva toda correção de volta nesta skill no mesmo dia.

As alturas dos cartões são medidas, não adivinhadas: o layout da thread reserva a altura de cada cartão, e uma subestimação faz a próxima mensagem deslizar sob o cartão (um cartão de resumo reservado em 452 px rendeu ~530 e sobrepôs). Some as partes reais (cabeçalho + padding do corpo + linhas × altura da linha), então verifique um still do estado final de cada cartão em relação ao item seguinte antes da renderização completa.

Concluído quando

• Lê-se como uma conversa com uma IA, uma coisa em foco por vez, cada linha legível em um telefone na primeira visualização.
• Cada etapa termina no produto antes da IA responder; todo cartão de produto mostra saída real e qualitativa com logotipos reais de canais.
• Nada chega ou sai sem movimento; nada permanece estático ou oculto.