Douyin Remotion Englisch-Vokabelvideo

Douyin Remotion Video

Nutzen Sie diese Fähigkeit, wenn der Benutzer Englisches Vokabelmaterial in ein prägnantes Douyin-ähnliches Wortlern-Kurzvideo verwandeln möchte, insbesondere wenn:

• Eine Wortwurzel, ein Präfix, Suffix, eine Wortfamilie, ein Verwechslungswortpaar oder eine Vokabelliste zu einem Kurzvideo werden soll.
• Ein Englisch-Lern-Remotion-Projekt einen schwarz/gelben, kontrastreichen Vokabelkarten-Stil benötigt.
• Die Alibaba Bailian/DashScope CosyVoice Sprachausgabe die Untertitel und das Timing steuern soll.
• Vorhandene Remotion-Szenen eine Überprüfung von Stil, Rhythmus, Untertiteln, Sprachausgabe oder finalem Export benötigen.

Verwenden Sie diese Fähigkeit nicht für Papiereklärungen, Code-Modul-Erklärungen, Architekturdiagramme, allgemeine Wissensvideos oder Plug-and-Play-Modul-Projekte. Diese gehören zu separaten Fähigkeiten oder Projekten.

Diese Zeile ist eingefroren: keine neuen Wortwurzel-Episoden. Neue Vokabelepisoden verwenden eine der Vorlagen-Fähigkeiten (skills/vocab-dossier, skills/vocab-game-show, skills/vocab-whiteboard; wählen Sie mit npm run plan, Regeln in skills/_shared/HOUSE_RULES.md). Diese Fähigkeit bleibt nur bestehen, um die vorhandenen schwarz/gelben Wortwurzel-Episoden (001–059) neu zu rendern.

Eingaben

Typische Eingaben:

• Vokabelinhalt: Zielwurzel/Affix, Wortliste, Bedeutungen, Phonetik, Beispiel-Merkanleitung oder eine kurze Idee für eine Englisch-Lern-Episode.
• Episoden-Briefing: Thema, Zielgruppe, Ziel, Plattform, Dauer, Drei-Sekunden-Hook, Schlüsselwörter.
• BGM-Assets und Registry-Einträge aus public/bgm/, shared-assets/bgm/ und src/data/bgmRegistry.ts.
• Lokale Tierikonen-Assets aus public/assets/icons/animals/, shared-assets/icons/animals/ und src/data/animalIconRegistry.ts.
• Datendateien: src/data/words.ts, src/data/voiceScript.ts, src/data/episodeConfig.ts, optional src/data/subtitles.ts.
• Vorhandenes Remotion-Projekt mit React + TypeScript.
• Optionales Referenzvideo oder Screenshot für den visuellen Stil der englischen Vokabeln.

Ausgaben

Erwartete Ausgaben:

• Eine ausführbare englische Vokabel-Remotion-Episode.
• Datengesteuerte Vokabeldateien.
• TTS-Segmente in public/audio/segments/.
• Zusammengeführte Sprachausgabe unter public/audio/main-voice.mp3.
• Aus Audio abgeleitete Zeitlinie unter src/data/generatedVoiceTimeline.ts.
• Finales MP4, normalerweise out/root-word-template.mp4 oder ein epochenspezifischer Ausgabepfad.
• Ein Douyin-Coverbild für jede Episode, exportiert mit den Episoden-Liefergegenständen.
• Eine Douyin-Bildunterschrift von etwa 150 chinesischen Zeichen mit integrierten #-Tags für jede Episode.

Kernarbeitsablauf

1. Lesen Sie das Vokabelthema und schreiben Sie ein kurzes Episoden-Briefing.
2. Entwerfen Sie den ersten Drei-Sekunden-Hook, bevor Sie den Lektionstext schreiben. Wählen Sie einen hookType, Hook-Text, Blitzwörter, Wurzeltext, Tonfall, SFX-Momente und optional eine einzelne Tierreaktion.
3. Erstellen oder aktualisieren Sie Datendateien, insbesondere voiceScript.ts und Vokabeldaten wie words.ts.
4. Konfigurieren Sie episodeConfig.ts, einschließlich hook, bgmId, bgmVolume, voiceVolume und sfxVolume.
5. Wählen Sie eine geeignete BGM aus bgmRegistry, konfigurieren Sie die Standardlautstärke bgmVolume: 0.32 und planen Sie die Mix-Überprüfung.
6. Wählen Sie 2–4 Tierikonen-Momente aus animalIconRegistry nur dann, wenn sie Hook, Fehlvorstellung, Wurzelenthüllung oder Zusammenfassungs-Beat unterstützen.
7. Bauen Sie Remotion-Szenen aus Daten. Halten Sie Inhalt, Timing, Audio-Mix-Einstellungen, Ikonomente und visuellen Zustand getrennt.
8. Generieren Sie TTS-Sprachausgabe mit DashScope CosyVoice. Hartcodieren Sie niemals den API-Schlüssel.
9. Verwenden Sie ffprobe-Dauern, um generatedVoiceTimeline.ts zu generieren.
10. Steuern Sie Untertitel, aktive Szene, aktives Schlüsselwort, Hook-Biltzwörter, Konflikttext und Punch-Zoom aus generatedVoiceTimeline.
11. Rendern Sie Standbilder zu wichtigen Beats, insbesondere Bilder innerhalb von 0–3 Sekunden und alle gestreckten Hook-Beats nach der echten TTS, und überprüfen Sie dann auf leere Bilder, Überlappungen und schlechten Kontrast.
12. Generieren Sie ein Douyin-Cover für die Episode. Jede Episode muss mit einem Coverbild ausgeliefert werden; keine Ausnahmen.
13. Generieren Sie eine Douyin-Bildunterschrift von etwa 150 chinesischen Zeichen mit integrierten #-Tags und exportieren Sie sie mit den Veröffentlichungsdateien.
14. Rendern Sie das finale MP4 und überprüfen Sie Hook-Unterbrechung, Audio/Video-Synchronisation, BGM-Ducking, BGM-Lautstärke, Tierikonen-Platzierung, finales Ausblenden, Cover-Lesbarkeit und Bildunterschriftenqualität.

Bei Bedarf zu ladende Dateien

• Visueller Stil: references/visual_rules.md
• Erster Drei-Sekunden-Hook: references/hook_rules.md
• Timing und Tempo: references/rhythm_rules.md
• DashScope Sprachausgabe: references/voice_rules.md
• BGM und Audio-Mix: references/audio_rules.md
• Tierikonen-Nutzung: references/icon_rules.md
• Untertiteldesign und Synchronisation: references/subtitle_rules.md
• Export-QA-Checkliste: references/quality_rules.md
• End-to-End-Verfahren: workflow.md
• Aktuelles Beispiel: examples/ject_episode_example.md

Bevorzugtes Projektmuster

Halten Sie diese Dateien datengesteuert:

• src/data/voiceScript.ts: kanonische Erzähl- und Untertitelquelle für die Vokabelepisode.
• src/data/generatedVoiceTimeline.ts: generiert aus echten Audio-Dauern.
• src/data/bgmRegistry.ts: lokales BGM-Register, generiert aus public/bgm/.
• src/data/animalIconRegistry.ts: lokales Tierikonen-Register, generiert aus public/assets/icons/animals/.
• src/data/episodeConfig.ts: pro Episode hook, bgmId, bgmVolume, voiceVolume und sfxVolume.
• src/scenes/HookScene.tsx: das Douyin-Unterbrechungssystem mit harten Schnitten, Wortblitzen, Konflikttext, Auszahlung, optionalem lokalem SFX und höchstens einer Tierreaktion. Es muss das aus generatedVoiceTimeline abgeleitete Timing nach TTS verwenden, damit gestreckte Hook-Erzählung keine leeren Bilder hinterlässt.
• src/timeline.ts: leitet Szenen-Timing aus generatedVoiceTimeline ab.
• src/components/BackgroundMusic.tsx: looped BGM, duckt unter Sprachausgabe und blendet am Ende aus.
• src/components/AnimatedAnimalIcon.tsx: kurze, lokale Tierikonen-Reaktionen für ausgewählte emotionale Beats.
• src/CoverThumbnail.tsx: kanonische, einheitliche Douyin-Cover-Vorlage. Sie sollte das schwarz/gelbe Aussehen beibehalten, die Ersteller-Marke 小猪盖被 zeigen und bei Bedarf lokale Tierikonen verwenden.
• scripts/generate-release-copy.ts: kanonischer Generator für Veröffentlichungskopien für Episoden-Bildunterschrift und Veröffentlichungsnotizen.
• src/utils/audioMixing.ts: gemeinsame BGM-Lautstärke-, Ducking- und Ausblendhilfen.
• src/utils/motion.ts: gemeinsame Bewegungshelfer wie slamIn, punchZoom, shake, flashOpacity.
• public/audio/main-voice.mp3: nur generiertes Artefakt, das Remotion mit <Audio> abspielen sollte.
• public/bgm/: lokale BGM, die von Remotion verwendet wird; laden Sie BGM während des Renderings nicht aus dem Netzwerk.
• public/assets/icons/animals/: lokale Tierikonen, die von Remotion verwendet werden; laden Sie Ikonen während des Renderings nicht von entfernten URLs.

Sicherheitsregeln

• Schreiben Sie niemals API-Schlüssel in Quelldateien, Vorlagen, Beispiele, Protokolle oder Dokumente.
• Verwenden Sie DASHSCOPE_API_KEY aus der Umgebung.
• Behandeln Sie generierte Audio- und Zeitliniendateien als ersetzbare Artefakte.
• Verlassen Sie sich nicht auf hartcodierte Sekundenmarken, sobald eine generierte Sprachzeitlinie existiert.
• Jede Episode muss ein Douyin-Coverbild zusammen mit den Video-Liefergegenständen exportieren.
• Jede Episode muss eine Douyin-Bildunterschrift zusammen mit den Video-Liefergegenständen exportieren.
• Das Cover muss einen einheitlichen Markenstil beibehalten: schwarzer Hintergrund, gelbe Hervorhebung, Ersteller-Name 小猪盖被 und einen lesbaren, auf der Wurzel basierenden Merkwinkel.
• Die Bildunterschrift sollte etwa 150 chinesische Zeichen lang sein, als einzelner Douyin-Post lesbar sein und #英语学习-artige Tags enthalten.
• Beginnen Sie eine Episode nicht mit einer normalen Titelseite. Die ersten 0,5–1 s müssen das Scrollen mit großem Text oder einem harten visuellen Treffer unterbrechen.
• Lassen Sie Hook-Visuals nicht nach einer festen 3-Sekunden-Marke nach TTS enden. Wenn die echte Sprachzeitlinie die Eröffnungssegmente streckt, halten Sie passende Blitzwort- und Konflikt-Visuals so lange auf dem Bildschirm, bis die Wurzel- oder Musterenthüllung beginnt.
• Hook-Orbit/Bubble-Wortblitze müssen vom echten flash-words-Sprachsegment getaktet werden. Verwenden Sie keinen festen 8–10-Bild-Slot für jedes Wort. Verteilen Sie das Bubble-Enthüllungs-Timing über das gesprochene Segment, sodass jedes Wort beim Hören erscheint, wobei vorherige Wörter sichtbar bleiben.
• Halten Sie die Orbit-Rotation zurückhaltend. Der 046-artige Einstieg sollte sich anfühlen, als würden Wörter um eine Familie gesammelt, nicht um den Bildschirm gewirbelt. Eine Vierteldrehung über das Segment ist normalerweise ausreichend.
• Raster-/Strukturszenen müssen ein dynamisches, symmetrisches Layout basierend auf der tatsächlichen Wortanzahl verwenden. Hartcodieren Sie kein 8-Slot-Layout, wenn die Episode 6 oder 7 Wörter hat; zentrieren Sie unvollständige Zeilen und überprüfen Sie, dass kein Wort fehlt.
• Rasterverbindungslinien sollten von den Wurzel-/Kartenkanten ausgehen und hinter Modulen bleiben. Zeichnen Sie keine Linien durch Worttext oder über Karteninhalt.
• Wenn die DashScope instruction für eine Systemstimme fehlschlägt, wiederholen Sie ohne instruction, während Sie rate, voice, model und Skriptstruktur beibehalten.
• Laden Sie während der Remotion-Vorschau oder des Renderings keine BGM von entfernten URLs.
• Laden Sie während der Remotion-Vorschau oder des Renderings keine Tierikonen von entfernten URLs.
• Wenn die BGM-Lizenzierung unklar ist, fügen Sie license_check_required zu den Episoden notes.md hinzu.
• Verwenden Sie die aktuellen Audio-Standardeinstellungen, es sei denn, es gibt einen dokumentierten Grund, sie zu ändern: bgmVolume: 0.32, Sprach-Ducking-Faktor 0.65 und BGM-Sicherheitsgrenze 0.32.

Nützliche Befehle

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

npm run render sollte als der Standard-Veröffentlichungsbefehl für jede Episode behandelt werden, da er sowohl das finale Video als auch das Douyin-Coverbild exportiert. npm run copy kann verwendet werden, um die Douyin-Bildunterschrift und Veröffentlichungsnotizen für die aktive Episode nachträglich zu ergänzen oder zu aktualisieren.

Für Keyframe-Überprüfungen:

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