Communitygithub.com

kuzeyozel-1/remotion-video-pipeline

Produza pequenos vídeos promocionais (reels 9:16 verticais, spots web 16:9) a partir de filmagens brutas usando Remotion, com geração de proxies, folhas de contato para escolha de clipes, theming de marca e evita as armadilhas de renderização que desperdiçam horas (maísculas turcas, stdin do ffmpeg, saída HEVC, falta de drawtext).

O que é remotion-video-pipeline?

Este skill define um pipeline completo para criar vídeos promocionais de alta qualidade combinando filmagens reais com tipografia gerada por código, usando a plataforma Remotion. Ele automatiza o inventário e a criação de proxies (cópias leves H.264) para edição rápida, evitando os lentos originais 4K/HEVC. Com scripts simples, você gera folhas de contato para selecionar visualmente os momentos exatos de cada corte, economizando tempo de adivinhação. O pipeline também documenta e soluciona várias armadilhas comuns que causam retrabalho, como problemas com caracteres turcos em maiúsculas, stdin do ffmpeg ignorado em loops, falta do filtro drawtext, e renderizações corrompidas por HEVC. Ideal para fluxos de trabalho com Remotion, Claude Code, Cursor e Codex, o skill fornece templates reutilizáveis com suporte a branding (gradientes, textos animados) e garante que o conteúdo final reflita exatamente o que a filmagem mostra, sem informações inventadas.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/kuzeyozel-1/vinci-skills/tree/main/skills/remotion-video-pipeline

Perguntar na sua IA favorita

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

Documentação

Pipeline de vídeo Remotion

Filmagens reais + tipografia desenhada por código = vídeos com a marca, sem erros de digitação e com edições repetíveis.

Pipeline

  1. Inventário dos clipes brutos: scripts/inventory.sh <raw-dir> > index.tsv (id, caminho, duração, resolução).
  2. Proxies: scripts/make-proxies.sh index.tsv proxy/ cria cópias H.264 com largura 1080, 30 fps, aproximadamente all-intra (-g 15) e sem áudio. Edite e renderize usando proxies; originais 4K/HEVC tornam o Remotion lento e podem travar o Chrome.
  3. Escolha momentos vendo, não adivinhando: scripts/contact-sheet.sh proxy/v01.mp4 sheets/v01.jpg imprime um quadro por segundo em uma grade. Abra a folha e anote os segundos de início de cada corte.
  4. Componha em template/ (copie-o): Footage (clipe cortado e com zoom), Scrim (gradiente para texto legível), Line (texto animado). Uma composição por saída (ex.: Main 30 s, Teaser 9 s, Spot16x9 20 s).
  5. Renderize: npx remotion render <CompositionId> out/<nome>.mp4. A configuração já define H.264, CRF 17, yuv420p.
  6. Verifique: extraia 3 quadros (ffmpeg -ss 5 -i out.mp4 -frames:v 1 still.png) e analise-os; verifique a duração e se a política de áudio (silencioso ou música) é a esperada pelo cliente.

Armadilhas (cada uma custou tempo real)

  • Defina lang="tr" (ou o idioma correto) na raiz; caso contrário, o CSS text-transform: uppercase transforma o i turco em I (MAKINASI, TEKLIF). Prefira digitar o caso final na string.
  • ffmpeg dentro de loops while read engole o stdin: sempre passe -nostdin.
  • zsh faz divisão de forma diferente do bash: set -- $p e $2:s quebram. Escreva scripts com #!/usr/bin/env bash.
  • Muitas compilações do ffmpeg não têm drawtext. Desenhe texto no Remotion, nunca no ffmpeg.
  • Renderizadores baseados em HTML (ex.: Hyperframes) podem deixar camadas de overlay "escuras" visíveis entre cenas; também faça transições de fade com animação explícita de opacidade. Execute essas renderizações em primeiro plano (execuções em segundo plano com nohup são canceladas) e converta a saída HEVC com ffmpeg -i in.mp4 -c:v libx264 -crf 18 -pix_fmt yuv420p out.mp4.
  • Rotação de filmagens de celular: verifique as tags de rotação com ffprobe; clipes retrato em uma composição paisagem precisam de objectFit: cover mais corte explícito.
  • Apenas mostre o que a filmagem exibe. Não invente especificações, capacidades ou preços no texto em tela.
  • Mantenha os arquivos do cliente fora do repositório que você publica; filmagens e logotipos pertencem ao cliente.

Consulte references/checklist.md para a lista de verificação de entrega.

Habilidades Relacionadas