altacrest/motion-how-to-video

Vídeo tutorial narrado com Claude Motion

É assim que a equipe de marketing da Novacrest cria vídeos tutoriais e de documentação: telas reais do aplicativo, um cursor deslizante, uma legenda curta por passo, uma voz em inglês lendo cada legenda, um MP4 finalizado. Tudo começou com os filmes de início rápido do OmniOrders (Outubro de 2026).

Tudo o que o filme precisa já vem com esta skill (os caminhos são relativos a este arquivo):

• engine/shared.js e engine/base.css: o mecanismo de captura de tela (SS) e sua aparência. Nunca reconstrua-os de memória.
• examples/how-to-film/: todos os módulos de cena do filme de referência, "Crie um vídeo tutorial com Claude Motion" (27 de Outubro de 2026), com seus lines.json, scenes.json e shots.json. Leia-os antes de escrever cenas: eles mostram cada opção de SS.def em uso.
• scripts/voice.py: a narração. API ElevenLabs, um MP3 por legenda, verificado com Whisper quando instalado. É executado no Terminal do próprio usuário.
• scripts/mix.py: coloca cada clipe sob sua legenda e escreve o MP4 finalizado (precisa do ffmpeg).

Regras rígidas

• Apenas telas reais, capturadas do aplicativo. Nunca redesenhe a UI do aplicativo: telas desenhadas foram detectadas nos primeiros filmes de início rápido. Um cartão simples mostrando um comando é aceitável; uma cópia desenhada de um aplicativo ou janela de Terminal não é.
• Use a conta de teste. Nenhum dado real de cliente, chaves, tokens ou senhas na tela: cubra-os com um patch ou use os valores dummy da conta de teste. Nunca faça login para o usuário; peça que ele faça login.
• A narração é em inglês (EUA), e as legendas são o roteiro: uma por passo, palavras simples que qualquer pessoa entenderia, com no máximo cerca de 12 palavras, sem travessões. A voz lê cada legenda palavra por palavra. Quando a voz disser uma palavra errado, coloque uma pronúncia escrita em say.json; a legenda permanece como escrita.
• Nunca estique o vídeo para caber na voz. As legendas são sincronizadas com seus clipes (Passo 4). Um clipe que ainda dure muito é acelerado um pouco (mix.py permite no máximo 1.15x), ou sua linha é encurtada e gravada novamente.
• Piloto primeiro: grave as linhas da primeira cena e verifique-as antes do restante, e novamente após qualquer alteração na voz ou no roteiro.
• Nenhum LLM avalia a voz. O voice.py pontua cada clipe com Whisper (taxa de erro de palavras) quando o faster-whisper está instalado; caso contrário, o usuário ouve.
• Nunca peça, imprima ou cole uma chave de API no chat. A chave ElevenLabs reside apenas em um arquivo no computador do usuário.
• Pergunte antes de baixar arquivos, nomeá-los e informar de onde eles vêm.

Por que a voz é executada no Terminal do usuário: o workspace do Claude e o shell do Claude no computador do usuário não conseguem alcançar a ElevenLabs (a lista de permissões da rede Novacrest bloqueia api.elevenlabs.io e elevenlabsusercontent.com; verificado em 12 de Novembro de 2026), e as chaves nunca passam pelo chat. Claude prepara tudo e o usuário cola um comando. O conector ElevenLabs (conector personalizado, https://api.elevenlabs.io/v1/mcp) sintetiza fala sem chave, mas seu áudio retorna como links elevenlabsusercontent.com que o workspace não consegue baixar, então não é usado aqui. Se um administrador liberar esses dois domínios, reavalie isso.

Passo 1: escopo e legendas

Obtenha estas informações, perguntando apenas o que estiver faltando em uma única rodada: o fluxo (por exemplo "criar uma transferência no OmniOrders"), o aplicativo e sua conta de teste, onde o vídeo será usado (uma página de documentação, o guia de início rápido, YouTube) e as cores do produto. Escreva a lista de passos e uma legenda por passo, além de uma linha de título e uma linha final, como lines.json ({"id": "legenda"}, na ordem do filme; ids como open, ask-a, ask-b, end). Adicione say.json ({"id": "texto falado"}) apenas para linhas com uma palavra que a voz possa dizer errado (OmniOrders como "Omni Orders", um nome de repositório com traços). Mostre as legendas ao usuário no chat e prossiga a menos que ele as altere.

Passo 2: iniciar a narração

Inicie-a assim que as legendas estiverem definidas; capture e construa enquanto ela é gerada.

1. Crie uma pasta de filme no computador do usuário, ~/Downloads/<slug-do-filme>/, com lines.json, say.json (se houver) e uma cópia de scripts/voice.py. Com uma pasta vinculada, escreva-os usando device_bash. Sem uma pasta vinculada, envie os arquivos com SendUserFile e peça ao usuário para colocá-los em uma única pasta.
2. Na primeira vez, o usuário precisa de uma chave de API ElevenLabs com acesso Text to Speech (README, "ElevenLabs"). Verifique se ~/.config/elevenlabs/env existe (teste a existência do arquivo; nunca o leia). Se não existir, inicie o bloco abaixo com a linha de configuração.
3. Forneça ao usuário um bloco pronto para colar no Terminal:

   cd ~/Downloads/<slug-do-filme>
   python3 voice.py setup        # apenas na primeira vez: cole a chave quando solicitado (a digitação fica oculta)
   python3 voice.py check        # a chave funciona, créditos restantes
   python3 voice.py --only open,<ids da primeira cena>
   

   Quando o piloto soar correto (voice.json não mostrar flags, ou o usuário ouviu), o restante é python3 voice.py.
4. A voz padrão: Matilda (XrExE9yKIg1WjnnlVkGX), eleven_multilingual_v2, estabilidade 0.5, similaridade 0.75, velocidade 1.0, MP3 44.1 kHz 128 kbps; cada linha é lida com as legendas anterior e posterior como contexto, para que a leitura flua. Altere a voz ou velocidade apenas quando o usuário solicitar. O voice.py imprime os caracteres a serem usados (cerca de um crédito cada); se check mostrar menos créditos restantes, pare e pergunte.
5. Os clipes vão para voice/<id>.mp3; voice/voice.json lista a duração de cada clipe e, com Whisper, o que foi ouvido e a taxa de erro de palavras. Uma linha acima de 0.05 deve ser ouvida, uma nova pronúncia em say.json ou nova redação, então python3 voice.py --only <id> --redo.

Passo 3: capturar as telas

1. Carregue a skill claude-in-chrome. Abra o aplicativo em uma nova aba do Chrome com sessão iniciada do usuário. Redimensione a janela até que a viewport da página seja 1512 x 745 (verifique innerWidth e innerHeight): esse é o tamanho do mundo do mecanismo, e as capturas de tela são retornadas em 2x, 3024 x 1490.
2. Percorra o fluxo na conta de teste. Capture cada estado que o filme precisar com uma captura de tela computer e save_to_disk: true: antes e depois de cada clique; para digitação, o campo vazio e o campo preenchido (o filme revela linhas digitadas como patches recortados da captura preenchida).
3. No workspace, converta para webp (qualidade cerca de 90), nomeie como <fluxo>_<passo>.webp, mais recortes 2x de cada linha digitada. Registre o caminho da URL de cada captura em shots.json e o retângulo de cada patch em pixels da view (espaço 1512 x 745).
4. Não envie nada que altere dados fora da conta de teste. Pare e pergunte se um passo faria isso.

Passo 4: construir o filme

1. Crie o filme a partir do tipo de artefato Motion (encontre-o na listagem de tipos da ferramenta Artifact), title = o nome do vídeo, e leia as instruções do tipo que são retornadas: elas regem o filme. Resolva suas perguntas na solicitação para que nenhum formulário seja necessário. Estilo: cursor guiado sobre capturas de tela reais, a aparência do filme de referência. Cores: a paleta do produto (OmniOrders: #16213E, #11ACE4, #F4F7FB, #2FD193). Duração: definida pela voz (abaixo), mais um cartão de título de 5 segundos e um cartão final de 7 segundos.
2. Escreva engine/shared.js no filme como modules/shared.js inalterado, e engine/base.css como modules/base.css, alterando apenas as quatro cores em sua primeira linha. Envie as capturas de tela e recortes deste filme como seus ativos; nunca copie refs _blob de outro filme.
3. Escreva lines.json (o arquivo do Passo 1), shots.json (o caminho da URL de cada captura; "host" é o domínio que a barra do navegador mostra antes de um caminho que começa com /), um módulo de cena por passo construído com SS.def (o cartão de título usa SS.open; SS.end aceita mark, next e url), e scenes.json com dur e desc de cada cena. Declare as legendas como caps: [['<id>', tin, tout], ...] para que o mix.py possa encontrá-las; uma linha narrada sem legenda (o cartão de título) é declarada da mesma forma em seu módulo, por exemplo const voiceOnly = [['open', 0.4, 4.6]];. Siga os exemplos: o cursor desliza para o controle, um anel e um ripple de clique marcam-no, a câmera faz um ease, a legenda fica na placa escura.
4. Sincronize as legendas com os clipes em voice/voice.json: em cada cena, a primeira legenda aparece em 0.3 s, cada legenda permanece pela duração do seu clipe mais 0.45 s, e a próxima aparece 0.35 s depois disso. A dur de uma cena é o tempo de saída da sua última legenda mais cerca de 0.4 s, ou maior quando a ação na tela precisar. Ajuste o cursor, anéis e câmera dentro dessas janelas. Se a voz ainda não tiver voltado, dê a cada legenda cerca de 5 s e reajuste quando ela chegar.
5. Mantenha a trilha sonora discreta e moderna: as primeiras trilhas de início rápido foram chamadas de "órgão de igreja dos anos 80".
6. O usuário reproduz o filme e solicita alterações; aplique-as (uma legenda alterada é narrada novamente). Quando estiverem satisfeitos, o MP4 é exportado com a seta de download abaixo do player na página do filme: o usuário clica nela, ou Claude no Chrome clica depois que o usuário autoriza. O arquivo vai para a pasta Downloads.

Passo 5: mixar

1. Coloque o MP4 exportado, a pasta voice/, scenes.json e os módulos de cena em um só lugar: a pasta do filme no computador do usuário (execute mix.py lá com device_bash quando ffmpeg estiver instalado), ou o workspace na nuvem (prepare-os). Documentos salvos do filme com ArtifactData (out_dir) funcionam como estão.
2. python3 mix.py cues --scenes scenes.json --modules <pasta com scene-*.js> --lines lines.json escreve cues.json: início e fim de cada legenda no filme (o início da cena, a soma das dur das cenas anteriores, mais os tempos da legenda).
3. python3 mix.py mix --film <exportado>.mp4 --voice voice --cues cues.json --out <produto>-<fluxo>.mp4 --web inicia cada clipe no momento de sua legenda, mantém a trilha sonora do filme a 25% abaixo da voz quando a exportação tem som, nivela a voz para -16 LUFS e copia a imagem. Ele para em um clipe que precise de mais de 1.15x; encurte essa linha, narre-a novamente e mixe novamente.
4. python3 mix.py frames --film <produto>-<fluxo>.mp4 --cues cues.json --out frames salva um quadro no ponto médio de cada legenda. Verifique cada um: legenda visível, tela correta, nada privado. Em seguida, reproduza os primeiros segundos: a voz começa junto com sua legenda. Siga as regras de ffmpeg da skill de criação de vídeo para qualquer outra coisa.

Passo 6: entregar

• Envie o MP4 finalizado com SendUserFile e salve-o na pasta vinculada do usuário como <produto>-<fluxo>.mp4.
• Para um site: a cópia -web.mp4 vai em um PR para o repositório do site. Forneça o link ao usuário; ele faz o merge.
• Termine com uma lista curta do que o usuário ainda precisa fazer: o comando no Terminal, a exportação, o merge do PR.

Configuração, uma vez por pessoa (o README do plugin tem os detalhes)

1. Instale a partir do GitHub: Claude > Personalizar > Plugins > Adicionar > Adicionar marketplace, digite altacrest/novacrest-skills e escolha Usar, deixe Sincronizar automaticamente ativado, Sincronizar, depois instale o vídeo tutorial.
2. ElevenLabs: uma chave de API com acesso Text to Speech, salva com python3 voice.py setup em qualquer pasta de filme.
3. Claude no Chrome, com sessão iniciada na conta de teste do aplicativo.