O que é o Remotion?
O Remotion é um framework para criar vídeos de forma programática usando React. Você não precisa aprender After Effects ou DaVinci Resolve, nem quebrar a cabeça descobrindo como arrastar e soltar arquivos de mídia em uma timeline (linha do tempo). Você pode definir animações, transições e efeitos visuais diretamente através de vibe coding. Pense nele como o "React para vídeos" — você constrói a composição do vídeo usando componentes, props e as tecnologias Web com as quais você já está familiarizado.
O surgimento das Remotion Skills quebra as fronteiras da produção de vídeo tradicional, permitindo que a criação de um vibe video seja feita de forma tão rápida e fluida quanto o vibe coding, tudo através de interações por chat (conversas).
O que é possível fazer no TRAE?
Usar as Agent Skills do Remotion no TRAE permite que você faça o vibe code de um vídeo completo utilizando apenas linguagem natural. Basta descrever diretamente os elementos que você deseja: animações, transições, efeitos de UI e muito mais. O TRAE gera o código do Remotion para você em poucos minutos, sem que você precise abrir um editor de vídeo tradicional em nenhum momento!
Casos de uso: Os vídeos gerados com o uso destas Skills são perfeitos para demonstrações de produtos (product demos), anúncios de lançamento de funcionalidades (feature releases) e vídeos promocionais.
Na prática
1.Adicione o Remotion às suas TRAE Skills
Primeiro, você precisa abrir um novo projeto no TRAE.
Existem duas formas de instalar as Remotion Skills:
Método 1: Baixar o arquivo .zip do repositório no GitHub: https://github.com/remotion-dev/remotion/tree/main/packages/skills
Método 2: Instalar via linha de comando com o Skill.sh. Basta copiar o comando abaixo e colar direto no terminal do TRAE.
npx skills add https://github.com/remotion-dev/skills --skill remotion-best-practices
Em "Which agents do you want to install to" (Para quais agentes você deseja instalar), selecione "TRAE Global" ou "TRAE China".
Em "Installation scope" (Escopo de instalação), selecione "Project" (Projeto). Dessa forma, as Remotion Skills serão aplicadas apenas ao projeto atual.
No método de instalação, selecione "Symlink":
2. Comece a gerar o trecho de introdução do seu vídeo
Primeiro, você precisa pensar em como deseja apresentar os elementos-chave da introdução do vídeo e, em seguida, especificar essas informações claramente no prompt (comando), incluindo:
Tema: O que você vai mostrar.
Resolução do vídeo: O Remotion suporta vários tamanhos, mas mudar no meio do caminho dá muito trabalho. Portanto, recomendamos definir os requisitos de tamanho/proporção do vídeo desde o início.
Cena inicial: Mantenha simples (por exemplo, um comando no terminal abrindo um diretório de arquivos).
Estilo visual: Defina o visual (look and feel) do seu vídeo.
Vamos criar uma animação no Remotion para a nova funcionalidade das TRAE Skills, que agora suporta Skills em nível global (global) e de projeto (project-level).
Primeiro, crie uma nova composition (composição):
Um console no estilo janela de terminal do macOS, com resolução de 1920px x 1080px, e uma animação de digitação (typewriter effect) inserindo o comando "cd ./trae/skills".
Tema claro (light theme) e minimalista.
3.Transição para captura de tela (screenshot) e adição do próximo efeito de animação
Você pode anexar uma captura de tela (screenshot) do produto para que o Remotion crie os elementos visuais.
Por exemplo, no vídeo sobre as TRAE Skills, nós anexamos um screenshot do painel das TRAE Skills e, em seguida, pedimos ao agent para gerar a animação do próximo quadro (frame) com base nessa imagem:
Adicione uma transição animada para o painel mostrado no screenshot que eu enviei.
Além disso, você também pode adicionar animações dentro do screenshot (captura de tela) por meio de prompts(comandos). Neste caso, vamos adicionar uma animação para destacar as duas abas (tabs) diferentes no painel de Skills: "Global" e "Project".
Agora, com base no screenshot (captura de tela), destaque a aba 'Project' (Projeto) e você pode adicionar algumas Agent Skills dentro dela.
Depois, alterne para destacar a aba 'Global' e abra-a, e você também pode adicionar algumas Agent Skills dentro dela.
4.Continue adicionando screenshots ou elementos de UI para refinar os detalhes
Você pode continuar adicionando mais screenshots (capturas de tela) ou elementos de UI para aperfeiçoar os detalhes do vídeo. Agora, vamos refinar os detalhes de uma única Skill na lista, para que ela fique perfeitamente alinhada com a UI nativa do TRAE:
Agora, altere a UI do painel de adição de Skills para que fique idêntica à UI do screenshot (captura de tela) que eu enviei. Certifique-se de que cada arquivo de Skill mostre o logotipo correto (aquele laranja do lado esquerdo), e que o botão de toggle (liga/desliga) e o botão de configurações fiquem do lado direito.
Os nomes das Skills não precisam ser iguais aos que estão no meu screenshot.
Em seguida, adicione uma animação para demonstrar a alternância do botão de toggle (liga/desliga) de cada Skill:
Agora, na aba 'Global', faça o toggle (ative/desative) de 1 ou 2 Skills para demonstrar os botões em ação.
E pronto! Agora você tem uma versão inicial de um vídeo de atualização de produto (product update) sobre as TRAE Skills finalizado.
Outras recomendações de prompts úteis para as Remotion Skills
Você pode enviar esses prompts (comandos) diretamente na caixa de chat da IA:
- Visualizar a timeline (linha do tempo) do vídeo, útil para ajustar detalhes de frames (quadros) específicos:
Mostre a timeline com todos os efeitos de animação.
- Adicionar um texto deslizando para a tela (slide-in):
Exiba o texto 'Agent Skills now available in TRAE' por 2 segundos, usando a fonte Inter.
Adicione uma animação de escala (scale/zoom) ao texto, usando uma curva de ease-out.
- Adicionar um efeito de rotação 3D a um elemento:
Adicione uma rotação 3D à janela do terminal na cena de introdução, usando rotateX(20deg) e rotateY(-20deg).
- Adicionar uma imagem de background (fundo) ao vídeo
Substitua o fundo branco do vídeo por uma imagem de background verde-escura.
Com o apoio das Skills, podemos ousar e explorar novos casos de uso, deixando de nos limitar apenas à escrita de código. Elas trazem infinitas possibilidades para todos. Se você ainda não testou, que tal começar criando o seu primeiro vídeo e usá-lo como ponto de partida? Talvez, a partir de hoje, a sua mentalidade para resolver problemas e a sua forma de criar valor comecem a mudar de um jeito surpreendente.
Top comments (0)