YYL Remotion Video

O que YYL Remotion Video faz?

Transforme um artigo, script, notas ou um esboço claro em um projeto de vídeo Remotion. Esta skill é focada em vídeo: não há player web controlado por clique, nem diretório presentation/ na web, nem síntese TTS dentro deste fluxo de trabalho.

Saída Principal

my-video/
├── article.md
├── script.md
├── outline.md
├── notes.md
└── remotion/
    ├── src/Root.tsx
    ├── src/Composition.tsx
    ├── src/chapters/<NN>-<id>/
    │   ├── <Chapter>.tsx
    │   ├── narrations.ts
    │   └── timing.ts
    ├── public/assets/
    ├── preview-stills/
    └── out/

Recursos da skill empacotados:

themes/       # sistemas de cor / tipografia
templates/    # pontos de partida TSX do Remotion copiáveis
references/   # orientações sobre produção, tema e template

Intensidade de Execução

Decida antes de escrever os arquivos:

Intensidade	Use Quando	Comportamento
Rápido	<= 450 caracteres chineses, <= 60s, teste de tema, esboço	1 capítulo, poucos beats, implementação direta
Padrão	1-4 min, explicador publicável normal	script + esboço, primeiro capítulo âncora, depois continua
Rigoroso	> 4 min, conteúdo de marca/comercial/alto risco	planejamento mais completo, mais verificações de stills, revisão de capítulo mais lenta

Relate em uma linha:

I will use <Quick/Standard/Strict> because <length / risk / target>.

Fluxo de Trabalho

1. Porta de Entrada

   • Prossiga somente se o usuário fornecer texto fonte, um script, notas ou um esboço claro.
   • Se ele fornecer apenas um tópico, peça material. Não invente um vídeo completo.

2. Arquivos de Conteúdo

   • Salve o material fonte em article.md quando fornecido.
   • Salve o texto falado final em script.md.
   • Salve o plano de desenvolvimento em outline.md.
   • outline.md planeja capítulos, beats, conteúdo da tela, pool de informação, assets.
   • outline.md não prescreve implementação exata de animação.

3. Escolha do Tema

   • Use apenas temas empacotados nesta skill: themes/command-film, themes/studio-white, themes/research-desk.
   • Não reutilize ou importe temas de web-video-presentation.

4. Escolha do Template

   • Se o usuário solicitar um layout ou mecanismo de animação conhecido, leia references/TEMPLATES.md.
   • Use templates/luxury-perspective-gallery para portfólio escuro de luxo, carrossel horizontal com perspectiva 3D ou solicitações de galeria de agência premium.

5. Projeto Remotion

   • Reutilize remotion/ existente se presente.
   • Crie apenas se estiver faltando:

     npx create-video@latest --yes --blank --no-tailwind remotion
     

   • Se um template selecionado exigir Tailwind, crie o projeto com suporte a Tailwind ou adicione Tailwind antes de copiar os arquivos do template.
   • Instale dependências apenas se remotion/node_modules estiver ausente ou comandos do Remotion falharem por falta de dependências.

6. Tempo

   • Não sintetize áudio.
   • Estime durações a partir da narração e complexidade visual.
   • Padrão: fps = 30, width = 1920, height = 1080.
   • Armazene o texto em narrations.ts; armazene durationFrames estimado em timing.ts.

7. Implementação

   • Leia references/REMOTION-CRAFT.md antes de cada capítulo.
   • Anime com useCurrentFrame(), interpolate(), Easing e Sequence.
   • Não use CSS transition / CSS animation / GSAP para animação principal.
   • Tailwind pode estilizar layout estático, mas utilitários de animação do Tailwind não são permitidos.

8. Verificação

   • Execute:

     cd remotion
     npm run lint
     

   • Renderize pelo menos um still por capítulo, ou 2-4 stills para um vídeo curto completo:

     npx remotion still <composition-id> --frame=<frame> --scale=0.5 --output=preview-stills/<name>.png
     

   • Renderize mp4 quando os stills estiverem corretos:

     npx remotion render <composition-id> out/<name>.mp4
     

9. Notas

   • Atualize notes.md com fps, resolução, quadros totais, duração estimada, stills verificados, caminho do mp4 renderizado, e que áudio/legendas são pós-produção.

Seleção de Tema

Tema	Melhor Para	Sensação
command-film	agentes, terminal, automação, ferramentas de desenvolvedor	sala de comando cinematográfica escura
studio-white	demonstrações SaaS, lançamentos, cursos, tutoriais de produto	estúdio de produto branco e limpo
research-desk	ensaios, relatórios, artigos, análise de negócios	mesa analítica e calma

Para notas completas do tema, leia references/THEMES.md.

Seleção de Template

Template	Melhor Para	Sensação
luxury-perspective-gallery	portfólio premium, showcase de produto, carrossel horizontal 3D	slider escuro ciber-mínimo de agência
charity-doodle-poster	cartazes de ONGs, heróis animais desenhados à mão, efeitos editoriais de linha em ebulição	pôster retro de parada de movimento com pincel e tinta

Para notas completas do template, leia references/TEMPLATES.md.

Regras do Remotion

• Use Composition em Root.tsx.
• Use Sequence para posicionar beats na linha do tempo.
• Use useCurrentFrame() + interpolate() para movimento.
• Coloque assets estáticos em remotion/public/assets/; referencie com staticFile().
• Verificações de still são obrigatórias antes da renderização final.
• O mp4 final é silencioso, a menos que o usuário forneça áudio posteriormente na pós-produção.