Communitygithub.com

concept-reel: reels explicativos de conceitos sem narração

Cria ou ajusta reels conceituais 1080p com legendas e sem narração usando Canvas, Playwright e FFmpeg: storyboard guiado pelo conteúdo, 15 estilos de motion design, animação determinística, folhas de pré-visualização e efeitos sonoros sincronizados com os eventos.

O que é concept-reel: reels explicativos de conceitos sem narração?

Passo 3 da receita Vídeo demo de produto (explicar o porquê), de Jogzh/concept-reel (criado em 2026-10-13). O README mostra prévias de estilos e clipes WebP de exemplo. O espectador deve reconhecer o objeto, ver a mudança e entender a causa; números vêm de cálculos, fatos têm fonte, e o render vai de raw.mp4 à trilha de efeitos e a final.mp4.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add Jogzh/concept-reel

Perguntar na sua IA favorita

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

Documentação

Concept Reel · Vídeo Conceito

Deixe uma imagem explicar uma frase: o espectador reconhece o sujeito, vê a mudança e entende a causa e efeito. Entregue um projeto executável, storyboard e fontes factuais, além de pré-visualizações ou o vídeo final dentro do escopo solicitado.

Este diretório de skill contém o motor compartilhado; o projeto pode ser criado dentro do diretório do usuário. Nos comandos, engine/ e scripts/ são relativos a este diretório de skill; use os caminhos reais ao chamá-los. A proporção fixa atual é 1920×1080 paisagem; 30fps por padrão, mas a taxa de quadros pode ser definida ao criar um novo projeto.

Leitura por Tarefa

Princípios de Criação

  • Primeiro decida o que o espectador precisa entender, depois escolha o sujeito e a ação. Formas geométricas podem ser usadas para gráficos e quantidades abstratas; ao descrever objetos reais, devem ter formas reconhecíveis.
  • As mudanças nas legendas devem acontecer na tela. Números vêm de cálculos; indique claramente ilustrações, condições de aplicabilidade e fatos incertos; registre fontes verificáveis para fatos importantes.
  • Apenas um foco visual principal por vez. As legendas podem ser estáveis; títulos, palavras-chave e tags devem se ajustar ao layout do sujeito e do espaço em branco.
  • Consistência nas fontes, significado das cores e sensação de movimento; escolha o centro de gravidade da cena, o enquadramento e a densidade de informação com base no conteúdo. Predefinições de estilo são pontos de partida; ajuste a paleta de cores e os movimentos, combinando um estilo principal com um auxiliar.
  • Calcule o tempo de leitura apenas depois que a legenda estiver totalmente visível; imagens e raciocínio exigem tempo extra. As conclusões devem primeiro pausar, depois sair.
  • A animação é determinada por t. Use sementes fixas para números aleatórios; não decida a imagem com base no relógio em tempo real, temporizadores ou estado acumulado entre quadros.
  • Exemplos originais servem para aprender a implementação; novos vídeos devem ser criados em torno do seu próprio tema, texto e storyboard. Fontes e limites de materiais: veja NOTICE.

Fluxo de Trabalho

Determinar o escopo da entrega. Identifique o tópico, texto existente, cenas ruins atuais, duração, estilo, música de fundo e se a exportação completa é necessária. Decisões que podem ser inferidas do contexto devem ser tomadas diretamente; esclareça apenas requisitos ausentes que afetam o resultado. Quando o usuário já autorizou a produção completa, continue até o final, não solicite aprovação de etapas repetidamente.

Organizar fatos e storyboard. Escreva uma pergunta central e uma tabela de fatos (fato, fonte, condição de aplicabilidade, grau de certeza). Registre para cada cena: tempo, tarefa narrativa, sujeito e centro de gravidade, texto e ordem de leitura, ação, tempo de leitura completo e som. Primeiro resolva frases que não podem ser desenhadas claramente, depois organize o tempo. Mantenha o significado original do texto existente; explique as razões para modificações necessárias em fatos ou estrutura.

Aplicar o estilo aos métodos de desenho. Sem um estilo claro, considere 2–3 direções com base no sujeito, relações espaciais, densidade de informação, tom de movimento e custo de implementação, depois selecione a solução adequada ao conteúdo. O storyboard deve registrar a justificativa da escolha, características reconhecíveis e limites de implementação. Use a galeria de estilos para explorar movimentos; crie seus próprios vídeos ainda com base em fatos e storyboard. Predefinições 3D, vidro e líquido são adaptações para Canvas; renderização realista complexa requer implementação separada; gráficos de variedades ainda são paisagem.

Primeiro, verifique as cenas-chave. Verifique o ambiente, crie o projeto e implemente a parte mais difícil ou a que melhor representa o estilo. O esqueleto não tem imagem final do vídeo; precisa preencher SUBS e funções de cena. Storyboards existentes serão preservados; código-fonte existente não será sobrescrito por padrão.

python scripts/check_env.py
python scripts/new_film.py --list-styles
python scripts/new_film.py --describe-style isometric
python scripts/new_film.py <diretório do projeto> --style isometric --title "Título do Vídeo" --duration 60 --fps 30
python engine/render.py <diretório do projeto> --serve
python engine/render.py <diretório do projeto> --stills 2.5 8 15
python engine/render.py <diretório do projeto> --motion 8 10 12

Se faltarem dependências, instale conforme o README; se faltarem fontes, execute python engine/get_fonts.py. Por padrão, usa Chromium embutido; se o usuário precisar do Chrome local, passe --browser chrome.

--style ID e --world B/C são mutuamente exclusivos; se não especificado, mantém o padrão C. Novos estilos de projeto incorporam receitas STYLE ajustáveis, usando VStyles compartilhados; motion.fps refere-se à taxa de amostragem sugerida para ações de estilo; a taxa de quadros real de saída é determinada por --fps. O esqueleto não gera automaticamente conteúdo temático.

Verificar e expandir. Veja capturas de tela reais; julgue se o sujeito é reconhecível, se a ação explica, se o texto é legível; verifique o bloqueio no tamanho de visualização alvo. Ajuste os problemas encontrados e revise os momentos relacionados, depois expanda para o vídeo inteiro. Uma função por cena; desenhe as legendas na camada mais externa de draw. Capítulos complexos podem ser divididos em arquivos, declarados em index.html.

python engine/render.py <diretório do projeto> --sheet 16
python engine/render.py <diretório do projeto> --det
python engine/render.py <diretório do projeto> --clip 0 5 preview

--sheet com um único valor significa o número de quadros a capturar; com vários valores, significa momentos específicos. Se --det falhar, é necessário verificar o estado do Canvas, sementes aleatórias e cache entre quadros; não declare uma falha como sucesso.

Exportar e adicionar áudio conforme escopo autorizado. Quando o vídeo final for solicitado, execute renderização completa, exportação de eventos e síntese de áudio; quando apenas o código-fonte/pré-visualização for necessário, entregue após os resultados correspondentes estarem prontos.

python engine/render.py <diretório do projeto> --jobs 4
python engine/render.py <diretório do projeto> --events
python engine/audio.py <diretório do projeto>
# Se houver música de fundo externa disponível
python engine/audio.py <diretório do projeto> --bgm music.mp3 --bgm-db -8

Os nomes dos eventos fr.sfx são: tick, soft, chord, bloom (compatível com flash), rise, thud, tock, stamp, shimmer, hush. Mesmo sem música de fundo externa, pode-se sintetizar som de fundo e sons de eventos; explique os resultados específicos honestamente. --wav-only gera apenas a faixa de áudio sintetizada, sem sobrepor BGM externo.

Aceitação e entrega. Assista continuamente aos trechos/vídeo completo exportados e verifique pontos de entrada, leitura estável, ações-chave e meio de transições. Confirme se os fatos e o storyboard correspondem, áudio e vídeo estão sincronizados, números são consistentes e fontes não têm caracteres faltando. Corrija problemas encontrados e revise as cenas afetadas. Entregue o caminho do código-fonte, pré-visualização ou renders/final.mp4, descreva brevemente os resultados da verificação e limitações reais; para partes não assistidas completamente, explique claramente.

Projeto e Artefatos

index.html referencia recursos compartilhados em /engine/ e o film.js local; storyboard.md armazena storyboard e fatos. review/ contém quadros-chave, audio/ contém eventos e faixas de áudio sintetizadas, renders/ contém trechos e vídeo final. Artefatos gerados não são commitados por padrão; mantenha o código-fonte que pode ser re-renderizado.

Habilidades Relacionadas