Communitygithub.com

habilidade-screenshot-motion

Crie vídeos de produtos a partir de capturas de tela usando seis modelos prontos: destaque de cartas (spotlight), lançamento escuro (launch-film), galeria orbital (orbital gallery), gráficos cinéticos (kinetic graphics), dobras prismáticas (prismatic folds) ou livro de história com virada de página (page-turn storybook). Conte com texto editável, áudio licenciado opcional e pacotes portáteis para edição no desktop. Ideal para promos de capturas de tela, vídeos de lançamento de aplicativos, flipbooks ou para expandir esta biblioteca de modelos.

O que é habilidade-screenshot-motion?

Esta habilidade gera vídeos profissionais e editáveis a partir de capturas de tela, utilizando um dos seis modelos de animação pré-definidos: spotlight, kinetic, prism, orbit, launch e storybook. Cada modelo possui duração e efeitos visuais distintos, sendo projetado para diferentes estilos de apresentação, desde um elegante destaque de cartas até um livro de história animado. A habilidade gerencia todo o fluxo de trabalho: inspeciona as capturas, escreve texto explicativo curto e concreto, configura um projeto JSON isolado, prepara um diretório de trabalho com dependências próprias (Node.js 22+ e Chrome/Chromium), renderiza quadros de prova para verificação e, finalmente, produz o vídeo final com ou sem áudio licenciado. É uma ferramenta extensível, permitindo a adição de novos modelos seguindo um contrato de extensão, e aceita solicitações de revisão em linguagem natural para atualizar o projeto e renderizar novamente o resultado.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/simwy/screenshot-motion-skill/tree/HEAD

Perguntar na sua IA favorita

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

Documentação

Habilidade Screenshot Motion

Produza um vídeo real e editável com um dos seis modelos implementados:

ModeloEfeitoCapturas de TelaDuração
spotlightCinco cartas se desdobram, a captura central se torna o herói, depois a fila retornaExatamente 512 segundos
kineticTipo em negrito, telas divididas e transições gráficasExatamente 516 segundos
prismTelas sanfonadas, revelações em vidro em camadas e varreduras de luzExatamente 518 segundos
orbitGaleria orbital neon, rotação em profundidade e fila finalExatamente 518 segundos
launchPromo editorial escura com colagem, close-ups de recursos, manchetes grandes e CTAExatamente 520 segundos
storybookCapa dura abre, páginas ilustradas viram, capa fecha1–12Pausas configuráveis; 5 páginas padrão para 32 segundos

Leia seleção e mapeamento de modelos antes de organizar as capturas de tela. Siga um efeito explicitamente selecionado. Caso contrário, recomende/selecione a correspondência mais próxima da intenção do usuário, preservando escolhas anteriores; não padronize todas as solicitações para um livro. O registro de modelos autoritário é templates.json. Esta é uma biblioteca extensível, não vídeos de demonstração finalizados.

Entradas e decisões

Identifique o produto sendo promovido, a ordem das capturas fornecidas e o idioma de saída a partir da solicitação. Preserve escolhas anteriores. Se o produto for ambíguo, esclareça antes de escrever alegações promocionais; caso contrário, use padrões razoáveis e prossiga. Padrão: 1920×1080, 30 fps, pausas de quatro segundos para storybook, texto explicativo em português, sem narração falada.

Inspecione as capturas de tela antes de escrever o texto. Use a interface real sem inventar controles, contagens de clientes, alegações de desempenho, preços ou endereços de download. O texto explicativo é uma camada editável separada; o texto incorporado nas capturas de tela não pode ser alterado alterando as legendas. Use mídia fornecida pelo usuário ou devidamente licenciada. Mantenha capturas de tela privadas e trabalhos gerados fora do diretório da habilidade instalada.

Interação com o usuário

Trate a invocação como uma solicitação para produzir o vídeo. Peça capturas de tela e detalhes do produto apenas quando estiverem faltando; escreva a configuração e execute a preparação, renderização e mixagem você mesmo quando as ferramentas estiverem disponíveis. Não entregue comandos Python ao usuário nem exija que ele escreva JSON como fluxo de trabalho normal. Verifique as dependências locais e relate requisitos ausentes concretos. Respeite as permissões de execução; explique qualquer ação que o usuário deve tomar quando seu ambiente não puder realizá-la.

Aceite solicitações de revisão em linguagem natural, atualize o projeto gerado e renderize um resultado revisado. Para alterações de capturas de tela ou duração do storybook, prepare um novo trabalho para que os metadados de composição permaneçam consistentes. Mantenha comandos técnicos na execução do agente ou na solução de problemas do desenvolvedor, a menos que o usuário os solicite explicitamente. Veja comandos de renderização para desenvolvedores para uso manual.

Crie o vídeo

  1. Leia a referência de configuração. Escreva um projeto JSON junto aos ativos do usuário, usando o exemplo correspondente em examples/ como ponto de partida. Escreva explicações curtas e concretas, um recurso por captura de tela. Selecione --template spotlight, --template launch, --template orbit, --template kinetic, --template prism ou --template storybook; o comando abaixo ilustra o storybook. Respeite os limites de linha validados.
  2. Prepare um trabalho isolado:
    python3 /caminho/para/screenshot-motion-skill/scripts/motion.py prepare --template storybook --config /caminho/para/project.json --out /caminho/para/novo-job
    
    Trabalhos existentes nunca são sobrescritos por prepare. O trabalho contém seu próprio renderizador, capturas de tela copiadas e configuração normalizada; não depende da habilidade após a preparação, exceto pela CLI auxiliar.
  3. Instale as dependências dentro do novo trabalho usando npm install. Node.js 22+ e Chrome/Chromium são necessários. Use npm run studio nesse trabalho para pré-visualização interativa.
  4. Renderize quadros estáticos representativos para o modelo selecionado primeiro:
    python3 /caminho/para/screenshot-motion-skill/scripts/motion.py render --job /caminho/para/novo-job --frame 150 --browser /caminho/para/chrome
    
    Inspecione o PNG resultante. Corrija texto, recorte ou layout antes de uma renderização completa. Quadros de pré-visualização úteis: spotlight 105/190/330; launch 60/150/250/355/450/550; orbit 45/170/270/380/490; kinetic 35/100/170/245/320/430; prism 70/150/240/330/470; storybook 150 e 90 + holdFrames + 21 para o ponto médio da primeira virada. Escolha quadros dentro da duração do trabalho.
  5. Renderize sem --frame. Isso cria out/video-silent.mp4. Forneça um navegador existente explicitamente se a descoberta automática falhar; o script não baixa um navegador.
  6. Execute motion.py mix --job /caminho/para/novo-job para criar out/video.mp4. Sem entradas de áudio, ele cria uma cópia silenciosa. Para música, sons de transição ou sons de papel, leia áudio e licenciamento. Não adicione narração a menos que solicitado e um serviço de voz autorizado adequado esteja disponível.
  7. Siga as verificações de saída, inspecione o arquivo renderizado em vez de apenas o código-fonte, depois retorne o vídeo real e o caminho do trabalho. Seja preciso sobre se narração, audição ou reprodução em tempo real foi realizada. Se a renderização estiver bloqueada, relate a dependência ausente específica; não substitua por uma imagem estática e chame de vídeo.

Entrega de edição no desktop

Quando solicitado, siga exportação de edição e compatibilidade. Renderize o modo limpo e exporte o pacote portátil com legendas SRT editáveis, faixas de áudio independentes, capturas de tela originais e clipes de cena. Explique que a geometria do movimento permanece incorporada e as legendas importadas precisam de estilização no editor. Mantenha o MP4 final estilizado como referência. Verifique o aplicativo/versão do usuário antes de afirmar suporte a rascunho nativo; o adaptador Jianying legado opcional é experimental e não é verificado no macOS/Windows ou CapCut atuais. Nunca instale silenciosamente rascunhos na biblioteca de um aplicativo.

Detalhes de implementação estáveis

As seguintes notas sobre dobra de página se aplicam ao storybook. Para spotlight, preserve a barreira de pintura e os rótulos no espaço da tela. Para launch, use cortes de region normalizados apenas onde suportados pela interface visível; nunca reutilize coordenadas de pixel de um produto anterior.

  • Uma página direita virando tem a captura de tela antiga na frente e a próxima explicação no verso. Não faça crossfade em páginas duplas nem espelhe o texto reverso.
  • Toda a geometria segue números de quadro; nunca introduza animação baseada em tempo real ou aleatoriedade não seedeada.
  • A malha de tira Canvas2D evita problemas aninhados de composição 3D do navegador. Mantenha o caminho rápido de página plana, pequena sobreposição de tira e iluminação contínua sobreposta: sombreamento anti-serrilhado por tira cria linhas visíveis através do texto.
  • A distância da câmera 3000 mantém as pontas das páginas levantadas dentro do quadro 1080p. Reavalie o envelope completo da virada após alterações na câmera ou no tamanho da página.
  • O renderizador padrão ajusta imagens sem cortar. Capturas de tela em paisagem são suportadas; não as estique para uma proporção de aspecto retrato.
  • Renderize sequencialmente por padrão. Aumentar a concorrência requer outra verificação visual dos quadros capturados.

O código original do pacote é licenciado sob MIT. Remotion e mídia têm licenças separadas; veja THIRD_PARTY_NOTICES.md. Esta habilidade não autoriza publicação, upload de ativos do usuário, alteração de configurações de conta ou instalação global.

Estenda a biblioteca

Quando solicitado a adicionar outro efeito, siga o contrato de extensão. Adicione um renderizador, entrada no registro e exemplo, em vez de substituir modelos existentes. Verifique tanto o novo efeito quanto os modelos existentes relevantes.

Habilidades Relacionadas