KoeYe/awesome-demovideo-skill

remotion-demo-video

Um fluxo de trabalho otimizado para criar vídeos promocionais / demonstrações / trailers com Remotion 4.x. Codifica o layout do projeto, primitivas de animação, comandos de renderização e as armadilhas específicas que custam tempo real para redescobrir.

Quando usar esta skill

Acione sempre que o usuário quiser criar, editar, renderizar ou depurar um vídeo Remotion. Especialmente:

• Iniciar um novo projeto Remotion para uma demonstração de produto / artigo / repositório
• Adicionar uma nova cena a um projeto Remotion existente
• Costurar capturas de tela pré-gravadas em um vídeo polido com sobreposições, títulos, transições
• Renderizar — cena única, linha do tempo completa, sobreposições transparentes (alfa), sequências PNG
• Depurar estranhezas específicas do Remotion (incompatibilidade de composição-id, padrões dessincronizados, useCurrentFrame retornando valores inesperados dentro de <Sequence>, EPERM no Windows durante a limpeza do ffmpeg, etc.)

Como pensar sobre o fluxo de trabalho

Um vídeo Remotion polido não é "uma linha do tempo gigante que você renderiza como um MP4". É um conjunto de cenas pequenas e renderizáveis individualmente — cada uma renderizada como seu próprio clipe e montada em um editor downstream (DaVinci Resolve, Premiere, Final Cut) onde você adiciona música, narração e transições entre cenas.

Esta é a maior percepção do lançamento da promoção SimWorld, e a skill deve direcionar o usuário para este fluxo de trabalho por padrão. Tentar fazer tudo dentro do Remotion — ajustes finos de tempo, mixagem de áudio, dissoluções — é doloroso e lento; fazê-lo em um editor é trivial.

Use cada ferramenta para o que ela é boa

• Remotion é ótimo para: cenas programáticas, repetíveis e paramétricas — títulos animados, gráficos orientados a dados, maquetes de UI, qualquer coisa que você faria com quadros-chave no After Effects. A lógica da cena vive no código; reconstruir "o mesmo título com 30 nomes de produtos diferentes" é uma mudança de prop.
• Editores downstream são ótimos para: tempo, áudio, dissoluções, correção de cor, "tornar esta cena 1,2 segundos mais longa". Todas as coisas que são imediatas em um editor e uma edição de código e re-renderização no Remotion.

O loop

1. Decida o roteiro. Esboço batida por batida com segundos-alvo para cada batida. Total normalmente de 30 a 90s.
2. Configure o shell do projeto uma vez. theme.ts (paleta, fontes, fps, dimensões), Root.tsx (registro de composição), componentes compartilhados (Reveal, ProgressBar, easings).
3. Construa as cenas uma de cada vez. Cada cena é um componente React <AbsoluteFill> autossuficiente, projetado em relação ao frame 0, com seu próprio <Composition> independente para que você possa renderizá-la sozinha. Itere no Studio (npm run dev) com o painel de props; renderize para MP4 (npm run render:<scene>) quando gostar.
4. Renderize cada cena finalizada como seu próprio clipe — esta é a entrega real, não o MP4 da linha do tempo completa. Clipes por cena são arrastados para a linha do tempo de qualquer editor. Use --codec=prores --pixel-format=yuva444p10le --prores-profile=4444 para clipes que você deseja com alfa (terços inferiores, logotipos para compor sobre capturas de tela).
5. Opcionalmente, conecte as cenas em Main.tsx com blocos <Sequence> lendo de uma constante TIMELINE em theme.ts. Isso fornece uma prévia da renderização da linha do tempo completa (npm run render) para verificar a sanidade do fluxo geral — mas trate-a como uma prévia, não como a matriz.
6. Monte no DaVinci / Premiere / Final Cut. Solte os clipes por cena em uma faixa em ordem, ajuste as alças de corte para o tempo exato, adicione música / narração / design de som, aplique transições entre cenas (dissoluções de 1 frame geralmente parecem certas para esta estética), corrija a cor, exporte.

Quando sugerir a renderização Remotion completa

A renderização da linha do tempo completa é a saída correta APENAS quando:

• O usuário não tem um editor downstream e precisa de uma única entrega hoje.
• O vídeo é totalmente silencioso (sem música ou narração).
• Não há transição entre cenas mais complexa do que cortes secos (e mesmo estes são mais fáceis de ajustar no código com a abordagem cena por cena).

Caso contrário, o padrão é recomendar renderizações por cena + montagem no editor.

Esta skill inclui um scaffold funcional em scaffold/ — copie-o como ponto de partida para um novo projeto, depois leia as referências abaixo conforme necessário.

O loop real ponta a ponta (quando a entrada é um artigo / especificação / repositório)

Este é o fluxo de trabalho para o qual esta skill foi realmente projetada. O usuário geralmente não chega dizendo "Quero um título animado que diga X". Eles chegam com um PDF de artigo, uma especificação de projeto ou um repositório existente, e a pergunta é "transforme isso em um vídeo de 60 segundos". A skill existe para tornar esse loop rápido e tratável.

1. Material de origem        →  PDF de artigo / especificação / repositório existente / README
        ↓
2. Claude analisa           →  extrai batidas narrativas; identifica o que cada
                              batida precisa MOSTRAR (tela de UI, gravação de
                              experimento, gráfico, POV do agente, etc.)
        ↓
3. Claude cria scaffold     →  código da cena + <VideoPlaceholder slot="..." />
   com placeholders            em cada região visual, mais um ASSETS.md
                              listando cada clipe que o usuário precisa gravar
                              (nome do slot, duração, o que deve mostrar)
        ↓
4. Usuário grava filmagem   →  coloca mp4s em public/clips/<slot>.mp4
                              correspondendo aos nomes dos slots do scaffold
        ↓
5. Claude substitui        →  substitui <VideoPlaceholder> por
   placeholders por clipes     <OffthreadVideo src={staticFile("clips/<slot>.mp4")}>
        ↓
6. Itere cena por cena      →  npm run render:<scene>, assista, ajuste texto /
                              tempo / animação, re-renderize. Alterações no código
                              são rápidas; se a filmagem precisar ser regravada,
                              essa é a parte mais lenta do loop.
        ↓
7. Monte no editor          →  MP4s por cena no DaVinci / Premiere / FCP,
                              adicione música + narração + transições entre
                              cenas, exporte.

Etapa 2 em detalhes — analisando o material de origem

Quando o usuário entrega um artigo / especificação, faça isso ANTES de escrever qualquer código:

1. Extraia a narrativa. Qual é o arco de 3 a 5 batidas? ("Problema → nosso método → resultados-chave → impacto" é um modelo inicial; varie para o artigo real.) A narrativa orienta a lista de cenas.
2. Para cada batida, decida o que MOSTRAR. Texto animado sozinho é chato. Cada batida deve ter um visual concreto — uma tela de UI, uma gravação de experimento, um gráfico, uma comparação, um diagrama de sistema. Combine visuais com afirmações: se o artigo afirma "o método X é 3× mais rápido", mostre a comparação lado a lado.
3. Distinga o que o Remotion gera vs. o que o usuário precisa gravar. Remotion é ótimo para: títulos, transições, gráficos, maquetes de UI, layouts, diagramas animados. Remotion NÃO PODE gerar: gravações de tela reais do produto do usuário, filmagens de experimentos, POV do agente, nada de fora do projeto. Liste esses como filmagens fornecidas pelo usuário.
4. Esboce a linha do tempo antes de criar o scaffold. Batida por batida com durações-alvo somando 30 a 90s. Atualize TIMELINE em theme.ts para corresponder. A duração total deve ser definida antes que as cenas sejam construídas para que cada cena saiba seu orçamento.

Etapa 3 em detalhes — criando scaffold com placeholders

A convenção de handoff chave da skill: nomes de slots. Cada clipe que o usuário precisa gravar recebe uma string slot estável. O placeholder e o clipe real compartilham esse nome de slot.

// Durante o scaffold:
<VideoPlaceholder
  slot="agent-loop"
  description="Gravação contínua do agente: anda, falha, tenta novamente com política atualizada."
  accent={COLORS.blue}
/>

// Após o usuário gravar public/clips/agent-loop.mp4, troque para:
<OffthreadVideo
  src={staticFile("clips/agent-loop.mp4")}
  muted
  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
/>

Sempre escreva um ASSETS.md na raiz do scaffold (o scaffold inclui um modelo). Ele lista cada slot que o usuário precisa preencher, com: nome do slot (= nome do arquivo), o que deve mostrar, duração alvo, recomendação de proporção de aspecto e quaisquer notas de tempo (por exemplo, "evento de falha por volta da marca de 7s"). Esta é a única fonte da verdade para a tarefa de gravação do usuário.

Etapas 4–5 em detalhes — a transferência de ativos

O usuário retorna com arquivos colocados em public/clips/. Três coisas para verificar:

1. Nomes de arquivos correspondem exatamente aos nomes dos slots. agent-loop.mp4, não agent_loop.mp4 ou AgentLoop.mp4.
2. A duração é pelo menos a duração da cena (ou use <Loop> se for mais curta e destinada a repetir).
3. A proporção de aspecto é sensata — para cenas em tela cheia, corresponda à composição de 1920×1080. Para cartões em uma grade 2×2, 4:3 ou 16:9 funcionam; apenas seja consistente.

Em seguida, substitua mecanicamente cada <VideoPlaceholder> por <OffthreadVideo>. Essa é uma troca de uma linha por slot; nenhuma alteração na lógica de animação. Se a gravação do usuário for sensível ao tempo (por exemplo, "evento de falha aos 7s"), exponha-a como uma prop da cena para que as sobreposições dependentes de tempo (carimbo FAIL, número de recompensa) possam ser ajustadas sem regravação.

Por que este loop é importante para a skill

O trabalho da skill não é "escrever código Remotion sob demanda" — é tornar o loop de material de origem para vídeo enviado tratável. O padrão de placeholder é o que permite que Claude crie a estrutura de um vídeo inteiro em uma passagem e, em seguida, devolva um ASSETS.md para que o usuário saiba exatamente o que gravar. Sem ele, o loop para — o usuário grava as coisas erradas, ou o scaffold espera pela filmagem, ou a estrutura do código precisa ser readaptada posteriormente.

Quando um usuário aparece com material de origem, o movimento inicial certo é geralmente:

"Deixe-me ler o artigo / especificação primeiro. Em seguida, proporei um esboço cena por cena com durações-alvo, uma lista de clipes que você precisará gravar e criarei o scaffold do código com placeholders para que você possa começar a gravar enquanto eu continuo construindo cenas."

Início rápido para um novo projeto

# 1. Copie o scaffold
cp -r <caminho-da-skill>/scaffold ./meu-demo
cd meu-demo
npm install

# 2. Abra o Remotion Studio para edição ao vivo
npm run dev    # abre http://localhost:3000

# 3. Renderize uma única cena enquanto itera
npm run render:opening

# 4. Renderize a linha do tempo completa quando estiver pronto
npm run render

O scaffold inclui uma cena funcional (OpeningTitle), o tema cream-warm, Reveal + easings, uma ProgressBar, uma linha do tempo Main de espaço reservado e um package.json com scripts de renderização pré-configurados.

Layout do projeto (a forma que funciona)

meu-demo/
├── package.json                      # scripts de renderização, hooks de pré-renderização
├── remotion.config.ts                # padrões de codec / pixel format
├── tsconfig.json
├── public/
│   ├── assets/                       # logotipos, imagens estáticas (staticFile("assets/..."))
│   └── clips/                        # capturas de tela / fontes de vídeo
├── scripts/
│   └── sync-clips.mjs                # normaliza clipes antes de cada renderização
└── src/
    ├── index.ts                      # registerRoot(Root)
    ├── Root.tsx                      # <Composition> registry — id, schema, defaultProps
    ├── theme.ts                      # COLORS, FONT_STACK, RADIUS, SHADOWS, TIMELINE
    ├── fonts.ts                      # @remotion/google-fonts + local @font-face
    ├── Main.tsx                      # compositor da linha do tempo completa (blocos <Sequence>)
    ├── components/
    │   ├── Reveal.tsx                # wrapper fade + levantar (delay/duration/rise)
    │   ├── Easing.ts                 # EASE_OUT, EASE_IN_OUT (bezier)
    │   ├── ProgressBar.tsx           # indicador de estágio de 4 estágios fixado na parte inferior
    │   └── VideoPlaceholder.tsx      # cartão cinza com rótulo de slot, troque para OffthreadVideo depois
    └── scenes/
        ├── OpeningTitle.tsx          # uma cena por arquivo, cada um é um <AbsoluteFill>
        ├── ProductReveal.tsx
        ├── AgentLoop.tsx
        └── ...

Por que esta forma: as cenas são independentes (fácil de renderizar sozinhas e iterar), a linguagem visual compartilhada vive em theme.ts + components/ para que a aparência permaneça consistente, e Root.tsx é a única fonte da verdade para o que é renderizável.

O padrão de composição (leia isto com atenção)

Cada cena exporta três coisas:

1. Um schema zod — define a interface do painel de props no Remotion Studio (sliders, dropdowns).
2. Uma constante *_DEFAULTS — os valores consumidos por Main.tsx quando esta cena está incorporada na linha do tempo completa.
3. O próprio componente React, tipado como React.FC<Props>.

// src/scenes/ProductReveal.tsx
import { z } from "zod";

export const productRevealSchema = z.object({
  titleSize:     z.number().min(40).max(280),
  subtitleSize:  z.number().min(14).max(80),
  outerPaddingV: z.number().min(0).max(200),
});
export type ProductRevealProps = z.infer<typeof productRevealSchema>;

export const PRODUCT_REVEAL_DEFAULTS: ProductRevealProps = {
  titleSize: 168,
  subtitleSize: 64,
  outerPaddingV: 80,
};

export const ProductReveal: React.FC<ProductRevealProps> = (p) => { ... };

Em seguida, em Root.tsx, registre-o com uma cópia inline dos padrões:

<Composition
  id="ProductReveal"
  component={ProductReveal}
  durationInFrames={120}
  fps={30}
  width={1920}
  height={1080}
  schema={productRevealSchema}
  defaultProps={{
    // ⚠ CÓPIA INLINE de PRODUCT_REVEAL_DEFAULTS — o botão
    // "Salvar props padrão" do Remotion Studio grava de volta
    // neste objeto via manipulação AST. Mantenha em sincronia
    // com a constante exportada acima.
    titleSize: 168,
    subtitleSize: 64,
    outerPaddingV: 80,
  }}
/>

Por que a duplicação: O botão "Salvar props padrão" do Remotion Studio edita o literal defaultProps={…} em Root.tsx via manipulação AST. Ele não pode reescrever uma constante importada. Portanto, a cópia inline é a que o Studio sofre mutação, e o *_DEFAULTS exportado é o que Main.tsx lê. Quando o Studio escrever novos valores, copie-os para a constante exportada para que a renderização da linha do tempo completa também os use. Esta é a armadilha #4 em references/pitfalls.md.

Primitivas de animação (o pequeno conjunto que você realmente precisa)

Toda animação no Remotion é useCurrentFrame() + interpolate(). Não há relógio interno, nenhum "play" — cada frame é uma função pura do frame.

**O cânon

[...truncado para tradução]