Motion Design para SaaS

Crie vídeos de produto onde a UI real do produto é a estrela e cada movimento explica algo.

Padrões de uma olhada

Configuração	Padrão	Alterar apenas quando
Proporção	16:9 (1920×1080)	O usuário pedir explicitamente 9:16
Taxa de quadros	60 fps	O usuário pedir algo diferente
Fundo	Branco off-white	O usuário especificar outro fundo
Cores	Extraídas do tema da UI do produto	Nunca usar cores fixas
Gradientes	Nenhum	O usuário pedir explicitamente
Narração	Nenhuma	O usuário pedir explicitamente
Música	Uma faixa de alta energia do Mixkit que o usuário escolher	O usuário quiser um clima mais calmo, nada se encaixar, ou o filme for para transmissão (ver Áudio)

Um vídeo por execução. Renderize uma única proporção. Nunca gere 16:9 e 9:16 juntos; um corte 9:16 só é feito quando o usuário pedir.

Stack tecnológico

Ferramenta	Versão	Usado para
Remotion	4.0.535	Construir cada cena como componentes React, visualizar no Remotion Studio, exportar stills e renderizar
FFmpeg	Última estável	Mixagem de áudio, ducking da música sob a narração, folhas de contato, codificações finais
Node.js	24	Executar Remotion e os scripts de build

Fixar o Remotion exatamente. Instale todos os pacotes remotion e @remotion/* na versão 4.0.535 sem ^ ou ~. Versões incompatíveis dos pacotes Remotion quebram as renderizações.
Verificar Node primeiro. Execute node -v antes de instalar qualquer coisa. Se não for v24, avise o usuário antes de continuar.
Derivar todo movimento do quadro. Anime com useCurrentFrame() e interpolate()/Easing.bezier() usando os presets de easing abaixo, nunca transições CSS ou temporizadores, para que cada renderização saia exata por quadro.
Definir a composição como 1920×1080 a 60 fps por padrão, ou 1080×1920 apenas quando 9:16 for solicitado.
Stills para a etapa de revisão: npx remotion still <composição> --frame=<n>.
Renderização final: npx remotion render <composição> out/<nome>.mp4 --codec=h264.

Fluxo de trabalho

Planejar. Reúna o briefing e escreva o plano e a lista de cenas (ver Planejamento abaixo). Obtenha a aprovação do usuário.
Ler o produto. Leia o código-fonte do frontend, se disponível, caso contrário a UI ao vivo, e extraia seu tema (ver Acesso ao produto e Identidade visual abaixo).
Escrever o roteiro e obter a aprovação do usuário (ver Roteiro abaixo).
Construir o filme usando as regras de movimento, coreografia, câmera e transições abaixo, no espírito das referências de Inspiração.
Adicionar áudio: selecione faixas do Mixkit para o usuário escolher (ver Áudio abaixo), depois adicione efeitos sonoros e, apenas se solicitado, a narração.
Executar a verificação de qualidade.
Mostrar stills e aguardar. Mostre ao usuário os stills de revisão, responda às perguntas e faça alterações (ver Revisão de stills abaixo). Renderize apenas quando o usuário aprovar.

Não pule uma etapa de aprovação. Cada uma é mais barata de mudar do que a etapa seguinte.

Planejamento

Antes de escrever qualquer roteiro, concorde sobre o propósito do filme.

1. Reunir o briefing

Pergunte ao usuário apenas o que você não consegue descobrir sozinho:

Pergunta	Padrão se não fornecida
Qual é o produto, e você pode compartilhar o código-fonte do frontend? Se não, onde a UI ao vivo pode ser acessada (URL, build local, login)?	Obrigatório. Perguntar. Preferir o código-fonte.
Para quem é o filme?	Clientes potenciais
Qual é a única coisa que o espectador deve lembrar?	Obrigatório. Perguntar.
Quais funcionalidades ou fluxos devem ser mostrados?	Os 2–3 fluxos que melhor comprovam a mensagem principal
Quanto tempo deve ter?	30–45 s
Onde será publicado? Será exibido na TV ou rádio?	Site e X/LinkedIn (16:9), apenas online
Deve haver narração? Se sim, masculina ou feminina?	Sem narração
Qual é a chamada para ação?	Visitar a URL do produto

2. Escrever o plano

Dê ao usuário um plano curto para aprovar:

Objetivo: uma frase sobre o que o filme deve alcançar
Público: quem está assistindo e o que já sabem
Mensagem principal: a única linha que o espectador deve lembrar
Formato: duração, proporção (16:9 a menos que 9:16 tenha sido solicitado), narração sim ou não
Arco narrativo: o template de estrutura (ver Roteiro) preenchido para este produto, uma linha por seção
Fluxos a capturar: as telas e interações exatas da UI a gravar, com o estado de dados que cada uma precisa (por exemplo, "quadro de projeto com 12 tarefas, 3 delas atrasadas")
Prova: a evidência que o filme mostrará, se houver (uma métrica, logotipos de clientes, uma citação, um benchmark ou um prêmio), e de onde vem

3. Escrever a lista de cenas

Divida o arco narrativo em cenas, uma linha por cena:

#	Seção	Cena	Movimento	Duração
1	Gancho	Pergunta digitada na barra de busca do produto	Cursor digita, resposta aparece	4 s

A lista de cenas se torna a coluna "O que está na tela" do roteiro.

Acesso ao produto

O filme é tão bom quanto seu acesso ao produto. Em ordem de preferência:

Acesso	O que te fornece
1. Código-fonte do frontend (melhor)	Tokens de design exatos, componentes reais, texto real, ícones e arquivos de logotipo. A UI pode ser reconstruída dentro do Remotion pixel por pixel e animada livremente.
2. Aplicativo em execução (URL ou build local, com login de teste)	O tema e fluxos reais, capturados do navegador. Fiel, mas mais difícil de animar elemento por elemento.
3. Gravações de tela ou capturas de tela	Último recurso. Reconstrua as telas a partir delas o mais próximo possível e avise ao usuário que o resultado será menos exato.

Se você não tiver o código-fonte, peça antes de aceitar uma opção inferior.

Trabalhando a partir do código-fonte

Tema: leia os tokens de design de onde o projeto os mantém, como propriedades personalizadas CSS, configuração do Tailwind, um arquivo de tema ou um pacote de design tokens.
Componentes: reuse os componentes de UI do próprio produto nas composições Remotion onde eles renderizam de forma limpa fora do aplicativo. Caso contrário, recrie-os fielmente a partir de sua fonte.
Conteúdo: use rótulos reais, estados vazios, ícones e arquivos de logotipo da fonte em vez de inventá-los. Use dados de seed ou fixture para os estados de dados que o plano precisa.
Apenas leitura. Nunca edite o código-fonte do produto. Construa o filme em seu próprio projeto Remotion.

Identidade visual

Não use cores fixas de marca. Toda cor vem do produto sendo mostrado.

Leia a UI principal do produto, do código-fonte quando você o tiver, e extraia seu tema: cor primária/de destaque, neutros, cores de superfície, cores de borda, tipografia, raios de canto e estilo de sombra.
Fundo: prefira um fundo branco off-white por padrão, a menos que o usuário especifique o contrário.
Destaque: use a cor de destaque do próprio produto para ênfase, anéis de cursor, cursores e realces.
Sem gradientes em fundos, texto, brilhos ou transições, a menos que o usuário peça explicitamente. Use preenchimentos sólidos.
Tipografia: use a tipografia do próprio produto quando possível, para que as legendas pareçam nativas da UI.
Logotipo e marca nominativa: use os ativos reais do produto. Nunca redesenhe ou aproxime.

Roteiro

O roteiro dirige tudo: legendas, tempo e a narração, se houver. Escreva a partir do plano e da lista de cenas aprovados, antes de construir qualquer cena, e obtenha a aprovação do usuário antes de construir.

Formato

Escreva o roteiro como uma tabela, uma linha por linha:

#	Linha (falada ou na tela)	O que está na tela	Duração
1	Sua equipe perde seis horas por semana com atualizações de status.	Contador sobe para 6 sobre uma lista de tarefas bagunçada	3 s

Regras

Gancho nos primeiros 7 segundos. Abra com o problema, um número surpreendente ou o produto fazendo algo encantador, não o nome do produto.
Cada linha tem uma imagem. Se uma linha não tiver um batida visual correspondente, corte-a ou reescreva-a.
Linguagem simples. Frases curtas, uma ideia por linha, sem jargão que o espectador precise decodificar.
Ritmo: cerca de 2,5 palavras por segundo quando narrado. Calcule a duração da linha a partir de sua contagem de palavras.
Marque ênfase com *estrelas*, no máximo uma frase-chave por linha.
Toda afirmação é verdadeira. Números e benchmarks devem ser reais e com nota de rodapé quando necessário.
Respeite a duração definida no briefing. Corte linhas antes de acelerar o movimento.
Sem narração por padrão. Sem ela, o roteiro aparece apenas como legendas na tela.

Soe como uma pessoa, não como um modelo

Cada linha deve soar como algo que uma pessoa real diria em voz alta a um colega de trabalho. Texto com som de IA faz os espectadores desligarem e faz o produto parecer genérico. Esta é uma regra rígida, não uma preferência de estilo.

Escreva assim:

Seja concreto. Use os nomes reais das funcionalidades do produto, números reais e a ação real que o usuário faz ("Arraste uma tarefa para sexta-feira", não "Gerencie seu fluxo de trabalho sem esforço").
Nomeie a dor específica que o público sente, nas palavras deles ("Sua daily durou 40 minutos de novo").
Use contrações e palavras do dia a dia: "você vai", "é", "não".
Prefira verbos a adjetivos. Mostre o que o produto faz em vez de descrever quão bom ele é.
Linhas curtas são aceitáveis quando dizem algo específico ("Reuniões se movem." funciona porque a imagem mostra exatamente isso).

Nunca escreva estas:

Padrão	Exemplos
Enquadramento de contraste	"Não X, mas Y", "Não é só X, é Y", "Não X. Não Y. Z.", "X não é o problema. Y é."
Listas de três em ritmo	"Mais rápido, mais inteligente, melhor", "Planeje. Construa. Entregue." quando as três palavras não dizem nada específico
Fragmentos de adjetivos empilhados	"Inovador, intuitivo, poderoso" em qualquer ordem
Jargão corporativo	"Solução", "Plataforma", "Alavancar", "Sinergia", "Integrar perfeitamente", "Maximizar eficiência"
Afirmações vagas	"Ele muda tudo.", "O futuro de [indústria].", "Projetado para o que vem a seguir.", "Libere seu potencial."
Verbos que nada dizem	"Ele capacita", "Ele revoluciona", "Ele transforma" sem mostrar o que realmente acontece
Superlativos sem prova	"O melhor", "O mais rápido", "O único" – a menos que haja um benchmark real citado na mesma linha
Metáforas forçadas	"Seu canivete suíço para..." (a menos que o produto seja realmente uma ferramenta multifuncional), "Dirija com..."

Efeitos sonoros

Efeitos sonoros devem ser mínimos e motivados pelo que está na tela. Eles devem ter um propósito, não serem decorativos.

Usar para	Exemplos
Ações da UI	Cliques de botão (um por clique), alternâncias, envio de formulário, arrastar/soltar
Transições	Swipe, fade, zoom, corte – um som por transição, nunca uma camada sobreposta
Marcos	Conclusão de tarefa, meta atingida, gráfico sendo atualizado

Sincronize cada SFX com um quadro exato onde ele acontece na animação. Defina o tempo do SFX em segundos a partir do início do clipe, ajustado ao quadro.
SFX vêm antes da música e da narração. Eles são a batida principal; a música fica abaixo.
Obtenha SFX de: Mixkit SFX gratuitos, Pixabay SFX ou Freesound (verifique a licença). Baixe e coloque-os no projeto; não vincule a URLs externas.

Coreografia da UI

Cada elemento entra e sai por uma razão. Nunca mova pixels só porque pode. regras:

Sequência de entrada

Tela de fundo aparece primeiro (fade-in de 0,3 s)
Quadros e contêineres aparecem em seguida (fade-in de 0,2 s + scale de 1→1, ao mesmo tempo)
Conteúdo (texto, botões, ícones) aparece por último: fade-in com um leve deslocamento para cima de 8 px, duração 0,3 s, escalonado em 50 ms por elemento
Cursor (se mostrado) entra por último, do canto superior esquerdo da tela, e se move para o primeiro alvo em um único movimento de 0,5 s. O caminho do cursor é sempre um Bezier suave, nunca um L de canto.

Durante a interação

Elementos que respondem ao cursor: destacar com a cor de destaque do produto ou anel de foco quando o cursor estiver sobre eles (se o cursor for mostrado), ou diretamente com realce se o cursor estiver oculto. A duração do realce é de 0,15 s.
Mova elementos reais da UI, não caixas de espaço reservado. Se um botão desliza para fora, ele desliza para fora – não desaparece.
Animações duram 0,3 s a menos que o movimento precise de mais (arrastar um cartão leva 0,5 s).
Um elemento de cada vez se move em uma mudança de estado. Não anime dois elementos independentes simultaneamente a menos que a UI real faça isso.
Nunca use delays aleatórios. O tempo de cada elemento é uma contagem de quadros definida no plano.

Sequência de saída

Cursor sai primeiro – ele desaparece ou voa para fora da tela (0,2 s)
Conteúdo some na ordem inversa da entrada
Quadro escurece
Tela de fundo escurece

Movimento

Regras de easing

Use apenas estes três easings. Eles são os ÚNICOS easings permitidos.

Nome	Função CSS	Onde usar
Entrada e saída suaves	`cubic-bezier(0.65, 0, 0.35, 1)`	Movimentos e animações padrão – entradas de elementos, transições, mudanças de estado
Saída suave	`cubic-bezier(0.33, 1, 0.68, 1)`	Qualquer coisa que entre rapidamente e desacelere – cartões deslizando para dentro, contadores aumentando
Entrada suave	`cubic-bezier(0.32, 0, 0.67, 0)`	Qualquer coisa que acelere para sair – elementos que desaparecem, itens descartados

Use CSS cubic-bezier() com os valores exatos acima. Nunca aproxime com outras funções de easing, pré-definições ou curvas personalizadas.
Cada movimento usa exatamente um easing. Não misture easings para o mesmo elemento ao mesmo tempo.

Movimento de câmera

A câmera faz um zoom digital para dentro ou para fora (não panorâmica) para guiar a atenção do espectador. Duração: 1 s, easing de entrada e saída suaves.

Zoom para dentro: escala de 1 para 1,15
Zoom para fora: escala de 1,15 para 1
Um zoom de câmera a cada 5–8 segundos no máximo.
A câmera foca no centro do elemento sendo interagido.
Prefira escala de câmera em vez de escala de elemento. A escala de câmera usa um nó wrapper; a escala de elemento é para o conteúdo da UI.

Transições

Tipos

Use apenas estas transições. Nunca invente uma nova.

Tipo	Direção	Duração	Onde usar
Fade	Sobreposição	0,5 s	Transição entre telas sem movimento direcional, ou uma cena sem uma direção clara de entrada/saída
Deslizar para cima	A próxima cena desliza de baixo para cima	0,5 s	Passando por uma sequência vertical de etapas ou telas (como um formulário ou lista)
Deslizar para a direita	A próxima cena desliza da direita para a esquerda (ou seja, empurrando o conteúdo antigo para a esquerda)	0,5 s	Avançando em um fluxo horizontal (como carrosséis, guias ou etapas de configuração)
Cortar	Instantâneo	0 s	Entre cenas que são dramaticamente diferentes ou sem relação

Nunca use wipe, virar página, morph, estilhaçar, zoom ou transições em grade.
Nunca aplique um fade a uma transição deslizante ou vice-versa. Escolha um tipo por transição.
Toda transição começa e termina em repouso. A cena de saída não começa a deslizar até o último quadro de pausa; a cena de entrada termina exatamente no quadro de pausa.

Temporização e ritmo

Batidas de cena

Fase	Duração	Descrição
Pausa inicial	0,5–1 s	A cena aparece e descansa antes que qualquer ação aconteça
Ação	O que a cena precisa	Animações, interações, narração e legendas acontecem aqui
Pausa final	0,3–0,5 s	A cena descansa antes da transição para a próxima

Nunca faça cortes rápidos. Cada cena tem uma pausa inicial e final visível.
A duração total de uma cena = pausa inicial + ação + pausa final.

Durações de legenda

Sem narração: 3 palavras por segundo. O espectador lê mais devagar do que ouve.
Com narração: a legenda corresponde ao áudio narrado, que é de cerca de 2,5 palavras por segundo.
Nunca encurte uma legenda para caber em uma cena – em vez disso, encurte o texto.

Áudio

Música de fundo

Obtenha música de: Mixkit (gratuito para uso, licença incluída). Não use YouTube Audio Library, serviços de assinatura ou música gerada por IA.
Selecionar faixas: ao escolher músicas para o usuário, envie 3–5 faixas do Mixkit que se encaixem no clima do filme. Dê ao usuário o título e a duração, e peça que escolham uma.
Padrão: alta energia, otimista, sem vocais. Mude apenas se o usuário pedir um clima mais calmo ou se nenhuma faixa se encaixar. Se nada no Mixkit funcionar, o usuário pode fornecer sua própria faixa.
Uso: a faixa selecionada toca em segundo plano no volume -12 dB abaixo do pico do diálogo, com fade-in e fade-out de 0,5 s.
Nunca use música que você mesmo gerou ou samples de fontes não verificadas. Apenas Mixkit ou faixa fornecida pelo usuário.

Narração

Por padrão, sem narração – o roteiro aparece como legendas.
Se o usuário pedir narração, escreva o roteiro para ser lido em voz alta (veja as regras de roteiro acima: "Soe como uma pessoa").
Locução: nunca gere narração de IA. O usuário deve gravar a narração ou contratar um locutor. Forneça ao usuário o texto do roteiro, pronto para ser lido.
Sincronização: depois que o usuário fornecer o arquivo de áudio da narração, sincronize as legendas e as animações para corresponder ao áudio. Corte o silêncio inicial do arquivo de narração.
Mistura: duck a música para -20 dB durante a narração; o SFX fica em -6 dB abaixo do pico da narração.

Antes de adicionar áudio

Sempre renderize e mostre o filme ao usuário antes de adicionar áudio. A música e o SFX podem mascarar problemas de temporização e movimento. O usuário aprova o filme mudo primeiro.

Referências de inspiração

Construa no espírito destes:

Referência	Por que
Linear – o vídeo de lançamento do Dry Run	Demonstração de produto limpa e elaborada com pílulas de explicação sobre cada tela
Arc – o vídeo do Arc Max	Apresenta cada recurso com um exemplo e mostra o resultado antes de explicá-lo
Linear – vídeo de lançamento de novembro	A música impulsiona o ritmo, e cada cena mostra uma parte diferente da UI do produto
Notion – vídeo de lançamento do Calendário do Notion	Bem ritmado, sem pressa, cada cena claramente definida: fundo, quadro, ação, saída
Linear – vídeo de lançamento do Atalhos	Mostra o recurso em ação desde o primeiro segundo

Verificação de qualidade

Depois de construir o filme e adicionar SFX, mas antes de adicionar música, execute esta verificação:

Item	Verificar
Exatidão da UI	Cada tela corresponde ao produto real em cores, tipografia, espaçamento, estado dos dados e texto?
Consistência do tema	As cores, raios de canto e sombras são consistentes em todas as cenas?
Temporização da animação	Cada movimento começa e termina quando deveria? As pausas são visíveis?
Sincronização SFX	Cada SFX está sincronizado com o quadro ou movimento correto?
Temporização da legenda	As legendas aparecem e desaparecem nos momentos certos? A duração é adequada à velocidade de leitura?
Clareza da mensagem	Um novo espectador entenderia o que o produto faz e por que é valioso?
Adesão às regras	O easing, as transições e a coreografia seguem as regras acima?
Sem gradientes ou cores fixas	O filme usa apenas o tema do produto e fundo off-white?
Duração	O filme corresponde à duração especificada no briefing?

Corrija quaisquer problemas antes de mostrar o filme ao usuário.

Revisão de stills

Antes de renderizar o filme completo, mostre ao usuário stills de cada cena:

Exporte um still por cena no quadro da pausa final.
Mostre os stills como uma grade (contat sheet é bom, mas não obrigatório).
Peça ao usuário que revise cada still e aprove ou peça alterações.
Faça as alterações e mostre os stills atualizados. Repita até que o usuário aprove.
Apenas depois da aprovação dos stills você renderiza o filme completo com áudio.

Renderização

# Renderização de still
npx remotion still <composição> --frame=<n>

# Renderização final
npx remotion render <composição> out/<nome>.mp4 --codec=h264

Nomenclatura de arquivo

Still: <nome-do-produto>-still-<n>.png
Vídeo final: <nome-do-produto>-<proporção>.mp4

Pós-renderização

Após a renderização, verifique o arquivo, certifique-se de que ele abre e o áudio está sincronizado. Em seguida, forneça ao usuário o arquivo e uma breve nota sobre seu conteúdo.

Perguntar na sua IA favorita

Prévia

Documentação