masskx/douyin-remotion-video

Vídeo Remotion para Douyin

Use esta skill quando o usuário quiser transformar material de vocabulário de inglês em um vídeo curto e impactante no estilo Douyin para aprendizado de palavras, especialmente:

• Uma raiz de palavra, prefixo, sufixo, família de palavras, par de palavras confusas ou lista de vocabulário precisa se tornar um vídeo curto.
• Um projeto Remotion de aprendizado de inglês precisa de um estilo de cartão de vocabulário de alto contrate preto/amarelo.
• A narração do CosyVoice da Alibaba Bailian/DashScope precisa impulsionar legendas e temporização.
• Cenas Remotion existentes precisam de revisão de estilo, ritmo, legenda, voz ou exportação final.

Não use esta skill para explicações em papel, explicadores de módulos de código, diagramas de arquitetura, vídeos de conhecimento geral ou projetos de módulos plug-and-play. Isso pertence a skills ou projetos separados.

Esta linha está congelada: nenhum novo episódio de raiz de palavra. Novos episódios de vocabulário usam uma das skills de template (skills/vocab-dossier, skills/vocab-game-show, skills/vocab-whiteboard; escolha com npm run plan, regras em skills/_shared/HOUSE_RULES.md). Esta skill permanece apenas para re-renderizar os episódios existentes de raiz de palavra no estilo preto/amarelo (001–059).

Entradas

Entradas típicas:

• Conteúdo de vocabulário: raiz/afixo alvo, lista de palavras, significados, fonética, ângulo de memória de exemplo, ou uma ideia breve para um episódio de aprendizado de inglês.
• Briefing do episódio: tópico, público-alvo, objetivo, plataforma, duração, gancho dos primeiros três segundos, palavras-chave.
• Assets de BGM e entradas de registro de public/bgm/, shared-assets/bgm/ e src/data/bgmRegistry.ts.
• Assets de ícones de animais locais de public/assets/icons/animals/, shared-assets/icons/animals/ e src/data/animalIconRegistry.ts.
• Arquivos de dados: src/data/words.ts, src/data/voiceScript.ts, src/data/episodeConfig.ts, src/data/subtitles.ts (opcional).
• Projeto Remotion existente usando React + TypeScript.
• Vídeo ou screenshot de referência opcional para estilo visual de vocabulário de inglês.

Saídas

Saídas esperadas:

• Um episódio Remotion de vocabulário de inglês executável.
• Arquivos de vocabulário orientados a dados.
• Segmentos de TTS em public/audio/segments/.
• Narração mesclada em public/audio/main-voice.mp3.
• Linha do tempo derivada do áudio em src/data/generatedVoiceTimeline.ts.
• MP4 final, geralmente out/root-word-template.mp4 ou um caminho de saída específico do episódio.
• Uma imagem de capa para Douyin para cada episódio, exportada com os entregáveis do episódio.
• Uma legenda para Douyin com cerca de 150 caracteres chineses com tags # embutidas para cada episódio.

Fluxo de Trabalho Principal

1. Leia o tópico de vocabulário e escreva um breve briefing do episódio.
2. Projete o gancho dos primeiros três segundos antes de escrever o corpo da lição. Escolha um hookType, texto do gancho, palavras de flash, texto da raiz, tom, momentos de SFX e uma reação animal opcional.
3. Crie ou atualize arquivos de dados, especialmente voiceScript.ts e dados de vocabulário como words.ts.
4. Configure episodeConfig.ts, incluindo hook, bgmId, bgmVolume, voiceVolume e sfxVolume.
5. Escolha um BGM adequado de bgmRegistry, configure o bgmVolume padrão para 0.32 e planeje a verificação de mixagem.
6. Escolha 2-4 momentos de ícones de animais de animalIconRegistry apenas quando eles apoiarem os batimentos de gancho, equívoco, revelação da raiz ou resumo.
7. Construa cenas Remotion a partir dos dados. Mantenha conteúdo, temporização, configurações de mixagem de áudio, momentos de ícones e estado visual separados.
8. Gere a narração TTS com DashScope CosyVoice. Nunca codifique a chave de API.
9. Use durações de ffprobe para gerar generatedVoiceTimeline.ts.
10. Conduza legendas, cena ativa, palavra-chave ativa, palavras de flash do gancho, texto de conflito e zoom de impacto a partir de generatedVoiceTimeline.
11. Renderize quadros estáticos em batimentos chave, especialmente quadros entre 0-3 segundos e quaisquer batimentos de gancho estendidos após o TTS real, em seguida, inspecione quadros em branco, sobreposição e contraste ruim.
12. Gere uma capa para Douyin para o episódio. Todo episódio deve vir com uma imagem de capa; sem exceções.
13. Gere uma legenda para Douyin com cerca de 150 caracteres chineses com tags # embutidas e exporte-a com os arquivos de lançamento.
14. Renderize o MP4 final e verifique interrupção do gancho, sincronização áudio/vídeo, ducking do BGM, volume do BGM, posicionamento dos ícones de animais, fade-out final, legibilidade da capa e qualidade da legenda.

Arquivos para Carregar Conforme Necessário

• Estilo visual: references/visual_rules.md
• Gancho dos primeiros três segundos: references/hook_rules.md
• Temporização e ritmo: references/rhythm_rules.md
• Narração DashScope: references/voice_rules.md
• BGM e mixagem de áudio: references/audio_rules.md
• Uso de ícones de animais: references/icon_rules.md
• Design e sincronização de legendas: references/subtitle_rules.md
• Lista de verificação de qualidade de exportação: references/quality_rules.md
• Procedimento de ponta a ponta: workflow.md
• Exemplo atual: examples/ject_episode_example.md

Padrão de Projeto Preferido

Mantenha estes arquivos orientados a dados:

• src/data/voiceScript.ts: fonte canônica de narração e legenda para o episódio de vocabulário.
• src/data/generatedVoiceTimeline.ts: gerado a partir das durações reais de áudio.
• src/data/bgmRegistry.ts: registro local de BGM gerado a partir de public/bgm/.
• src/data/animalIconRegistry.ts: registro local de ícones de animais gerado a partir de public/assets/icons/animals/.
• src/data/episodeConfig.ts: hook, bgmId, bgmVolume, voiceVolume e sfxVolume por episódio.
• src/scenes/HookScene.tsx: o sistema de interrupção do Douyin com cortes secos, flashes de palavras, texto de conflito, recompensa, SFX local opcional e no máximo uma reação animal. Ele deve usar a temporização derivada de generatedVoiceTimeline após o TTS para que a narração estendida do gancho não deixe quadros em branco.
• src/timeline.ts: deriva a temporização das cenas a partir de generatedVoiceTimeline.
• src/components/BackgroundMusic.tsx: loop do BGM, faz ducking sob a voz e fade out no final.
• src/components/AnimatedAnimalIcon.tsx: reações curtas e locais de ícones de animais para batimentos emocionais selecionados.
• src/CoverThumbnail.tsx: modelo canônico unificado de capa para Douyin. Deve manter o visual preto/amarelo, mostrar a marca do criador 小猪盖被 e usar ícones de animais locais quando apropriado.
• scripts/generate-release-copy.ts: gerador canônico de cópia de lançamento para legenda do episódio e notas de publicação.
• src/utils/audioMixing.ts: helpers compartilhados de volume de BGM, ducking e fade.
• src/utils/motion.ts: helpers compartilhados de movimento como slamIn, punchZoom, shake, flashOpacity.
• public/audio/main-voice.mp3: único artefato gerado que o Remotion deve reproduzir com <Audio>.
• public/bgm/: BGM local usado pelo Remotion; não carregue BGM da rede durante a renderização.
• public/assets/icons/animals/: ícones de animais locais usados pelo Remotion; não carregue ícones de URLs remotas durante a renderização.

Regras de Segurança

• Nunca escreva chaves de API em arquivos fonte, templates, exemplos, logs ou docs.
• Use DASHSCOPE_API_KEY do ambiente.
• Trate áudio gerado e linhas do tempo como artefatos substituíveis.
• Não confie em marcas de segundo fixas depois que uma linha do tempo de voz gerada existir.
• Todo episódio deve exportar uma imagem de capa para Douyin junto com os entregáveis de vídeo.
• Todo episódio deve exportar uma legenda para Douyin junto com os entregáveis de vídeo.
• A capa deve manter um estilo de marca unificado: fundo preto, ênfase amarela, nome do criador 小猪盖被 e um ângulo de memória legível baseado na raiz.
• A legenda deve ter cerca de 150 caracteres chineses, legível como um único post do Douyin, e incluir tags no estilo #英语学习.
• Não comece um episódio com uma página de título normal. Os primeiros 0,5-1s devem interromper a rolagem com texto grande ou um impacto visual forte.
• Não deixe que os visuais do gancho terminem em uma marca fixa de 3 segundos após o TTS. Se a linha do tempo de voz real estender os segmentos de abertura, mantenha as palavras de flash e os visuais de conflito correspondentes na tela até que a raiz ou o padrão comece a ser revelado.
• Os flashes de palavras em órbita/bolha do gancho devem ser ritmados pelo segmento de voz flash-words real. Não use um slot fixo de 8-10 quadros para cada palavra. Distribua o tempo de revelação da bolha ao longo do segmento falado para que cada palavra apareça à medida que é ouvida, com as palavras anteriores permanecendo visíveis.
• Mantenha a rotação da órbita contida. A abertura estilo 046 deve parecer que as palavras estão sendo coletadas em torno de uma família, não chicoteadas pela tela. Um quarto de volta ao longo do segmento geralmente é suficiente.
• As cenas de grade/estrutura devem usar um layout simétrico dinâmico baseado no número real de palavras. Não codifique um layout de 8 slots quando o episódio tiver 6 ou 7 palavras; centralize as linhas incompletas e verifique se nenhuma palavra está faltando.
• As linhas de conexão da grade devem conectar-se das bordas da raiz/cartão e permanecer atrás dos módulos. Não desenhe linhas através do texto da palavra ou sobre o conteúdo do cartão.
• Se a instruction do DashScope falhar para uma voz do sistema, tente novamente sem instruction preservando rate, voice, model e a estrutura do script.
• Não carregue BGM de URLs remotas durante a pré-visualização ou renderização do Remotion.
• Não carregue ícones de animais de URLs remotas durante a pré-visualização ou renderização do Remotion.
• Se o licenciamento do BGM não estiver claro, adicione license_check_required ao notes.md do episódio.
• Use os padrões de áudio atuais, a menos que haja um motivo documentado para alterá-los: bgmVolume: 0.32, fator de ducking de voz 0.65 e limite de segurança do BGM 0.32.

Comandos Úteis

npm run voice
npm run preview -- --port=3000
npm run render
npx tsc --noEmit

npm run render deve ser tratado como o comando de lançamento padrão para cada episódio porque exporta tanto o vídeo final quanto a imagem de capa do Douyin. npm run copy pode ser usado para preencher ou atualizar apenas a legenda do Douyin e as notas de publicação para o episódio ativo.

Para verificações de quadros-chave:

npx remotion still src/index.ts RootWordTemplate out/check.png --frame=150 --scale=0.5