Communitygithub.com

walter-io/vibecoding-remotion

Transforme uma história em um vídeo de 1080p usando a pipeline Remotion: divida a narrativa em cenas, projete estilos visuais e animações programáticas para cada uma, sem templates fixos. Palavras-chave: vídeo de história, transformar história em vídeo, encenação em vídeo, fazer vídeo com Remotion, vídeo narrado, vídeo de cortes rítmicos.

O que é vibecoding-remotion?

Esta skill é um pipeline completo para transformar qualquer história em um vídeo de 1080p altamente estilizado, usando a biblioteca Remotion. Diferente de ferramentas que aplicam templates genéricos, ela exige que o usuário analise o tema da história e crie uma linguagem visual única (paletas de cores, tipografia, ritmo de animação) para cada projeto. A skill suporta plataformas como Claude Code e Cursor, e estrutura o processo em cinco etapas fixas: derivação de estilo, divisão da história em capítulos e cenas, geração de timeline com pontos de corte, auditoria automatizada com verificações rigorosas (como ausência de pontuação no final das linhas e correspondência emocional entre cena e texto), e renderização final com amostragem de quadros-chave para validação. Seu principal diferencial é a rejeição a templates fixos: cada história recebe um tratamento visual exclusivo, e o pipeline fornece ferramentas de auditoria e sincronização que garantem consistência e qualidade profissional.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add walter-io/vibecoding-remotion

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

Remotion:Vídeo de História com Encenação

Transforme "uma história" em um vídeo de 1080p com encenação: leia a história → extraia a essência do tema → projete uma linguagem visual exclusiva para este tema → divida em "capítulos (seções) → cenas (batidas visuais)" → projete para cada cena uma animação de cenário que combine com a emoção da trama → edição rítmica com palavras-chave como pontos de corte → renderização → amostragem.

Primeiro Princípio: Estilo a Serviço do Tema, Sem Template Fixo

O pipeline e a metodologia são universais; o estilo visual deve ser redesenhado para cada tema.

  • Para cada nova história, faça primeiro uma "análise de essência do tema": quais são as palavras-chave da história (nostalgia? adrenalina? suspense? conto de fadas? tecnologia?) → derive a paleta de cores, o tom tipográfico, o ritmo de animação e o estilo visual dos cenários.
  • Exemplos (apenas para referência de pensamento, não como regra): histórias de memórias afetivas → fonte serifada Song + branco/ouro + câmera lenta com luz suave; esportes de alto impacto → sans-serif bold + vermelho/preto de alta saturação + cortes rápidos e impactantes; ficção científica → cores frias + fonte monoespaçada + efeitos glitch/linhas de varredura; contos de fadas → fonte arredondada + cores pastel + animações elásticas.
  • Não leve o estilo do projeto anterior para o próximo; quando o usuário não especificar, apresente 1–2 opções de estilo para ele escolher.

Conceito Central

  • A imagem conta a história: cada cena deve combinar com a emoção e a ação da frase correspondente (frase de terremoto → sala de aula balançando; frase de comemoração → multidão agitando bandeiras; frase de fila → corredor com grades) — a incompatibilidade (tristeza com alegria) é o maior erro.
  • Os cenários usam animação programática (silhuetas de personagens/formas geométricas com movimento defasado por seno, quadro a quadro), não imagens estáticas; a densidade da animação é definida pelo tema (temas suaves: pouca e lenta; temas intensos: muita e rápida).
  • A tipografia é parte da encenação: o tom da fonte, a hierarquia dos tamanhos e a cor de destaque das palavras-chave são todos derivados do tema.

Pipeline (Cinco Etapas, Ordem Fixa)

  1. Derivação de Estilo: palavras-chave do tema → paleta de cores / tom tipográfico / ritmo de animação / estilo visual do cenário → (quando não especificado, ofereça ao usuário)
  2. Divisão da História: divida em capítulos (seções) com base no arco da trama → cenas (1-2 linhas por cena); ao final de cada capítulo, extraia uma frase curta de destaque para um cartão de resumo; limpe a pontuação no final das linhas (clean_tail() — limpeza universal)
  3. Linha do Tempo gen_assets.py → timeline.json (início/fim das cenas, layout, pontos de corte; MIN_SHOT 3.5s — mínimo para cortes lentos, ajustável por tema)
  4. Auditoria por Asserção + Sincronização check_views.py (cobertura de mapeamento, limites) + verify_timeline.py (pontuação no final das linhas = 0 / cena mais curta ≥ 3,0s / duração do cartão de resumo / tags de idade — limites ajustáveis por tema) — qualquer falha impede a renderização → sync-timeline.mjs
  5. Renderização + Amostragem npx remotion render → ffmpeg extrai quadros-chave para revisão (emoção da cena, hierarquia do texto, temporização da animação)

Regras Rígidas (Independentes do Tema, Sempre Válidas)

  • Nenhuma pontuação no final das linhas (incluindo travessão): função de limpeza universal + asserção = 0
  • A imagem deve corresponder estritamente à emoção da fala; qualquer alteração na tabela de mapeamento SHOT_VIEW exige reexecução da auditoria
  • Em Sequences aninhadas, o ponto de origem da animação dos componentes filhos = o quadro inicial da cena à qual pertencem (passe startFrame); caso contrário, a animação de entrada é silenciosamente ignorada
  • Desenho padronizado para símbolos políticos (bandeira nacional = fundo vermelho + uma estrela grande e quatro pequenas) — proibido qualquer rabisco aproximado
  • Para substituir por narração humana: coloque o arquivo wav e execute novamente gen_assets para reorganizar automaticamente a linha do tempo

Ativos Existentes (Implementação de Referência, Reutilizável e Modificável)

templates/ provém do projeto finalizado "Crônica da Geração 90" (tema de memórias afetivas: fonte serifada Song + branco/ouro + ritmo lento + silhuetas de multidão) — é um exemplo de derivação de tema, não o estilo padrão:

  • Esqueleto reutilizável: gen_assets.py (texto → estrutura da linha do tempo) / check_views.py (auditoria de mapeamento) / verify_timeline.py (asserções gerais) / sync-timeline.mjs / fit.ts (quebra de linha) / beat.ts (batida rítmica)
  • Camada visual a ser reescrita por tema: theme.ts (paleta/tamanhos) / serif.ts (fonte) / scenes.tsx (animação de cenário) / TitleCard.tsx / Era.tsx / Intro.tsx (layouts)
  • 8 técnicas de animação de multidão transferíveis: multidão agitando bandeiras, aglomeração em torno de TV, sala de aula em terremoto, fila, pedestres de máscara, perseguindo criança para alimentar, fogos de artifício, lanternas (mudar a paleta e o estilo visual já cria um novo cenário)

Parâmetros Detalhados

references/spec.md: parâmetros completos da implementação de referência acima (cinco níveis de tamanho de fonte, quatro direções de entrada, profundidade de campo, duração do fade-in lento, escada de tons de silhueta). Novos temas podem ajustar a escala com base nisso, sem a necessidade de copiar os valores exatos.

Habilidades Relacionadas