video-shotcraft：电影感产品视频制作

O que video-shotcraft：电影感产品视频制作 faz?

Um kit de produção autocontido: 152 cartas de receita de planos (com código-fonte de demonstração e galeria de amostras dinâmicas), um modelo de filme promocional completo já validado, componentes reutilizáveis e ativos de áudio, e um fluxo de trabalho de seis etapas. O foco atual são filmes promocionais para produtos web/desktop, mas as cartas de planos são um vocabulário universal de motion design — também podem ser usadas individualmente para criar cenas únicas em qualquer vídeo.

Ao invocar, primeiro determine o modo

Existem três modos mutuamente exclusivos para filmes promocionais completos. Antes de iniciar a coleta de material, storyboard ou implementação, verifique se o usuário já fez uma escolha clara; se já escolheu, execute diretamente sem repetir a pergunta ou mudar para outro modo.

1. Usar template diretamente: Mantenha o fluxo de substituição original do Ink Press. Leia template/TEMPLATE.md e substitua as capturas de tela, textos e informações da marca do produto alvo de acordo com a estrutura de planos existente.
2. Criação autônoma e livre: Leia references/pipeline.md. O agente decide autonomamente a direção visual, mapeamento de planos, storyboard, material e áudio com base nas solicitações do usuário e no conteúdo do projeto, avançando continuamente até o produto final; não pause para aguardar confirmação do usuário durante o briefing do produto, styleframe, mapeamento de planos ou storyboard.
3. Cocriação: Leia references/guided-free-creation.md. O agente primeiro apresenta julgamentos e propostas fundamentadas, que o usuário confirma sequencialmente: briefing do produto, decisões de requisitos, direção visual, mapeamento de planos e storyboard final; só após a aprovação do storyboard, avance para a coleta final de material e produção conforme references/pipeline.md.

Quando o usuário fornecer o caminho do projeto, URL, gravação de tela ou capturas de página, mas ainda não tiver escolhido o modo, realize primeiro uma verificação mínima e somente leitura do produto: entenda o posicionamento do produto, principais funcionalidades, visuais da página, estado exibível e riscos de material; não modifique o projeto de negócios, não colete dados sensíveis e não escreva código de vídeo. Após a verificação, apresente os três modos e explique:

• Se o Ink Press é adequado para o produto, com justificativas específicas de adequação e inadequação;
• Se a criação autônoma e a cocriação são adequadas e quais pistas visuais do produto seriam mantidas;
• Qual modo o agente recomenda e com quais fundamentos e trade-offs.

Em seguida, pergunte claramente: "Com base na verificação acima, recomendo usar o modo [modo]. Deseja continuar com este modo?"

Ao mesmo tempo, informe ao usuário que ele pode acessar https://vincentwei1021.github.io/video-shotcraft/ para navegar pelas amostras dinâmicas e escolher os efeitos de motion que deseja usar no vídeo.

Quando o usuário ainda não forneceu um projeto ou página verificáveis, apresente brevemente os três modos e depois pergunte; não presuma que o Ink Press seja a recomendação padrão só por ser um template pronto.

• Se o usuário escolher o template: leia template/TEMPLATE.md na íntegra e execute conforme o fluxo original.
• Se o usuário escolher criação autônoma: leia references/pipeline.md na íntegra; o agente avança autonomamente sem pausar para confirmação em cada etapa.
• Se o usuário escolher cocriação: leia references/guided-free-creation.md na íntegra e colabore conforme os pontos de confirmação descritos.
• Se o usuário ainda não decidiu: pare aqui e aguarde a escolha; não escolha pelo usuário e não comece a produção.

Exceção 1: Quando o usuário mencionar explicitamente o template Ink Press, considere o modo template como selecionado. Exemplo: "Use o template Ink Press para fazer um filme promocional do meu produto." Neste caso, não pergunte novamente; leia template/TEMPLATE.md e siga o roteiro do template.

Exceção 2: Quando o usuário especificar claramente que deseja usar ou referenciar certas cartas de planos, as restrições de planos já estão definidas. Exemplo: "Use deck-deal-flyin e row-embed para este vídeo" ou "Consulte o efeito de spotlight-hero-card". Neste caso, não apresente o template nem pergunte se deseja usá-lo; confirme os planos especificados conforme as regras de resolução de nomes da Galeria, leia cada carta na íntegra e localize o código-fonte de demonstração exato conforme a "Implementação de Referência" da carta. Planos individuais podem ser executados após o material alvo estar claro; para filmes promocionais completos, se ainda não foi especificado se será criação autônoma ou cocriação, pergunte apenas sobre esses dois modos, usando os planos especificados como restrições para a produção subsequente, sem equivaler automaticamente à cocriação.

Quatro formas de uso

1. Filme promocional completo (roteiro de template): Deseja um resultado muito semelhante ao vídeo de template → leia template/TEMPLATE.md e siga o "Guia de Recriação com Substituição de Produto" para adaptar os materiais plano a plano.
2. Filme promocional completo (criação autônoma): Deseja um novo estilo e autoriza o agente a decidir autonomamente → leia references/pipeline.md e avance continuamente da compreensão do produto até a verificação final, sem pausar para confirmação em etapas intermediárias.
3. Filme promocional completo (cocriação): Deseja participar das decisões-chave → leia references/guided-free-creation.md, confirme o briefing do produto, decisões de requisitos, direção visual, mapeamento de planos e storyboard final; após aprovação, continue a partir da coleta final de material do pipeline.
4. Plano único / Efeito único: Escolha uma carta de references/shots/ (ou deixe o usuário escolher na galeria gallery/), leia a carta na íntegra e localize o código-fonte de demonstração exato conforme a "Implementação de Referência", adaptando-o ao material alvo.

Limites entre criação autônoma e cocriação

Criação autônoma entrega as decisões criativas e de engenharia ao agente. O agente deriva dinamicamente o foco do produto, direção visual, mapeamento de planos, storyboard, tratamento de material e solução de áudio a partir do conteúdo do projeto, registra os julgamentos-chave e executa diretamente; a menos que falte alguma entrada necessária que não possa ser inferida com segurança, não faça perguntas, não pause por etapas e não exija confirmação de resultados intermediários. As solicitações explícitas do usuário são sempre restrições e não podem ser sobrescritas pelas escolhas padrão do agente.

Cocriação usa confirmação etapa por etapa. Por padrão, leia references/guided-free-creation.md; em cada rodada, faça apenas 1–3 perguntas que mais reduzam retrabalho e pause para aguardar confirmação do usuário nos pontos de briefing do produto, decisões de requisitos, direção visual, mapeamento de planos e storyboard final. O usuário confirma as direções de negócio e criatividade; o agente executa autonomamente o método de coleta, parâmetros de implementação, SFX keyframes, projeto Remotion, renderização e QA técnico.

Na cocriação, quando o usuário disser explicitamente "você decide tudo" ou "pule a confirmação e vá em frente", mude para criação autônoma e registre essa escolha; não afirme estar avançando autonomamente enquanto continua a exigir confirmação etapa por etapa.

O mapeamento de funcionalidades para planos é apenas "quais sintaxes de movimento usar", não um storyboard completo. Após a confirmação do mapeamento na cocriação, o agente deve continuar fornecendo a ordem dos planos, duração, cenas específicas, estado da página, fonte do material, legendas, transições e SFX; só após a confirmação do storyboard completo é que se inicia a coleta final de material. Quando o usuário copiar o nome de uma carta da Galeria, basta fornecer o nome da carta ou "nome da carta · nome do estilo"; o agente é responsável por ler a carta de receita local e o código-fonte de demonstração.

Princípios fundamentais

1. Para recriar páginas existentes, use capturas de tela reais; UI feita à mão é limitada a cenários sem recriação, e a qualidade e clareza da expressão são requisitos rigorosos. Ao representar a página real do produto, inicie um servidor dev local, use um navegador headless para capturar texturas 2x da página inteira + recorte de elementos + tabela de coordenadas layout.json. Em cenários sem recriação (abertura abstrata / segmento de marca / componente de exibição independente), a UI feita à mão é permitida, mas se não atingir qualidade de publicação ou se o espectador não entender o que está sendo expresso, volte para a rota de capturas de tela. Os dados da página são tratados conforme o risco: dados de demonstração pública só podem ser mantidos após confirmação explícita no briefing do produto; dados de clientes, pessoais, internos, chaves, em tempo real ou outros dados sensíveis devem usar conteúdo fictício ou anonimizado, e devem ser congelados antes da coleta.

2. A linguagem visual de todo o vídeo deve crescer a partir do próprio produto; não se deve criar uma "pele de filme promocional" não relacionada. Antes de fazer styleframes, extraia e escreva uma especificação de design a partir do sistema de design, código-fonte ou estilos computados do produto/site: família de fontes e pesos, hierarquia de tamanhos de fonte, altura de linha / espaçamento de caracteres, grade, espaçamento, alinhamento, densidade de informação e bordas arredondadas, além de cores de fundo / superfície / corpo / destaque / estado, gradientes e texturas. Todos os títulos, legendas, números, cartões de texto, tipografia, transições, partículas, efeitos de luz e outras cores de motion no vídeo devem reutilizar ou estender moderadamente esses tokens, ao mesmo tempo em que combinam com o tom, gosto e textura do produto. Ao seguir o roteiro de template ou cartas de planos, herde apenas a estrutura dos planos, sintaxe de movimento, ritmo e parâmetros ajustados; fontes, layout, cores e texturas devem ser re-skinados para o produto alvo. Se o desvio da identidade visual do produto for necessário para a narrativa, na cocriação explique o motivo e peça confirmação ao usuário; na criação autônoma, registre o motivo e os trade-offs na especificação de design e continue.

3. A sensação cinematográfica vem da combinação de movimentos de câmera, iluminação, ritmo e som, não de animações chamativas. O que foi repetidamente aprovado: arco de ação completo de um único protagonista (foco → aproximação → flutuação → retorno), aceleração impulsionada por metáforas físicas (distribuição de cartas), close-ups com câmera orbitando em ângulo inclinado, frases sonoras de riser → impacto → brilho. A entrada de elementos em lote depende do movimento em si, não de brilhos individuais — glints decorativos / transbordos de luz em massa são de baixo custo; efeitos de luz únicos e de alta qualidade são aceitáveis.

4. Cada plano conta um único efeito de motion; após a informação-chave se estabelecer, deve haver respiração. Uma técnica de animação (voar para dentro / empilhar / virar página) só deve ser protagonista uma vez no vídeo inteiro; planos repetidos e taglines repetidas devem ser eliminados. A preferência de ritmo é unidirecional: todo feedback histórico aponta para "desacelerar / pausar", nunca houve "muito lento" — o logotipo da marca deve segurar ≥1s após se estabelecer, efeitos em lote devem deixar 0,5s de repouso no final, e a ação principal de abertura deve ter 3s suficientes. Ao alinhar a linha do tempo, reserve orçamento de quadros para pausas/repousos.

5. Em vídeos com BGM de ritmo forte, todas as transições e efeitos de motion devem estar na batida. Se o usuário já escolheu a música → antes de começar, faça uma análise de ritmo (ajuste de grade com librosa para obter BPM/fase real + localização de batidas de kick/caixa/chimbau em três categorias); só após a aprovação da cobertura de transientes pela grade, faça o storyboard; escreva a linha do tempo usando a notação de compasso beatF(n), fixe os acentos esparsos nos transientes reais em vez de pontos interpolados da grade; após a renderização, extraia a trilha sonora do vídeo final e verifique se o erro de corte é ≤3 quadros. A sincronização com a batida diz respeito ao tempo, não à amplitude — impactos na batida que afetam a tela inteira/câmera são considerados grandes slams, limitados a ≤3 por vídeo (regra estética R4); os demais efeitos na batida devem atuar apenas na camada de elementos. A metodologia está em references/music-beat-sync.md. Vídeos com BGM devem ser entregues em duas versões: com BGM e sem BGM (mantendo SFX), usando a prop bgm para renderizar a partir da mesma linha do tempo, facilitando a pós-produção de música pelo usuário.

6. Para usar efeitos de cartas de planos, primeiro analise o índice da Galeria e leia o código de demonstração exato. Use gallery/api/library.json para validar o nome da carta e a style-key, depois localize o TSX específico conforme a "Implementação de Referência" no documento da carta. As cartas de receita fornecem semântica e tabelas de parâmetros; o código-fonte de demonstração exato é a verdade dos parâmetros ajustados (easing, proporção de duração, tempo de recorte, escrita para evitar armadilhas conhecidas). Adaptações são permitidas, mas os parâmetros marcados como "armadilhas conhecidas / pontos críticos" na carta não podem ser rebaixados — o padrão de qualidade só pode subir, nunca descer. Escrever do zero com base apenas no nome da carta e no entendimento significa abandonar todo o acúmulo de ajustes.

7. Na cocriação, antecipe confirmações de baixo custo; na criação autônoma, registre os mesmos julgamentos como registro de execução. A ordem briefing do produto → tabela de decisões de requisitos para execução → direção textual → styleframe → mapeamento de planos → storyboard permanece a mesma; na cocriação, cada nível é entregue ao usuário para confirmação; na criação autônoma, o agente escolhe e avança continuamente. Nenhum dos modos deve entrar na implementação plano a plano antes que a direção esteja definida.

8. Verificação contínua ao longo de todo o processo + revisão independente antes da entrega. A partir da etapa 5, para cada plano, use npx remotion still para autoinspeção com quadros estáticos; após cada rodada de modificações, renderize o vídeo completo e use ffmpeg para extrair quadros e revisar; antes da entrega, designe um subagente com contexto limpo para fazer uma revisão final independente. A entrada da revisão inclui o vídeo final, keyframes, briefing do produto, tabela de decisões de requisitos para execução, direção visual/styleframe confirmada ou registrada no modo atual, mapeamento de funcionalidades para planos, nomes/variantes de cartas da Galeria, TSX de demonstração exato, amostras de referência/quadros extraídos da Galeria, storyboard final, cartas de planos selecionadas e regras estéticas; siga references/final-review.md para verificar consistência do plano, integridade funcional, fidelidade dos planos, qualidade técnica visual/de áudio e segurança de dados, gerando um relatório com evidências numeradas por quadro. O criador tem viés de confirmação em relação à própria produção; a primeira verificação nunca deve ser feita pelo usuário.

9. Renderização determinística: Proíba Date.now()/Math.random(); todo pseudo-aleatório deve ter semente fixa (mulberry32/hash, seed derivado do índice), garantindo reprodutibilidade quadro a quadro.

Fluxo de trabalho

Na criação autônoma, siga references/pipeline.md continuamente a partir da etapa 0, sem pausar para confirmação do usuário em cada etapa. Na cocriação, primeiro complete as etapas 0–3 (compreensão do produto, direção visual, mapeamento de planos e confirmação do storyboard) conforme references/guided-free-creation.md, depois continue a partir da etapa 4 (coleta final de material) do pipeline, sem repetir perguntas ou redesenhar. Nas etapas 2–3, percorra os frontmatters das cartas em references/shots/ e selecione planos conforme a curva de energia; nas etapas 5–7, verifique-se continuamente contra references/aesthetic-rules.md; na etapa 6, leia references/sound-design.md; para vídeos com batida, mantenha-se fiel a references/music-beat-sync.md.

Após a entrega do vídeo final em qualquer modo, pergunte ao usuário uma vez se ele precisa exportar também o arquivo de projeto do CapCut (para editar conteúdo/tamanho/cor da legenda, alterar velocidade/reordenar planos, ajustar ou substituir áudio no CapCut); se o usuário precisar ou solicitar explicitamente a exportação, leia references/jianying-export.md e execute.

Quando ler qual arquivo

Momento	Leia
Início do projeto e modo indefinido	Verificação mínima somente leitura, depois ofereça três modos de filme promocional e recomende
Criação autônoma	pipeline.md (o agente completa as etapas 0–7 autonomamente, sem pausar para confirmação)
Cocriação	guided-free-creation.md (confirmação das etapas 0–3), depois continue da etapa 4 do pipeline.md
Usuário já escolheu BGM	music-beat-sync.md (analise antes de storyboard)
Roteiro de template	template/TEMPLATE.md na íntegra
Design de storyboard	Modelos de sequência em sequences/ (preencha o esqueleto do vídeo primeiro); todos os frontmatters em shots/; cartas selecionadas leia na íntegra
Implementação plano a plano	Carta do plano na íntegra + código-fonte de demonstração exato conforme "Implementação de Referência" + componentes correspondentes em assets/lib/
Design de som	sound-design.md + assets/audio/
Verificação	final-review.md + aesthetic-rules.md na íntegra (executado por subagente independente)
Após entrega do vídeo (exportação de projeto CapCut)	jianying-export.md + módulo de plataforma jianying-export/

Como usar os ativos

• Componentes em assets/lib/ copie para o novo projeto e modifique livremente (não importe esta biblioteca). Lista: PageCam (câmera de página 2.5D — base de todos os planos de "página real"), ClipCard (empacota material de vídeo externo mp4 como um "cartão protagonista" que pode ser movido pelo esqueleto de câmera das cartas de plano, incluindo crossfade de OffthreadVideo — reprodução contínua quando o material é mais curto que o plano), DigitRoll, FlashCut, Caption, FlatPanel, VerticalTicker (parede de rolagem 3D infinita), helpers(rand/shake/camera/motion). FlatPanel e helpers/camera exigem dependências three + @react-three/fiber + @remotion/three; os demais exigem apenas remotion.
• assets/scripts/capture-template.mjs: copie e modifique o CONFIG no topo (BASE/rota/seletores).
• Efeitos sonoros em assets/audio/: copie diretamente para uso (licença gratuita comercial, veja audio/ATTRIBUTION.md): audio/bgm/ contém opções de BGM com ritmo forte; audio/sfx/<categoria>/ contém 149 efeitos sonoros em 16 categorias (transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter). Para encontrar um som, primeiro entre no diretório da categoria; a lista completa está em sound-design.md. O termo "sparkle" está no diretório light/ (não há sparkle/); A regra S1 proíbe timbre, não a ação — se a tela realmente tiver um clique/interruptor, o som diegético deve ser aplicado, mas metade dos sons em ui/ são tons de feedback sintéticos (tone/bleep/notification) que precisam ser ouvidos individualmente, não liberados em massa (lista em sound-design 3.3); amostras longas e materiais leves têm listas próprias que exigem tratamento especial (sound-design 4.1).
• demos/: Código-fonte de implementação de cada carta: a maioria são demonstrações em escala de cinza autocontidas (algumas importam componentes de cena UI falsa de demos/_fixtures/Fixtures.tsx, algumas importam texturas de página real de demos/_textures/), basta copiar para um projeto Remotion para executar; algumas demonstrações usam @remotion/motion-blur (CameraMotionBlur), exigindo npm i @remotion/motion-blur; a lista está em demos/README.md.
• template/: Projeto renderizável completo: npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4.
• jianying-export/: Módulo de exportação de projeto CapCut: mac_draft.py (testado no CapCut Mac 11.2), windows_draft.py (implementado conforme caminho de suporte upstream, não verificado em hardware real), smoke_test.py (teste mínimo de fumaça para novos ambientes). O fluxo, extração da linha do tempo e método de construção de trilhas estão em references/jianying-export.md; requer venv + pip install pyJianYingDraft.
• gallery/: Galeria estática: dê prioridade à versão online https://vincentwei1021.github.io/video-shotcraft/library.html ; para executar localmente, primeiro execute gallery/fetch-media.sh para baixar amostras (mp4 não está no git), depois cd gallery && python3 -m http.server 4178. 152 cartas com 209 amostras dinâmicas podem ser navegadas/pesquisadas/selecionadas múltiplas para copiar nomes de cartas — ideal para o usuário escolher planos visualmente.