102.3K+Baixar
Ir para o guia de uso
Remotion Markuppor remotion-dev

Remotion Markup Skill.

Escreva markup React que se comporta como uma linha do tempo de vídeo, e não como uma página web com animação CSS.

  • Vídeo
  • React
  • Movimento
Baixar OpenDesignVer guia de uso
Revisão da fonte · Remotion MarkupSKILL.md
Tarefa Vídeo Produz • Markup de composição React guiado por frames • Camadas de mídia com temporização explícita e referências de assets • Uma cena que pode ser visualizada, com estruturas de efeitos e edição compatíveis Antes de começar Remotion e pacotes específicos de recursos compatíveis com a versão do projeto; as referências vinculadas determinam requisitos adicionais de mídia, efeitos, fontes ou exportação.
Resumo editorial · fonte revisada 2026-10-07 · não é um exemplo gerado

01 Funcionalidades

Remotion Markup: cenas de vídeo guiadas por frames

Um contrato de criação baseado em frames e um hub de referências para temporização, mídia, cenas editáveis e efeitos visuais em Remotion.

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

A abordagem de trabalho

Remotion Markup foca na criação de composições: temporização a partir da taxa de frames da composição, animação guiada pelo frame atual e elementos de mídia que participam de uma linha do tempo de vídeo. A fonte avisa explicitamente que transições e classes de animação comuns de CSS não substituem a renderização guiada por frames.

Também é um hub de referências para trabalhos mais especializados, de legendas e mapas a medição de texto, efeitos e áudio. Seu valor concreto é o contrato básico: manter a temporização perto do elemento criado, preservar alvos de edição independentes e usar o componente de mídia ou efeito adequado, em vez de tratar todo visual como um wrapper DOM arbitrário.

Entregas esperadas

  • Markup de composição React guiado por frames
  • Camadas de mídia com temporização explícita e referências de assets
  • Uma cena que pode ser visualizada, com estruturas de efeitos e edição compatíveis
Ver o briefing de exemplo

Do briefing à revisão

  1. 01
    Ler as configurações da composição

    Use a taxa de frames existente nos cálculos de segundos para frames e preserve a duração e as dimensões pretendidas.

  2. 02
    Criar camadas temporizadas

    Mantenha mídias e cenas editáveis de forma independente em nós JSX separados, com a temporização diretamente nos componentes que a suportam. A fonte revisada também exige um segundo de premontagem com premountFor={fps} nos componentes temporizados compatíveis, inclusive itens aninhados; confira a API instalada antes de aplicar.

  3. 03
    Adicionar movimento e efeitos

    Conduza o movimento com interpolação baseada no frame atual. Direcione efeitos especializados para a referência correspondente e um componente compatível.

  4. 04
    Inspecionar os frames do vídeo

    Revise a reprodução no Studio e frames renderizados representativos quanto a estouro de texto, prontidão da mídia e temporização.

02 Quando usar

Quando usar

Remotion e pacotes específicos de recursos compatíveis com a versão do projeto; as referências vinculadas determinam requisitos adicionais de mídia, efeitos, fontes ou exportação.

Bom caso de uso

  • Vídeos de produtoCombina filmagens, imagens, terços inferiores e áudio em uma linha do tempo repetível.
  • Movimento editável em códigoÚtil quando as camadas visuais precisam continuar compreensíveis e editáveis tanto no código-fonte quanto no Studio.

Limites a verificar

  • Não é animação de navegadorTransições de CSS e classes de animação do Tailwind são apontadas como inadequadas para o modelo de renderização documentado.
  • Dependências de referências e versõesA entrada vincula muitos documentos específicos de recursos. Os componentes e efeitos disponíveis devem ser conferidos com a versão instalada de Remotion.

Traga estes insumos

  • Briefing da composiçãoInforme a sequência de cenas, a duração, as dimensões e o ritmo desejado.
  • Assets de mídiaForneça arquivos reais de imagem, áudio, vídeo e fontes, ou URLs de origem aprovadas.
  • Necessidades de ediçãoIdentifique as camadas que precisam ser alteradas de forma independente depois da criação inicial.

03 Decisões importantes

Decisões que importam

  1. Temporização baseada na taxa de frames

    Usar o fps da composição mantém as expressões de tempo conectadas às configurações reais do vídeo.

  2. Efeitos têm alvos

    A fonte distingue componentes que aceitam efeitos diretamente de conteúdo DOM que exige um wrapper de canvas adequado.

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

Carregue todo o conjunto de referências de markup. Os comandos de adição de pacotes na fonte instalam módulos de runtime, não esta Skill em si.

Arquivo-fonte original
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-markup/SKILL.md

Remotion e pacotes específicos de recursos compatíveis com a versão do projeto; as referências vinculadas determinam requisitos adicionais de mídia, efeitos, fontes ou exportação.

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 Markup para adicionar uma sobreposição temporizada com o título do produto a esta filmagem. Preserve a taxa de frames atual e a duração da cena. Use opacidade e translação guiadas por frames, mantenha o título editável de forma independente e carregue a orientação de medição de texto antes de ajustar o subtítulo longo. Visualize os frames de abertura, estabilizado e saída.

Inspecione o resultado

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

  • Nenhum movimento necessário depende de animação ou transições de CSS.
  • As camadas temporizadas preservam seus próprios nós de origem editáveis.
  • Texto e mídia estão corretos em frames renderizados representativos.

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

Baixar OpenDesignLer o guia rápido

05 Fonte e licença

Fonte e licença

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

Responsável pela fonte
remotion-dev
Repositório
remotion-dev/skills
Arquivo da skill
skills/remotion-markup/SKILL.md
Licença
Não confirmada — revise os termos upstream antes de reutilizar.
Snapshot revisado
2026-10-07 · 32b241b97f4e
Resumo editorial da fonte
Um contrato de criação baseado em frames e um hub de referências para temporização, mídia, cenas editáveis e efeitos visuais em Remotion.

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

06 Perguntas antes de começar

Perguntas antes de começar

Posso reutilizar uma animação de CSS?

A fonte diz para refatorá-la em animação Remotion guiada por frames, para que a renderização siga a linha do tempo.

Devo envolver todo componente em Sequence?

Não. A fonte prefere props de temporização diretas onde houver suporte e reserva wrappers para temporização compartilhada relevante ou outros comportamentos.

É possível aplicar efeitos a qualquer div?

Não diretamente por meio da prop de efeitos documentada. A entrada identifica componentes compatíveis e um caminho com HtmlInCanvas para conteúdo DOM agrupado.

OpenDesign

Abra espaço para a próxima iteração do 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 OpenDesignExplorar skills de design
Arquivo-fonte original
https://github.com/remotion-dev/skills/blob/32b241b97f4e0e4ab61fe9a41b05e6e64503f8c5/skills/remotion-markup/SKILL.md