O que Motion Craft Pro · 动效工坊 Pro faz?

Motion graphics programável. Inspirado na estética e hábitos do Claude Opus 5.5 de escrever código para fazer filmes: storyboard primeiro, narração depois, quadros-chave, renderização completa.

Não é vídeo gerado por AI como Kling/Jimeng. A imagem é desenhada quadro a quadro pelo código no Canvas.

Localize o diretório da skill (obrigatório sempre)

engine.js / scenes.js / render.js / compose.py / tts.py / film.html / storyboard.json todos no mesmo nível da SKILL.md (plano, sem subpastas).

<diretório_da_skill> = caminho absoluto do diretório pai deste arquivo.

# Auto-verificação do caminho
python "<diretório_da_skill>/compose.py" --check

Proibido depender de caminhos relativos como python scripts/compose.py — o ambiente de revisão não encontrará.

Dependências

Dependência	Uso
Node 18+	render.js
puppeteer-core	Driver do Chrome local
Chrome / Chromium	Renderização
Python 3.9+	tts / compose
edge-tts	`pip install edge-tts`
FFmpeg completo	Mixagem (não usar versão simplificada do Playwright)

Critérios de qualidade (seguir para ser "Pro")

Padrão 1920×1080 (também suporta 1440×1080 / 1080×1920 / 1080×1080)
Uma coisa por tela; fade entre cenas; segurar por mais tempo, entrada curta
Spring com overshoot leve (damping≈16–18, proibido exagero elástico pela tela)
Espaçamento: margem externa ≥ 8% do lado menor; texto quente-claro #f4f1ea, cor de destaque contida (bronze padrão #c4a574)
Título com espaçamento entre letras; diferença de tamanho hierárquico ≥ 1,5×
Narração primeiro + exportar legendas WordBoundary sempre que possível
Exportar ≥4 quadros fixos para verificação antes da renderização completa
renderFrame(t) função pura: proibido Date.now() / Math.random()

Fluxo de trabalho (seguir rigorosamente)

1. Escrever storyboard JSON (antes de qualquer código)

Copie storyboard.json, preencha conforme storyboard.schema.json:

meta: proporção, duração, texto completo da narração, voz
beats[]: id, start, end, type, copy, visual
Tipos de cena: TitleBeat / BulletReveal / StatCounter / CompareBars / QuoteCard / EndCard

Use números, não adjetivos. Exemplo: título 86px, entrada 0,9s, segurar 2,2s — não escreva "mais impactante".

2. TTS → duração real → reescrever cronograma

python "<diretório_da_skill>/tts.py" \
  --text-file narração.txt \
  --out "<diretório_de_trabalho>/voice.mp3" \
  --voice zh-CN-YunxiNeural \
  --rate=-6% \
  --captions-json "<diretório_de_trabalho>/captions.json" \
  --captions-vtt "<diretório_de_trabalho>/captions.vtt"

Use a duração real do voice.mp3 para ajustar beats[].start/end e meta.duration. Não primeiro fixar o tempo e depois adicionar narração.

Observação sobre legendas: se o Edge TTS retornar limites de palavra (WordBoundary), agrupe por caractere; atualmente a maioria das vozes chinesas tem apenas limites de frase (SentenceBoundary), o script dividirá por vírgulas ou travessões em legendas de nível de frase VTT.

3. Preencher film.html (ou modificar a partir do modelo)

Referências no mesmo diretório: engine.js, scenes.js (não ../assets/)
Incorpore o storyboard na página ou mantenha sincronizado com storyboard.json
Chame MCScenes.drawScene(...); decorações à direita podem ser manuais, mas o conteúdo deve usar componentes de cena sempre que possível

4. Inspeção de quadros fixos (obrigatório)

Primeiro renderize uma amostra curta ou arraste t no navegador, ou renderize 1 fps nos pontos-chave. Pelo menos verificar: abertura, meio, dados/comparação, fechamento.

Verifique: sobreposição, texto estourado, muito escuro, alinhamento, legibilidade de legendas.

5. Renderização completa

node "<diretório_da_skill>/render.js" \
  "<diretório_de_trabalho>/film.html" \
  "<diretório_de_trabalho>/frames" \
  30 \
  18

6. Mixagem

python "<diretório_da_skill>/compose.py" \
  --frames "<diretório_de_trabalho>/frames" \
  --voice-file "<diretório_de_trabalho>/voice.mp3" \
  --captions "<diretório_de_trabalho>/captions.vtt" \
  --out "<diretório_de_trabalho>/out.mp4" \
  --duration 18 \
  --width 1920 --height 1080

Opcional: --bgm music.mp3 (narração com ducking), --burn-captions, ou --text para compose gerar TTS inline.

7. Ler qa-report.json + quatro qa-stills

Se não passar, altere storyboard/layout, re-renderize — não entregue sem qualidade.

API do motor (engine.js)

const {
  Ease, spring, springSeg, seg, lerp, beatAlpha,
  glow, beam, drawBackdrop, createParticles, drawParticles,
  drawGrain, drawVignette, drawColorGrade,
  drawTracked, wrapCN, camera, transition, applyWipe,
  divider, card, ring, bars,
  drawCaptions, captionsFromWordBoundaries, layoutGrid, Palette
} = MC;

const { TitleBeat, BulletReveal, StatCounter, CompareBars, QuoteCard, EndCard, drawScene } = MCScenes;

Parâmetros sugeridos para Spring (estética Claude)

Uso	damping	stiffness	overshootClamping
Entrada de título	16–18	140–160	false (permite leve overshoot)
Itens de lista	18	145	true
Números animados	14	120	false

Proporções

Uso	Tamanho
Paisagem padrão	1920×1080
Slides / 4:3	1440×1080
Retrato	1080×1920
Quadrado	1080×1080

Use layoutGrid(W,H) para obter margens e colunas duplas.

Entregáveis

storyboard.json
film.html (re-renderizável)
voice.mp3 + captions.vtt / captions.json
out.mp4 (nível 1080p)
qa-report.json + qa-stills/*.png ≥ 4

Limites

Produz motion graphics, não filmagem real, nem vídeo de difusão
3D complexo / animação de personagens / fluido estão fora do escopo
Edge TTS não é voz humana real; capacidade emocional limitada
Projeto completo do Remotion (ecossistema React, cluster de renderização server-side) não está incluído; este pacote é uma pilha de direção leve pronta para lançamento

Motion Craft Pro · 动效工坊 Pro

O que é Motion Craft Pro · 动效工坊 Pro?

Perguntar na sua IA favorita

Documentação