masskx/douyin-remotion-video

Vídeo Remotion para Douyin (Vocabulario Inglés)

Usa este skill cuando el usuario quiera convertir material de vocabulario inglés en un vídeo corto y contundente al estilo Douyin para aprender palabras, especialmente:

• Una raíz, prefijo, sufijo, familia de palabras, par de palabras confusas o lista de vocabulario que necesita convertirse en un vídeo corto.
• Un proyecto Remotion de aprendizaje de inglés que requiera un estilo de tarjeta de vocabulario de alto contraste negro/amarillo.
• La locución de Alibaba Bailian/DashScope CosyVoice necesita impulsar los subtítulos y la sincronización.
• Escenas Remotion existentes que necesiten revisión de estilo, ritmo, subtítulos, voz o exportación final.

No uses este skill para explicaciones en papel, módulos de explicación de código, diagramas de arquitectura, vídeos de conocimiento general o proyectos de módulos plug-and-play. Esos pertenecen a skills o proyectos separados.

Esta línea está congelada: no hay nuevos episodios de raíces. Los nuevos episodios de vocabulario usan uno de los skills de plantilla (skills/vocab-dossier, skills/vocab-game-show, skills/vocab-whiteboard; elige con npm run plan, reglas en skills/_shared/HOUSE_RULES.md). Este skill permanece solo para re-renderizar los episodios existentes de raíces en negro/amarillo (001–059).

Entradas

Entradas típicas:

• Contenido de vocabulario: raíz/afijo objetivo, lista de palabras, significados, fonética, ángulo de memoria de ejemplo, o una idea breve para un episodio de aprendizaje de inglés.
• Resumen del episodio: tema, audiencia, objetivo, plataforma, duración, gancho de los primeros tres segundos, palabras clave.
• Archivos de BGM y entradas de registro de public/bgm/, shared-assets/bgm/ y src/data/bgmRegistry.ts.
• Archivos locales de iconos de animales de public/assets/icons/animals/, shared-assets/icons/animals/ y src/data/animalIconRegistry.ts.
• Archivos de datos: src/data/words.ts, src/data/voiceScript.ts, src/data/episodeConfig.ts, opcional src/data/subtitles.ts.
• Proyecto Remotion existente usando React + TypeScript.
• Vídeo de referencia opcional o captura de pantalla para el estilo visual del vocabulario inglés.

Salidas

Salidas esperadas:

• Un episodio Remotion ejecutable de vocabulario inglés.
• Archivos de vocabulario basados en datos.
• Segmentos TTS en public/audio/segments/.
• Locución combinada en public/audio/main-voice.mp3.
• Línea de tiempo derivada del audio en src/data/generatedVoiceTimeline.ts.
• MP4 final, normalmente out/root-word-template.mp4 o una ruta de salida específica del episodio.
• Una imagen de portada para Douyin para cada episodio, exportada con los archivos del episodio.
• Un pie de foto para Douyin de alrededor de 150 caracteres chinos con etiquetas # integradas para cada episodio.

Flujo de Trabajo Principal

1. Lee el tema de vocabulario y escribe un breve resumen del episodio.
2. Diseña el gancho de los primeros tres segundos antes de escribir el cuerpo de la lección. Elige un hookType, texto del gancho, palabras de destello, texto de raíz, tono, momentos de SFX y una reacción de animal opcional.
3. Crea o actualiza los archivos de datos, especialmente voiceScript.ts y los datos de vocabulario como words.ts.
4. Configura episodeConfig.ts, incluyendo hook, bgmId, bgmVolume, voiceVolume y sfxVolume.
5. Elige un BGM adecuado de bgmRegistry, configura el bgmVolume predeterminado en 0.32 y planifica la comprobación de mezcla.
6. Elige 2-4 momentos de iconos de animales de animalIconRegistry solo cuando apoyen los tiempos de gancho, concepto erróneo, revelación de raíz o resumen.
7. Construye las escenas Remotion a partir de los datos. Mantén separados el contenido, la sincronización, la configuración de mezcla de audio, los momentos de iconos y el estado visual.
8. Genera la locución TTS con DashScope CosyVoice. Nunca codifiques la clave API.
9. Usa las duraciones de ffprobe para generar generatedVoiceTimeline.ts.
10. Impulsa los subtítulos, la escena activa, la palabra clave activa, las palabras de destello del gancho, el texto de conflicto y el zoom de impacto desde generatedVoiceTimeline.
11. Renderiza fotogramas fijos en los tiempos clave, especialmente fotogramas dentro de los 0-3 segundos y cualquier tiempo de gancho extendido después del TTS real, luego inspecciona en busca de fotogramas en blanco, superposición y contraste deficiente.
12. Genera una portada para Douyin para el episodio. Cada episodio debe incluir una imagen de portada; sin excepciones.
13. Genera un pie de foto para Douyin de alrededor de 150 caracteres chinos con etiquetas # integradas y expórtalo con los archivos de lanzamiento.
14. Renderiza el MP4 final y verifica la interrupción del gancho, la sincronización de audio/vídeo, la atenuación del BGM, el volumen del BGM, la colocación del icono de animal, el fundido de salida final, la legibilidad de la portada y la calidad del pie de foto.

Archivos a Cargar Según Sea Necesario

• Estilo visual: references/visual_rules.md
• Gancho de primeros tres segundos: references/hook_rules.md
• Sincronización y ritmo: references/rhythm_rules.md
• Locución DashScope: references/voice_rules.md
• BGM y mezcla de audio: references/audio_rules.md
• Uso de iconos de animales: references/icon_rules.md
• Diseño y sincronización de subtítulos: references/subtitle_rules.md
• Lista de verificación de calidad de exportación: references/quality_rules.md
• Procedimiento de extremo a extremo: workflow.md
• Ejemplo actual: examples/ject_episode_example.md

Patrón de Proyecto Preferido

Mantén estos archivos basados en datos:

• src/data/voiceScript.ts: fuente canónica de narración y subtítulos para el episodio de vocabulario.
• src/data/generatedVoiceTimeline.ts: generado a partir de las duraciones reales de audio.
• src/data/bgmRegistry.ts: registro de BGM local generado desde public/bgm/.
• src/data/animalIconRegistry.ts: registro de iconos de animales local generado desde public/assets/icons/animals/.
• src/data/episodeConfig.ts: hook, bgmId, bgmVolume, voiceVolume y sfxVolume por episodio.
• src/scenes/HookScene.tsx: el sistema de interrupción de Douyin con cortes bruscos, destellos de palabras, texto de conflicto, recompensa, SFX local opcional y como máximo una reacción de animal. Debe usar la sincronización derivada de generatedVoiceTimeline después del TTS para que la narración del gancho extendido no deje fotogramas en blanco.
• src/timeline.ts: deriva la sincronización de las escenas desde generatedVoiceTimeline.
• src/components/BackgroundMusic.tsx: repite el BGM, lo atenúa debajo de la voz y se desvanece al final.
• src/components/AnimatedAnimalIcon.tsx: reacciones cortas de iconos de animales locales para tiempos emocionales seleccionados.
• src/CoverThumbnail.tsx: plantilla canónica unificada de portada para Douyin. Debe mantener el aspecto negro/amarillo, mostrar la marca del creador 小猪盖被 y usar iconos de animales locales cuando sea apropiado.
• scripts/generate-release-copy.ts: generador canónico de texto de publicación para el pie de foto del episodio y las notas de publicación.
• src/utils/audioMixing.ts: ayudantes compartidos de volumen de BGM, atenuación y fundido.
• src/utils/motion.ts: ayudantes de movimiento compartidos como slamIn, punchZoom, shake, flashOpacity.
• public/audio/main-voice.mp3: único artefacto generado que Remotion debe reproducir con <Audio>.
• public/bgm/: BGM local usado por Remotion; no cargues BGM desde la red durante el renderizado.
• public/assets/icons/animals/: iconos de animales locales usados por Remotion; no cargues iconos desde URLs remotas durante el renderizado.

Reglas de Seguridad

• Nunca escribas claves API en archivos fuente, plantillas, ejemplos, registros o documentación.
• Usa DASHSCOPE_API_KEY del entorno.
• Trata el audio generado y las líneas de tiempo como artefactos reemplazables.
• No confíes en marcas de tiempo fijas una vez que exista una línea de tiempo de voz generada.
• Cada episodio debe exportar una imagen de portada para Douyin junto con los archivos de vídeo.
• Cada episodio debe exportar un pie de foto para Douyin junto con los archivos de vídeo.
• La portada debe mantener un estilo de marca unificado: fondo negro, énfasis amarillo, nombre del creador 小猪盖被 y un ángulo de memoria legible basado en raíces.
• El pie de foto debe tener alrededor de 150 caracteres chinos, legible como un solo cuerpo de publicación de Douyin, e incluir etiquetas de estilo #英语学习.
• No comiences un episodio con una página de título normal. Los primeros 0.5-1s deben interrumpir el desplazamiento con texto grande o un impacto visual fuerte.
• No dejes que los visuales del gancho terminen en una marca de tiempo fija de 3 segundos después del TTS. Si la línea de tiempo de voz real extiende los segmentos de apertura, mantén los visuales de palabras de destello y conflicto coincidentes en la pantalla hasta que comience la revelación de la raíz o el patrón.
• Los destellos de palabras en órbita/burbuja del gancho deben sincronizarse con el segmento de voz real flash-words. No uses una ranura fija de 8-10 fotogramas para cada palabra. Distribuye el tiempo de revelación de la burbuja a lo largo del segmento hablado para que cada palabra aparezca a medida que se escucha, con las palabras anteriores permaneciendo visibles.
• Mantén la rotación de la órbita contenida. La apertura al estilo 046 debe sentirse como si las palabras se estuvieran reuniendo alrededor de una familia, no girando por la pantalla. Un cuarto de vuelta a lo largo del segmento suele ser suficiente.
• Las escenas de cuadrícula/estructura deben usar un diseño simétrico dinámico basado en el recuento real de palabras. No codifiques un diseño de 8 ranuras cuando el episodio tenga 6 o 7 palabras; centra las filas incompletas y verifica que no falte ninguna palabra.
• Las líneas de conexión de la cuadrícula deben conectarse desde los bordes de la raíz/tarjeta y permanecer detrás de los módulos. No dibujes líneas a través del texto de las palabras o del contenido de la tarjeta.
• Si la instruction de DashScope falla para una voz del sistema, vuelve a intentarlo sin instruction mientras conservas rate, voice, model y la estructura del guion.
• No cargues BGM desde URLs remotas durante la vista previa o el renderizado de Remotion.
• No cargues iconos de animales desde URLs remotas durante la vista previa o el renderizado de Remotion.
• Si la licencia del BGM no está clara, añade license_check_required al archivo notes.md del episodio.
• Usa los valores predeterminados de audio actuales a menos que haya una razón documentada para cambiarlos: bgmVolume: 0.32, factor de atenuación de voz 0.65 y límite de seguridad de BGM 0.32.

Comandos Útiles

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

npm run render debe tratarse como el comando de lanzamiento predeterminado para cada episodio porque exporta tanto el vídeo final como la imagen de portada para Douyin. npm run copy se puede usar para rellenar o actualizar solo el pie de foto de Douyin y las notas de publicación del episodio activo.

Para comprobaciones de fotogramas clave:

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