Quando usar
Use esta skill quando o usuário quiser criar:
-
Vídeos tutoriais educacionais - Pesquise um tópico e crie um vídeo explicativo animado
- Exemplo: "Crie um tutorial sobre o ciclo de vida da borboleta para alunos do 3º ano"
-
Demonstrações de SaaS - Mostre recursos de software com UI animada
- Exemplo: "Crie um vídeo de demonstração mostrando como usar o recurso de banco de dados do Notion"
-
Anúncios de lançamento de produtos - Vídeos de marketing com motion graphics
- Exemplo: "Crie um vídeo de lançamento anunciando nosso novo recurso de busca com IA"
-
Vídeos tutoriais / passo a passo - Guias com animações de cursor
- Exemplo: "Crie um tutorial mostrando como configurar um projeto em nosso aplicativo"
-
Vídeos promocionais para redes sociais - Texto cinético curto e impactante para anúncios
- Exemplo: "Crie um anúncio de 15 segundos para o Instagram do nosso aplicativo de fitness"
-
Vídeos de showcase de aplicativos/produtos - Texto cinético combinado com mockups flutuantes de UI
- Exemplo: "Crie um promo mostrando a interface da nossa exchange de criptomoedas"
-
Vídeos de revelação de landing pages - Estética de ferramentas de design com animações de página web
- Exemplo: "Crie um vídeo mostrando o novo design da nossa landing page SaaS"
Fluxo de trabalho de produção de vídeo
Siga este pipeline para todos os tipos de vídeo:
1. ENTENDER → 2. PESQUISAR → 3. ROTEIRO → 4. CENAS → 5. ÁUDIO → 6. ANIMAR
Etapa 1: Entender a solicitação
Identifique:
- Tipo de vídeo: Tutorial educacional, demonstração SaaS, lançamento de produto, tutorial/passo a passo, promo social, showcase de aplicativo, revelação de landing page ou explicador de IA?
- Público-alvo: Idade, nível de especialização, contexto
- Tom: Educacional, profissional, energético, lúdico, dramático, minimalista
- Duração: Ultracurta (5-15s), curta (30-60s), média (1-3min) ou longa (3-5min)
- Formato: Widescreen 16:9 (1920x1080), quadrado 1:1 (1080x1080) ou vertical 9:16 (1080x1920)
- Estilo visual: Dramático escuro, gradiente suave, minimalista limpo ou estética de ferramenta de design
Etapa 2: Pesquisar (para tutoriais e demonstrações)
Para conteúdo educacional:
- Busque informações precisas e atualizadas
- Use fontes confiáveis (documentação oficial, sites educacionais)
- Reúna fatos-chave, estatísticas ou etapas para explicar
Para demonstrações SaaS:
- Explore o produto para entender os recursos
- Capture capturas de tela ou anote padrões de UI
- Identifique o fluxo de trabalho principal a ser demonstrado
Etapa 3: Escrever o roteiro
Escreva um roteiro de narração completo ANTES de gerar o áudio. A estrutura varia por tipo de vídeo (veja abaixo).
Etapa 4: Planejar as cenas
Divida o roteiro em segmentos visuais:
- Cada cena = uma ideia ou etapa chave
- Anote quais recursos visuais acompanham cada fala
- Planeje as transições entre as cenas
Etapa 5: Gerar o áudio
Use o Resemble.ai para gerar a narração (veja a configuração abaixo).
Etapa 6: Criar animações
Construa a composição do Remotion com animações sincronizadas com o áudio.
Tipo de vídeo: Tutorial Educacional
Objetivo: Explicar um conceito claramente para um nível de público específico.
Estrutura do roteiro
GANCHO (5-10s)
"Você já se perguntou como uma lagarta se transforma em borboleta?"
INTRODUÇÃO (10-15s)
Contextualize e mostre uma prévia do que será aprendido.
CORPO (conteúdo principal, dividido em 3-5 pontos-chave)
- Ponto 1: Explique com metáfora visual
- Ponto 2: Construa a partir do ponto anterior
- Ponto 3: Adicione detalhes ou exemplo
- ...
RECAPITULAÇÃO (10-15s)
Resuma os principais aprendizados.
ENCERRAMENTO (5s)
Chamada para ação ou pensamento final.
Adaptação ao público
| Público | Estilo de linguagem | Recursos visuais |
|---|---|---|
| Pré-escola a 2º ano | Muito simples, lúdico, frases de 5 palavras | Cores brilhantes, personagens fofos, formas grandes |
| 3º a 5º ano | Simples mas informativo, analogias | Diagramas claros, passo a passo, ritmo moderado |
| 6º a 8º ano | Mais vocabulário, causa-efeito | Gráficos, diagramas legendados, ritmo mais rápido |
| Ensino Médio+ | Termos técnicos ok, nuances | Visualização de dados, gráficos detalhados |
| Adultos | Profissional, conciso | Design limpo, infográficos |
Padrões de animação para tutoriais
- Revelações: Elementos aparecem conforme o narrador os menciona
- Transformações: Formas se transformam para mostrar mudança (lagarta → borboleta)
- Diagramas: Legendas animadas, setas apontando para partes
- Linhas do tempo: Barras de progresso, indicadores de etapa
- Comparações: Lado a lado com destaque
Exemplo de plano de cena
Roteiro: "Primeiro, a borboleta coloca ovos minúsculos em uma folha."
Cena 1:
- Visual: Folha aparece (deslizar de baixo para cima, animação elástica)
- Visual: Pequenos ovos aparecem na folha
- Tempo: Sincronizar palavra "ovos" com o aparecimento dos ovos
- Duração: 4 segundos
Tipo de vídeo: Demonstração de SaaS
Objetivo: Mostrar aos usuários como realizar uma tarefa em um software.
Estrutura do roteiro
GANCHO (5-10s)
"Deixe-me mostrar como [realizar objetivo] no [Produto]."
CONTEXTO (10s)
Por que esse recurso é importante, que problema ele resolve.
PASSO A PASSO (conteúdo principal)
- Passo 1: Navegue até X
- Passo 2: Clique em Y
- Passo 3: Configure Z
- ...
RESULTADO (10s)
Mostre o resultado, o estado final.
ENCERRAMENTO (5-10s)
Recapitule o benefício, sugira próximos passos.
Elementos visuais
- Mockups de UI: Representações estilizadas da interface
- Animações de cursor: Ponteiro animado movendo-se para alvos de clique
- Destaques: Bordas brilhantes ao redor de botões/campos sendo discutidos
- Efeitos de zoom: Foco em áreas específicas da UI
- Balões de texto: Rótulos apontando para elementos da UI
Padrões de animação para demonstrações
- Movimento do cursor: Curvas Bezier suaves, leve pausa antes do clique
- Efeito de clique: Ondulação ou pulsação no clique
- Foco no campo: Borda de destaque, leve aumento de escala
- Animação de digitação: Caracteres aparecendo em campos de entrada
- Transição: Deslizar ou esmaecer entre telas
- Setas de balão: Animação de entrada, apontar para elemento, esmaecer
Exemplo de plano de cena
Roteiro: "Clique no botão azul 'Nova base de dados' na barra lateral."
Cena:
- Visual: Mockup de UI da barra lateral
- Animação: Cursor se move para o botão (0,8s ease-out)
- Animação: Botão destaca com brilho
- Animação: Efeito de ondulação no clique
- Animação: Novo painel desliza da direita
- Duração: 3 segundos
Tipo de vídeo: Anúncio de lançamento de produto
Objetivo: Gerar entusiasmo sobre um novo produto ou recurso.
Estrutura do roteiro
GANCHO (5-10s)
Declaração ousada ou pergunta que chame a atenção.
PROBLEMA (10-15s)
Que ponto de dor isso resolve?
REVELAÇÃO DA SOLUÇÃO (10-15s)
Apresente o produto/recurso de forma dramática.
RECURSOS PRINCIPAIS (20-40s)
3-5 destaques impactantes de recursos com recursos visuais.
PROVA SOCIAL (opcional, 10s)
Estatísticas, depoimentos ou marcadores de credibilidade.
CHAMADA PARA AÇÃO (5-10s)
O que os espectadores devem fazer a seguir?
Estilo visual
- Tipografia ousada: Texto grande, animações de texto cinético
- Cores da marca: Use a paleta de cores do produto de forma consistente
- Ícones e gráficos: Formas abstratas, ícones de recursos
- Alta energia: Cortes mais rápidos, movimento dinâmico
- Revelação do logotipo: Logotipo animado no final
Padrões de animação para lançamentos
- Impacto de texto: Palavras aparecem com impacto
- Tipografia cinética: Palavras que se movem, escalam, giram
- Animações de contagem: Números aumentando (usuários, receita, etc.)
- Sequências de ícones: Recursos aparecendo com salto/mola
- Fundos gradientes: Gradientes de cores mudando lentamente
- Efeitos de partículas: Brilhos sutis, formas flutuantes
- Revelação do logotipo: Aumento de escala, esmaecimento ou montagem a partir de peças
Exemplo de plano de cena
Roteiro: "Apresentando a Busca Inteligente — encontre qualquer coisa em milissegundos."
Cena:
- Visual: Fundo escuro com gradiente
- Animação: "Apresentando" esmaece (0,5s)
- Animação: "Busca Inteligente" surge grande, em negrito (0,3s, com tremor)
- Animação: Subtítulo é digitado abaixo (máquina de escrever, 1,5s)
- Animação: Ícone de busca pulsa
- Duração: 4 segundos
Tipo de vídeo: Tutorial / Passo a passo
Objetivo: Ensinar os usuários a realizar uma tarefa com orientação visual clara e passo a passo.
Estrutura do roteiro
INTRODUÇÃO (3-5s)
"Aqui está como [realizar objetivo] no [Produto]."
PASSO 1 (10-20s)
Primeira ação com demonstração visual clara.
PASSO 2 (10-20s)
Segunda ação, baseada no passo anterior.
PASSO 3+ (10-20s cada)
Continue pelo fluxo de trabalho...
ESTADO DE SUCESSO (5-10s)
Mostre a conclusão, celebre o resultado.
RECAPITULAÇÃO (opcional, 5s)
Resumo rápido do que foi realizado.
Estilo visual
- Fundos claros e limpos: Off-white (#fafafa), creme ou cinza claro
- Contexto completo da UI: Mostre a interface completa, não apenas fragmentos
- Indicadores de progresso: Trilha de etapas, estágios numerados (1 → 2 → 3)
- Cursor como guia: Movimento suave do cursor guia o olhar do espectador
- Celebração de sucesso: Marcações verdes, confetes ou telas de sucesso com a marca
- Distrações mínimas: Foco na tarefa, evite elementos decorativos
Padrões de animação para tutoriais
- Coreografia do cursor: Caminhos Bezier suaves com leve pausa antes dos cliques
- Feedback de clique: Ondulação ou destaque sutil no clique
- Foco em campos de formulário: Brilho na borda quando o campo está ativo
- Simulação de digitação: O texto aparece caractere por caractere nas entradas
- Transições de etapa: Crossfade suave ou deslize entre telas
- Atualizações de progresso: Indicador de etapa/trilha anima para frente
- Explosão de sucesso: Marcação aumenta de escala com salto, confetes opcionais
- Revelações de painel: Barras laterais ou menus suspensos deslizam suavemente
Elementos visuais
- Navegação por trilha: "← 1. Intenção → 2. Ideia Semente → 3. Sketchpad"
- Campos de formulário: Texto placeholder, rótulos, estados de validação
- Botões: CTAs claros com estados de hover/ativo mostrados
- Barras laterais/painéis: Sugestões de IA, configurações ou paletas de ferramentas
- Telas de sucesso: Fundo colorido com ícone + mensagem
Exemplo de plano de cena
Roteiro: "Primeiro, digite sobre o que é sua lição."
Cena 1 - Configuração (2s):
- Visual: Interface completa do aplicativo, fundo claro
- Visual: Trilha mostra "2. Ideia Semente" ativo
- Animação: Tela esmaece
Cena 2 - Interação (4s):
- Visual: Formulário com rótulo "Digite um conceito ou tema:"
- Animação: Cursor se move para o campo de entrada (0,6s ease-out)
- Animação: Borda do campo destaca em azul
- Animação: "As Vidas Secretas dos Cogumelos" é digitado (2s)
- Animação: Cursor se move para o botão "Continuar"
Cena 3 - Transição (2s):
- Animação: Botão destaca no hover
- Animação: Efeito de ondulação no clique
- Animação: Tela desliza para a esquerda, novo painel desliza
Cena 4 - Resultado (3s):
- Visual: Visualização do sketchpad com painel de sugestões de IA
- Animação: Cartões de sugestão entram escalonados (0,15s de atraso cada)
- Animação: Seção "Fluxo da Lição" preenche
Cena 5 - Sucesso (3s):
- Visual: Fundo verde de tela cheia
- Animação: Círculo branco aumenta de escala (mola)
- Animação: Marcação é desenhada dentro do círculo
- Animação: "Sua lição está no ar!" esmaece abaixo
- Animação: Subtítulo "Pronto para inspirar maravilha e descoberta" esmaece
Diretrizes de ritmo para tutoriais
| Complexidade da etapa | Duração | Observações |
|---|---|---|
| Clique simples | 2-3s | Clique e resultado imediato |
| Entrada de formulário | 4-6s | Digitar + enviar |
| Formulário com vários campos | 8-12s | Várias entradas |
| Fluxo de trabalho complexo | 15-20s | Várias subetapas |
| Estado de sucesso | 3-5s | Deixe respirar |
Dicas para tutoriais eficazes
- Uma ação por cena — Não apresse vários cliques juntos
- Pause nos resultados — Deixe os espectadores verem o resultado antes de prosseguir
- Destaque o que muda — Use brilho sutil ou escala em novos elementos
- Combine narração com ação — O clique acontece quando o narrador diz "clique"
- Mostre toda a UI — O contexto ajuda os usuários a se orientarem
- Termine com celebração — Estados de sucesso reforçam a conclusão
Tipo de vídeo: Promoção para redes sociais
Objetivo: Prender a atenção rapidamente com texto cinético ousado para anúncios e conteúdo social.
Estrutura do roteiro
GANCHO (1-3s)
Palavra ou frase única e poderosa que pare a rolagem.
PROPOSTA DE VALOR (3-5s)
O que há nisso para eles? Uma frase impactante.
DESTAQUES DE RECURSOS (5-10s)
2-3 benefícios principais, em ritmo acelerado.
CTA (2-3s)
Ação clara: "Baixe agora", "Experimente grátis", URL
Estilo visual
- Fundos mínimos: Cores sólidas ou gradientes simples
- Máximo contraste: Fundo escuro + texto branco OU fundo colorido + texto branco
- Revelações palavra por palavra: Cada palavra tem seu momento
- Transições de cor: A cor de fundo muda entre as cenas
- Formato quadrado: 1080x1080 para Instagram/feeds sociais
Padrões de animação para promoções sociais
- Impacto de palavra: Palavras únicas aparecem com impacto (escala 1,2→1 + leve tremor)
- Flash de fundo: Mudanças instantâneas de cor entre palavras/frases
- Escala de texto: Palavras crescem e depois encolhem para dar lugar à próxima
- Movimento mínimo: Deixe a tipografia ousada fazer o trabalho
- Cortes rápidos: Máximo de 0,5-1s por palavra/frase
Exemplo de plano de cena
Roteiro: "Nós estamos prontos."
Sequência de cenas (4 segundos no total):
- Quadro 1: Fundo preto, "NÓS" surge em branco (0,8s)
- Quadro 2: Fundo branco, "ESTAMOS" aparece preto, centralizado (0,8s)
- Quadro 3: Fundo vermelho, "PRONTOS" é digitado, se torna "PRONTOS" (1,6s)
- Quadro 4: Segura quadro final (0,8s)
Diretrizes de duração
| Plataforma | Duração ideal | Duração máxima |
|---|---|---|
| Instagram Reels | 15-30s | 90s |
| TikTok | 15-60s | 3min |
| Twitter/X | 15-45s | 2min 20s |
| 30s-1min | 10min | |
| YouTube Shorts | 15-60s | 60s |
Tipo de vídeo: Showcase de aplicativo/produto
Objetivo: Demonstrar a interface de um produto com estilo cinematográfico, combinando texto e UI.
Estrutura do roteiro
GANCHO (3-5s)
Declaração de problema ou pergunta intrigante.
APRESENTE O PRODUTO (5-10s)
Mostre o nome/logotipo do produto, estabeleça a marca.
TOUR DE RECURSOS (20-40s)
Percorra 3-5 recursos principais com demonstrações de UI.
RESUMO DE BENEFÍCIOS (5-10s)
Recapitule o que o torna especial.
CTA (5s)
URL, selo da loja de aplicativos ou próximo passo.
Estilo visual
- Fundos gradientes escuros: Preto para roxo/azul para produtos de tecnologia
- Fundos gradientes suaves: Pastéis (rosa, lavanda, menta) para aplicativos amigáveis
- Mockups de UI flutuantes: Telas de aplicativos em ângulos ligeiros com sombras
- Texto cinético junto com UI: O texto aparece ao lado ou acima da interface
- Interações de cursor: Mostre cliques, rolagens, digitação dentro da UI
Padrões de animação para showcase de aplicativos
...