Fábrica de Vídeos Promocionais Remotion

O que Fábrica de Vídeos Promocionais Remotion faz?

Use esta habilidade para produzir vídeos de introdução de aplicativos repetíveis e de alta qualidade no Remotion. Esta habilidade é intencionalmente agnóstica de aplicativo e funciona para produtos com interface de usuário pesada e produtos sem interface.

Regras Principais

1. Use as regras oficiais da habilidade Remotion como autoridade primária.
2. Conduza toda a movimentação via useCurrentFrame() com interpolate() e spring().
3. Projete o tempo em segundos e depois converta com sec().
4. Escolha um blueprint de tipo de aplicativo primeiro; não use como padrão apenas demonstrações de interface.
5. Prefira primitivas visuais reutilizáveis em vez de filmagens avulsas gravadas.
6. Aplique as regras de dimensionamento de tipografia antes de polir a animação.
7. Valide cada edição importante com capturas de quadros, depois execute typecheck e renderização.
8. Não reivindique sucesso de qualidade sem evidências quadro a quadro.
9. Nunca commit, push ou marque tarefas como concluídas sem aprovação explícita do usuário.

Interoperabilidade de Habilidade Oficial

Sempre leia references/official-skill-integration.md primeiro.

Grupos de regras oficiais necessários por estágio:

1. Estágio de composição: compositions, parameters, calculate-metadata
2. Estágio de movimento: animations, timing, sequencing, transitions
3. Estágio de ativos: assets, images, fonts
4. Estágio opcional: audio, videos, subtitles, text-animations

Referências

• Seleção de tipo de aplicativo e modelos de cena: references/app-type-blueprints.md
• Mapeamento de regras oficiais do Remotion: references/official-skill-integration.md
• Padrões de linha do tempo e movimento: references/timeline-and-motion.md
• Orçamentos de tempo e loop de depuração: references/timing-and-debug-loop.md
• Regras de tipografia e legibilidade: references/typography-and-readability.md
• Blocos de construção visuais reutilizáveis: references/visual-primitives.md
• Lista de verificação de QA: references/qa-checklist.md
• Guia de solução de problemas: references/troubleshooting.md

Fluxo de Trabalho

Etapa 1: Coletar Entradas

Colete do contexto do projeto local (README, documentação, página inicial, interface existente, exemplos de CLI/API):

1. Público-alvo
2. Promessa central em uma frase
3. Ativos de prova disponíveis (interface, código, logs, métricas, depoimentos)
4. Ativos de mídia disponíveis (logotipo, capturas de tela, clipes, áudio)

Etapa 2: Selecionar Blueprint de Tipo de Aplicativo

Leia references/app-type-blueprints.md e selecione um:

1. Aplicativo centrado em interface
2. Aplicativo de API/SDK
3. Aplicativo de ferramenta de desenvolvedor / infraestrutura
4. Aplicativo de IA/automação

Crie uma lista de tomadas com base no blueprint selecionado.

Etapa 3: Narrativa e Duração

1. Defina o arco da história: Gancho -> Problema -> Mecanismo -> Prova -> CTA
2. Escolha a duração alvo: 15s, 30s, 45s ou 60s
3. Atribua durações de cena antes da implementação

Etapa 4: Configuração de Composição

1. Defina Composition em src/Root.tsx
2. Adicione schema e defaultProps
3. Calcule a duração em calculateMetadata
4. Conecte cenas em src/Video.tsx usando TransitionSeries

Etapa 5: Construção de Cena

1. Construa componentes reutilizáveis primeiro em src/components
2. Monte cenas em src/scenes usando esses componentes
3. Use posicionamento absoluto com constantes para layout e tempo
4. Mantenha os arquivos de cena focados na orquestração, não em detalhes de baixo nível da interface

Etapa 6: Passagem de Tipografia

Leia references/typography-and-readability.md e defina todos os tamanhos de texto principais primeiro.

1. Aplique as faixas de tamanho recomendadas para 1920x1080
2. Respeite os mínimos rígidos, a menos que justificado explicitamente
3. Confirme a legibilidade em celular/iOS antes de polir a animação

Etapa 7: Passagem de Movimento

1. Use fades trapezoidais para legibilidade
2. Use molas para entradas e movimento semelhante a cursor
3. Adicione exitOpacity por cena para evitar artefatos de sobreposição durante transições
4. Use sobreposições/legendas para tornar explícitas as mudanças de fase

Etapa 8: Passagem de Sanidade de Tempo

Leia references/timing-and-debug-loop.md e valide os orçamentos de tempo:

1. Verifique o tempo de permanência do texto e as janelas de leitura
2. Verifique as durações de retenção de processamento e resultado
3. Verifique a sobreposição de transição e o tempo de handoff
4. Corrija as constantes da linha do tempo antes do trabalho de polimento

Etapa 9: Loop de QA (Evidências Necessárias)

1. Capture quadros-chave após cada alteração substancial
2. Revise clareza visual, tempo, sobreposição e equilíbrio de composição
3. Registre evidências de aprovação/reprovação em um log de depuração
4. Itere até que todos os pontos de verificação críticos sejam aprovados

Use scripts/capture-frames.sh quando útil.

Se as ferramentas de leitura de imagem falharem ou não retornarem conteúdo útil, recapture e tente novamente. Não prossiga com verificações não verificáveis.

Etapa 10: Validação Final

1. npx tsc --noEmit
2. npm run -s build
3. npm run -s build:gif se disponível
4. Renderize o mp4 final e verifique o tempo de execução e o tamanho da saída
5. Verifique novamente os timestamps principais em relação ao comportamento pretendido da cena

Use scripts/verify-build.sh quando útil.

Etapa 11: Handoff e Aprovação

1. Relate um resumo de QA baseado em evidências (o que passou/falhou e por quê)
2. Liste compromissos conhecidos ou riscos residuais
3. Peça aprovação explícita antes de commit/push/conclusão da tarefa

Formato de Saída

Ao relatar o trabalho, inclua:

1. Tipo de aplicativo e blueprint selecionados
2. Estrutura de cena e duração final
3. Principais componentes implementados
4. Decisões de animação importantes
5. Verificações de orçamento de tempo e resultados
6. Comandos de validação e resultados
7. Riscos restantes ou acompanhamentos

Barreiras de Proteção

1. Use Img + staticFile() para imagens locais.
2. Carregue fontes no escopo do módulo, não dentro de efeitos.
3. Mantenha o layout Sequence e as configurações de premount compatíveis.
4. Use mínimos rígidos de tipografia de references/typography-and-readability.md.
5. Concentre efeitos complexos em uma área focal.
6. Não otimize para muitos objetivos em um único corte; mantenha uma única mensagem primária.
7. Nunca descreva a saída como "perfeita" sem evidências explícitas.
8. Não pule evidências de QA mesmo quando os comandos de renderização forem bem-sucedidos.