Remotion Interactivitypor remotion-dev

Remotion Interactivity Skill.

Torne um vídeo editável no Studio alterando a forma como o código React expõe camadas, tempo e controles.

Vídeo
React
Interação

Revisão da fonte · Remotion InteractivitySKILL.md

Tarefa Vídeo Produz • Camadas de vídeo nomeadas e editáveis individualmente • Componentes personalizados com controles declarados de conteúdo e aparência • Composições conectadas com suas próprias linhas do tempo editáveis Antes de começar É necessária uma versão do Remotion compatível com as APIs Interactive documentadas; @remotion/paths também é necessário para a interpolação de caminhos editável descrita.

Resumo editorial · fonte revisada em 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Remotion Interactivity: camadas de vídeo editáveis

Regras de marcação para camadas Remotion editáveis no código, schemas personalizados, valores de animação inline e registro de composições conectadas.

Fluxo baseado na fonteNão é um benchmark de execução

A abordagem de trabalho

Remotion Interactivity resolve um problema específico de autoria: um vídeo pode ser renderizado corretamente, mas ter camadas difíceis ou impossíveis de editar pelo Studio. A fonte explica quais padrões de marcação o editor consegue reconhecer, incluindo estilos inline, elementos nomeados, expressões de interpolação compatíveis e nós JSX escritos diretamente.

Sua abordagem para componentes personalizados usa um schema de interatividade para expor controles relevantes por instância. Um componente com linha do tempo própria também pode ser registrado como composição conectada. Isso diz respeito à relação entre o código-fonte e o editor de vídeo, não a adicionar botões clicáveis a um vídeo publicado.

Entregas esperadas

Camadas de vídeo nomeadas e editáveis individualmente
Componentes personalizados com controles declarados de conteúdo e aparência
Composições conectadas com suas próprias linhas do tempo editáveis

Ver o briefing de exemplo

Do briefing à revisão

01
Identifique as unidades de edição
Liste os clipes, cenas e camadas que precisam ser alterados separadamente. Dê a cada um seu próprio nó JSX escrito diretamente, em vez de gerar todos a partir de um único loop.
02
Exponha controles úteis
Adicione um InteractivitySchema para propriedades relevantes de texto, cor, mídia ou numéricas e repasse o style injetado para uma única raiz visual.
03
Mantenha o código editável
Coloque keyframes e estilos compatíveis inline, preserve a semântica de frame do chamador versus a local e registre cenas reutilizáveis usando o mesmo componente exportado.
04
Teste as edições no Studio
Selecione, mova e ajuste as camadas pretendidas no Studio e depois verifique se as alterações são gravadas no nó de código esperado.

02 Quando usar

Quando usar

É necessária uma versão do Remotion compatível com as APIs Interactive documentadas; @remotion/paths também é necessário para a interpolação de caminhos editável descrita.

Bom uso

Lower thirds reutilizáveisO texto e a cor de destaque podem virar controles explícitos da instância, enquanto os detalhes decorativos permanecem internos.
Bibliotecas de cenas editáveisComposições conectadas combinam com cenas substanciais que precisam de linha do tempo própria sem duplicar a implementação.

Limites a verificar

APIs sensíveis à versãoA fonte capturada declara a versão 4.0.534. Verifique a versão de Remotion do projeto antes de depender dessas APIs de componentes interativos.
Loops têm alvos de edição compartilhadosElementos repetidos programaticamente servem a um modelo compartilhado, não a nomes, tempos ou exclusão independentes de clipes.

Traga estas entradas

JSX atualForneça o registro das composições e os componentes cujos controles estão indisponíveis ou esmaecidos.
Requisitos de ediçãoIdentifique as propriedades e as instâncias individuais que o editor deve alterar.
Semântica da linha do tempoInforme deslocamentos, cortes, aninhamento e taxa de quadros existentes para que a refatoração não mova a animação.

03 Decisões importantes

Decisões que importam

A forma do código importa
A mesma imagem renderizada pode oferecer capacidades de edição diferentes dependendo de onde os valores do código-fonte estão.
Os controles são deliberados
Os schemas mantêm visíveis escolhas úteis por instância sem transformar cada detalhe decorativo da implementação em um controle.

04 Exemplo de briefing

Experimente um briefing focado

O briefing de exemplo abaixo não foi testado. Confira a configuração da skill antes de usá-lo.

Revise a configuração

Mantenha juntos o ponto de entrada de interatividade e as referências vinculadas, e verifique a API do Remotion instalada antes de refatorar.

Arquivo da fonte original

https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-interactivity/SKILL.md

É necessária uma versão do Remotion compatível com as APIs Interactive documentadas; @remotion/paths também é necessário para a interpolação de caminhos editável descrita.

Comece com uma entrega

Adapte o escopo, o material de origem e as restrições deste briefing antes de executar a skill.

Briefing de exemplo

Use Remotion Interactivity para refatorar esta cena de lower third para edição no Studio sem alterar o tempo renderizado. Exponha texto e cor de destaque, repasse style para uma única raiz e registre o mesmo componente exportado como composição conectada. Mantenha duas instâncias editáveis de forma independente e verifique se mover uma não altera a outra.

Inspecione o resultado

Compare a saída real com estes critérios observáveis.

Cada camada editada de forma independente tem seu próprio nó de código.
Os controles do schema aparecem e salvam as alterações no código.
A refatoração preserva deslocamentos e aparência renderizada.

OpenDesign oferece um espaço de trabalho de design local para agentes de código. Esta listagem não significa que a skill esteja incluída no pacote nem que suas ferramentas externas, credenciais e dependências de software estejam incluídas.

Baixar OpenDesign Ler o Quickstart

05 Fonte e licença

Fonte e licença

Esta página descreve a revisão fixada da fonte vinculada abaixo. O comportamento e os requisitos upstream podem mudar.

Proprietário da fonte: remotion-dev
Repositório: remotion-dev/skills
Arquivo da skill: skills/remotion-interactivity/SKILL.md
Licença: Não confirmada — revise os termos upstream antes de reutilizar.
Snapshot revisado: 2026-10-07 · 32b241b97f4e

Resumo editorial da fonte

Regras de marcação para camadas Remotion editáveis no código, schemas personalizados, valores de animação inline e registro de composições conectadas.

Resumo original de OpenDesign, com base na fonte vinculada. As estrelas do repositório são um sinal de popularidade datado, não indicam uso da skill nem uma nota de qualidade.

06 Perguntas antes de começar

Perguntas antes de começar

Por que alguns campos do Studio aparecem esmaecidos?

A fonte observa que marcações excessivamente complexas podem impedir o Studio de interpretar valores. Ela recomenda expressões inline compatíveis e schemas explícitos.

Todo objeto repetido deve ter um nó JSX separado?

Somente quando precisar de edição independente no código. Barras ou partículas de um modelo compartilhado ainda podem ser geradas programaticamente.

Extrair um componente cria uma composição conectada?

Não. O componente extraído também precisa ser registrado com dimensões, duração, taxa de quadros e valores padrão adequados.

OpenDesign

Abra espaço para a próxima iteração de design.

Mantenha seu briefing, o material de origem e o trabalho de design juntos em um espaço de trabalho local. Confira a configuração da própria skill antes de adicioná-la ao seu fluxo de trabalho.

Baixar OpenDesign Explorar skills de design