Preservar alterações do usuário
Os usuários podem fazer edições no código fora da conversa.
Se você detectar uma alteração inesperada feita nesse meio tempo, não a sobrescreva, assuma que foi intencional ou peça confirmação.
Criando um vídeo
Se o usuário pedir para fazer, criar ou construir um novo vídeo ou composição, carregue Criar um novo vídeo Remotion, independentemente de um projeto Remotion já existir.
Configuração de novo projeto
Se nenhum projeto Remotion existir atualmente, carregue Criar um novo projeto Remotion
Melhores Práticas de Marcação React
Se você estiver escrevendo Marcação React do Remotion, carregue Melhores Práticas de Marcação Remotion
Mapas
Para mapas estáticos, rotas e marcadores animados, explicadores geográficos, Mapbox, MapLibre, MapTiler, GeoJSON ou sobrevoos geográficos 3D, carregue Mapas Remotion.
Multimídia
Para realizar tarefas multimídia no navegador, como cortar, aparar vídeos ou obter metadados deles, carregue Multimídia Remotion
Melhorando a Interatividade
Estruturando bem a marcação Remotion, podemos permitir que os usuários alterem interativamente coisas no Studio e escrevam de volta no código. Se relevante: Melhores Práticas de Interatividade
Abrir a pré-visualização
Se o usuário pedir para "fazer" um vídeo, "criar" um vídeo, etc. Não renderize o vídeo por padrão, a menos que eles sejam muito explícitos. Eles querem, em vez disso, ver uma pré-visualização interativa. Assim que o projeto puder ser executado, inicie o Studio e abra a pré-visualização no navegador antes de construir ou editar a composição. Mantenha-a aberta enquanto você trabalha para que o usuário possa acompanhar o progresso e dar direcionamento.
Se você estiver usando Cursor
Execute o Studio sem --no-open para que ele abra o navegador automaticamente:
npx remotion studio
Se você estiver usando outro cliente de agente com um navegador no aplicativo
Você pode usar o comando acima para deixar o Studio abrir o navegador, ou executar:
npx remotion studio --no-open
Isso iniciará um processo de longa duração e imprimirá a URL do servidor para a pré-visualização.
Se o servidor já estiver iniciado, ele imprimirá a URL.
Se você usar --no-open, abra a URL exata impressa no navegador do aplicativo e verifique se o Studio carrega. Assim que uma composição existir, verifique se a pré-visualização do vídeo carrega. Se você não conseguir abri-la lá, execute o Studio sem --no-open.
Você pode visitar uma composição específica navegando para /[composition-id], por exemplo http://localhost:3000/MapAnimation.
:::note O Studio suporta ferramentas WebMCP. :::
Se você não tiver um navegador no aplicativo
Isso abrirá o Studio no navegador ou o reativará se já estiver aberto.
npx remotion studio
Mais opções
Para iniciar um projeto no Remotion Studio, abrir sua URL local exata ou configurar flags da CLI do Studio, carregue Remotion Studio.
Renderizar o vídeo
Renderize apenas se o usuário for muito explícito ao pedir. Ex: "Renderize o vídeo", "Exporte", "Me dê o MP4".
A pré-visualização também possui uma interface de renderização mais intuitiva, então considere usá-la em vez da linha de comando para renderizar.
npx remotion render
Para mais opções, veja Renderização.
Para renderização avançada além do simples npx remotion render, veja: Melhores Práticas de Renderização
Legendas
Ao trabalhar com legendas, carregue Legendas Remotion.
Criando um SaaS, automação ou aplicação
Use o skill de SaaS Remotion para conhecimento sobre aplicações SaaS com Remotion, como <Player>, renderização no Lambda, Vercel, Cloudflare, via Express.js, renderização no lado do cliente, ou para encontrar o template SaaS certo.
Consultando APIs e documentação do Remotion
Para encontrar e ler a documentação atual do Remotion, carregue Documentação Remotion.
Atualizando
Para atualizar o Remotion, pacotes relacionados, pacotes compatíveis da Mediabunny e Skills do Remotion Agent instalados, carregue Atualização Remotion.