welbing/codex-remotion-skill

O que codex-remotion-skill faz?

Habilidade de agente do welbing/codex-remotion-skill

Sobre

Esta habilidade permite que você crie vídeos programaticamente usando React e Remotion. Basta descrever o que deseja (por exemplo, "um vídeo de 10 segundos com texto animado e fundo gradiente") e o agente gera o código necessário e pode executá-lo.

Como usar

1. Descreva o vídeo que deseja criar.
2. O agente gerará o código Remotion (componentes React, composições e configurações de renderização).
3. Opcionalmente, execute a renderização para produzir o arquivo de vídeo final.

Pré-requisitos

• Node.js instalado.
• Um projeto Remotion configurado (ou a habilidade ajudará a criar um).

Exemplo

"Crie um vídeo de 5 segundos com um título centralizado que aparece gradualmente e muda de cor."

O agente gerará algo como:

import { Composition, useVideoConfig, AbsoluteFill, interpolate, useCurrentFrame } from 'remotion';

export const TituloAnimado: React.FC = () => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 30], [0, 1]);
  const cor = frame < 50 ? 'white' : 'springgreen';

  return (
    <AbsoluteFill style={{ backgroundColor: 'black', justifyContent: 'center', alignItems: 'center' }}>
      <h1 style={{ color: cor, opacity, fontSize: 60, fontFamily: 'Arial' }}>Meu Título Animado</h1>
    </AbsoluteFill>
  );
};

export const App: React.FC = () => {
  return (
    <>
      <Composition
        id="TituloAnimado"
        component={TituloAnimado}
        durationInFrames={150}
        fps={30}
        width={1920}
        height={1080}
      />
    </>
  );
};

Execução

Se desejar executar a renderização, o agente usará comandos como:

npx remotion render src/index.ts TituloAnimado output/video.mp4

Observações

• A habilidade é compatível com projetos Remotion 4.0+.
• Para vídeos mais complexos, forneça detalhes adicionais (duração, efeitos, áudio, etc.).