Communitygithub.com

Vídeo Animado

Crie vídeos animados em código com Remotion (React, SVG, three.js): explicadores, histórias de personagens, motion graphics, tipografia cinética, colagem de papel e infográficos animados, em 2D ou 3D, a partir de um roteiro ou narração, em qualquer proporção de tela.

O que é Vídeo Animado?

Esta skill capacita agentes de IA a transformar um briefing em um vídeo animado completamente em código, usando Remotion (React, SVG, three.js) para criar cada quadro visual de forma determinística. Ela é ideal para criar explicadores, histórias de personagens, motion graphics, tipografia cinética, colagens e infográficos animados, tanto em 2D quanto em 3D, a partir de um roteiro ou narração, em qualquer proporção de tela. A skill prioriza a criatividade visual: a cada conceito, busca-se a imagem mais surpreendente que torne a ideia clara, mesmo que abstrata ou metafórica, desde que o espectador entenda o mecanismo mais rápido do que com uma imagem literal. O processo é dividido em etapas: encontrar os conceitos visuais, definir o formato e estilo, construir a base de áudio (narração, trilha e efeitos), criar um esqueleto e storyboard com quadros-chave, desenvolver os assets e cenas, e finalmente revisar e entregar o vídeo. A skill é especialmente útil para projetos que exigem controle preciso sobre cada elemento visual, como vídeos explicativos, anúncios, ou conteúdo para redes sociais, e funciona melhor com modelos de IA mais fortes em modo de alto esforço. Ela suporta integração com workspaces do Reel Studio, onde as preferências de estilo e narração são carregadas primeiro, e oferece referências para direção, pipeline de Remotion, revisão e reflexão pós-projeto.

Funciona com✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/CrissAlvarezH/ai-reel-gen-app/tree/HEAD/.claude/skills/animated-video

Perguntar na sua IA favorita

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

Documentação

O que Vídeo Animado faz?

Em um workspace Reel Studio: carregue a skill reel-studio (.claude/skills/reel-studio/SKILL.md) e a skill de estilo do vídeo (styles/<id>/SKILL.md) primeiro. Elas prevalecem sobre os padrões abaixo: o estilo já está escolhido por vídeo (não ofereça outras aparências ou uma rodada de quadros de estilo), a narração é ElevenLabs (voz do Reel Studio → Ajustes → Voz) com timings de tools/el_words.py (não Whisper), novos projetos começam a partir do template do estilo (não templates/remotion-film/). A busca de imagens é livre na web; Ajustes → Imagens controla apenas integrações opcionais de API e geração de imagens. Use esta skill para o método: brainstorm de imagens, aprovação de conceito, storyboard, teste mudo, revisão.

Transforme um briefing em um vídeo animado finalizado no qual cada imagem é feita em código: desenhada proceduralmente, ou construída a partir de assets aprovados e renderizada deterministicamente. Footage de geradores de imagem ou vídeo é uma rota separada (passo 2). Leia ~/.animated-video/profile.md primeiro se existir: as preferências declaradas do usuário vêm antes dos padrões aqui.

O que faz o filme

Seja tão inventivo quanto a ideia permitir. Para cada conceito que o filme mostra, procure a imagem mais surpreendente que ainda faça o conceito funcionar. Ideias bizarras, impossíveis, engraçadas ou bonitas são bem-vindas, e cada uma é julgada por um teste: o espectador entende o mecanismo mais rápido, ou lembra dele por mais tempo, do que com a imagem literal? A imagem literal é o plano de fundo que vence apenas quando nada consegue superá-la. A precisão verifica uma ideia; uma metáfora que a narração ancora permanece.

A imagem explica; a voz confirma. Com o som desligado, um espectador aprende cada passo a partir do que acontece na tela: o mecanismo é performado como causa e efeito (cortar, enviar, bater, copiar), cada linha da ideia visível por sua palavra, com rótulos apoiando o evento em vez de substituí-lo (movimento).

A imagem mantém a pergunta. Um roteiro mantém uma pergunta em aberto e a responde em etapas. O primeiro quadro levanta essa pergunta, e nenhuma imagem, rótulo ou título mostra a resposta antes que a narração a alcance: um espectador que já viu a resposta tem um motivo para sair.

A cor direciona o olhar. Decida cedo o que cada cor significa: a coisa que o espectador acompanha carrega o destaque e é a mais brilhante e saturada no quadro, e uma cor mantém seu significado durante todo o filme. Dê a cada outro papel sua própria cor e deixe tudo que não carrega significado permanecer quieto. Para combinar uma aparência de referência, amostre suas cores a partir dos quadros e dê aos animadores os números: luzes, névoa e gradação desviam uma cor nomeada para o cinza.

Desenhe de forma fresca para cada briefing. Pacotes de estilo, partes e filmes anteriores são pontos de partida. Um filme anterior que o usuário gostou define o padrão de acabamento e ritmo, nunca as ideias, dispositivos ou aparência.

Feedback restringe uma imagem, nunca a imaginação. Quando o usuário rejeitar uma ideia, escreva o que havia de errado com ela (confundiu, pareceu forçada, pareceu barata) e encontre uma melhor de qualquer tipo. Isso se torna uma regra sobre uma categoria inteira apenas quando o usuário a declara como tal, e os briefings que você escreve para outros agentes carregam apenas as regras que o usuário declarou.

Pergunte com uma recomendação, para que "sim" seja uma resposta completa. Diga uma vez no início que a skill funciona melhor com o modelo mais forte disponível em alto esforço.

Escale a produção para a peça

  • Curta ou simples: um agente pode executá-la, verificando quadros estáticos. O brainstorm ainda vai para um agente novo e o teste mudo ainda é executado.
  • Mais longa, ou com muitos atos: mantenha as imagens, o conceito e a aparência com um agente até que o usuário os aprove, então paralelize a construção conforme adequado. O storyboard fixa a ideia de cada batida; quem anima é dono de como ela se move e propõe uma imagem melhor quando vê uma. Mantenha uma folha de deixa para todo o filme para que o som permaneça intencional. Em execuções longas, envie status com um quadro estático e o tempo total restante; faça com que os agentes carimbe as linhas de status com o relógio da máquina, já que os tempos auto-relatados podem desviar por horas.
  • Uma revisão de um filme finalizado: pergunte quais seções reconstruir, recomendando as mais fracas; mantenha o resto e emende as novas partes.
  • Um insert para a linha do tempo de outra pessoa (um plano animado dentro de uma edição de câmera, que video-edit possui): inserts. Quando não estiver claro quem possui a linha do tempo, pergunte uma vez.
  • Um apresentador na câmera no filme: composição antes que esses planos sejam planejados.

1. Encontre as imagens e o conceito

Escolha a espinha em direção: uma história (alguém que quer algo) ou um explicador (como algo funciona, por que, o que um número significa). As imagens vêm de um agente de brainstorm novo que não vê regras de produção, julgado por um selecionador separado (encontre as imagens); então conceitos que genuinamente diferem, sua recomendação, e o escolhido como uma folha de batidas cronometrada com a imagem de cada batida. Um roteiro finalizado define as palavras, não as imagens. Com a skill video-script instalada, verifique a narração em relação à sua lista de verificação.

Obtenha a aprovação do usuário do conceito e suas imagens antes de construir, incluindo peças curtas.

2. Trave o formato e o estilo

  • Quando a solicitação nomear o formato e o estilo, confirme em uma linha. Caso contrário, mostre estilos que genuinamente diferem como quadros de estilo da mesma batida (estilos) e obtenha uma escolha; leia o pacote do estilo escolhido quando ele tiver um.
  • Pergunte sobre a rota e seu custo: feito em código é gratuito por plano e consistente; vídeo de IA custa por clipe e desvia.
  • Procure fotos dos objetos reais, lugares e interfaces que o filme mostra. Se uma pessoa real aparecer, pergunte onde seu footage vive e extraia quadros dele.

3. Construa a espinha de áudio

Cada batida temporiza a partir da narração (sem uma, a partir da base musical, escolhida primeiro). Prefira a gravação do usuário; antes que ela exista, construa com timings de palavras substitutos, rotulados. templates/remotion-film/align.py dá timestamps de palavras e um envelope de volume; derive cada deixa de palavras com cue("frase"), para que um novo VO retemporize o filme. As legendas são unidades de sentido escritas à mão e verificadas em relação à transcrição. Música e efeitos acompanham o primeiro corte: os arquivos do usuário, a biblioteca de assets ou amostras em disco antes da síntese (templates/parts/audio/designed.py), e qualquer coisa sintética é rotulada.

4. Esqueleto e storyboard

Copie templates/remotion-film/, conecte atos, legendas e áudio, e renderize quadros estáticos ao longo da linha do tempo (pipeline). Fatos não verificados ficam de fora do filme.

Mostre ao usuário um storyboard de quadros-chave antes da animação completa: um quadro estático por batida no estilo escolhido, construído nos arquivos de cena reais para que cresça nos planos finalizados. Quadros estáticos aprovados não mostram se algo acontece entre eles; quando o significado vive no movimento, um animatic (formas aproximadas realizando as batidas sobre o VO) mostra isso de forma econômica.

5. Construa os assets e planos

Pesquise a biblioteca de assets primeiro quando estiver instalada. Peças recorrentes se mantêm em cada escala que a história precisa: personagens desenhados por personagens; partes tem um globo, um iPhone iMessage, sons projetados, um kit de realismo e um kit de movimento para movimento denso de three.js. Reestilize o que você pegar.

Quando vários agentes animarem, dê a eles uma aparência e barra escritas, tiradas do pacote de estilo e dos quadros de âncora (o quadro do filme de referência para cada batida, ou o storyboard). Em cada estilo, um objeto, interface, empresa ou lugar real é reconhecível como ele mesmo, e um substituto recebe o mesmo cuidado. Derive os eventos sonoros de cada ato das constantes que o desenham, para que mover uma batida mova seu som.

6. Revisão e entrega

Agentes veem quadros, não reprodução: verifique movimento como tiras de quadros consecutivos (verificações temporais) e áudio por medição, e diga o que foi apenas medido. Quando você não pode confiar em seu próprio olho, faça com que agentes novos independentes julguem (revisão); pare de iterar quando uma rodada ganha pouco ou o principal problema precisa do usuário.

Antes do primeiro corte completo ir para o usuário, um juiz novo executa o teste mudo nele; corrija o que não consegue seguir. Um corte completo rejeitado recomeça a partir das imagens (reiniciar).

Renderize o final (render.sh normaliza o volume; filmes longos em partes) e verifique o primeiro quadro, o último segundo e o volume. Relate o caminho, problemas abertos, verificações ignoradas, imagens de origem e qualquer coisa sintética ou inventada. Comite cada versão no repositório git do projeto. Com a biblioteca de assets instalada, feche seu catálogo.

Sob solicitação, reflita com o protocolo de reflexão.

Individual skills in this repo

This repo contains 4 individual skills — each has its own dedicated page.

CrissAlvarezH/new-style

Create a new visual style for the creator's videos in a Reel Studio workspace (styles/<id>/style.json): interview him for its name, feel, colours and what each one means, fonts, motion, where pictures come from, reference links and images, then write the style so it shows in Estilos and new videos can use it. Use when he asks for a new style or presses "Nuevo estilo" on the Estilos page.

CrissAlvarezH/persona-hablando

The "Persona hablando + animaciones" format of a Reel Studio video — the creator talks to camera in his own recording; you transcribe it, agree the cuts with him (pauses, flubs, retakes), cut it, and lay the video's style animations over or between his shots. Use for any video whose format.txt says persona-hablando.

CrissAlvarezH/reel-studio

How a narrated explainer video is made in a Reel Studio workspace, in any visual style — script, pictures, voice, images, build, board, sound, mute test, render — following the creator's settings from the studio (profile, format, voice, image sources). Use for any new or revised video in a project's videos/ (projects/<id>/videos/). The video's style adds its own skill (styles/<id>/SKILL.md) for the look and the Remotion kit; LESSONS.md has what past videos taught.

CrissAlvarezH/video-script

Write short-form video scripts that hold viewers, using the creator's own video analytics. Use when choosing the hook of a chosen idea, writing or tightening a script before filming (talking-head or narrated explainer), or turning a posted video's insights into lessons. Coming up with ideas is content-ideas'.

Habilidades Relacionadas