quyen2867/remotion-video-template

Remotion Themen-Erklärvideo Skill (50-60s)

Dieser Skill führt dich durch die Erstellung hochwertiger, 50–60 Sekunden kurzer Erklärvideos (TikTok / YouTube Shorts / Reels Format: 1080×1920 @ 30fps) zu jedem beliebigen Thema.

Er kombiniert:

1. Visuelle Best Practices aus remotion-dev/skills (frame-genaue Federn, clamped Interpolationen, Sequenz-Komposition, Typografie-Hierarchie).
2. KI-Sprachsynthese via TTS_PROVIDER in .env: edge (edge-tts-universal, online, kostenlos) oder cit (CIT Voice Studio, offline vietnamesische Studio-Stimmen – Download unter github.com/quyen2867/cit-voice-studio, API-Dokumentation: docs/cit-voice-studio.md).
3. Exakte Synchronisation des Timings, die Längen der Sprachaufnahmen direkt in die Remotion-Frame-Sequenzen abbildet.

---

1. Videostruktur & Timing (50-60s / 1500-1800 Frames @ 30fps)

Ein fesselndes Kurzvideo folgt dem Hook-Problem-Lösung-Wert-Outro-Framework:

Szene	Name	Zeit	Frame-Bereich (@ 30fps)	Zweck & Visuals
1	Hook	0s – 5s	~150 Frames	Sofortige Aufmerksamkeit: Großer Titel, neugierig machende Frage, schwebendes Badge.
2	Kontext / Schmerzpunkt	5s – 15s	~300 Frames	Problem oder Kontext, warum dieses Thema wichtig ist. Warnsymbol / Vergleich.
3	Kernkonzept Teil 1	15s – 28s	~390 Frames	Erklärung des ersten Kernprinzips: Glaskarte, illustrative Symbole, hervorgehobene Schlüsselwörter.
4	Kernkonzept Teil 2	28s – 42s	~420 Frames	Detaillierte Erweiterung oder Funktionsweise: 3-Schritt-Prozess, fließendes Ablaufdiagramm.
5	Real-World Impact	42s – 52s	~300 Frames	Praktische Anwendung, praxisnahe Tipps oder beeindruckende Zahlen.
6	Outro & CTA	52s – 60s	~240 Frames	Prägnante Zusammenfassung, Aufruf zu Like/Share/Follow & persönliche Marke.

Gesamtdauer: 1500 – 1800 Frames (ca. 50 – 60 Sekunden).

---

2. TTS-Sprachausgabe-Generierung (edge | cit)

2.1 Voice-Konfiguration über .env

Stelle sicher, dass die .env-Datei konfiguriert ist (vollständig in .env.example zu sehen):

TTS_PROVIDER=edge                    # edge | cit
TTS_OUTPUT_DIR=public/audio

# Edge TTS (TTS_PROVIDER=edge)
EDGE_TTS_VOICE=vi-VN-HoaiMyNeural    # oder vi-VN-NamMinhNeural, en-US-ChristopherNeural
EDGE_TTS_RATE=+10%                   # +10% bis +15% sorgt für schnelleres, fesselnderes Tempo im Kurzvideo

# CIT Voice Studio (TTS_PROVIDER=cit)
CIT_TTS_BASE_URL=http://127.0.0.1:8001
CIT_TTS_VOICE=Hải Đăng               # Liste der Stimmen: docs/cit-voice-studio.md oder GET /voices
CIT_TTS_SPEED=1.1                    # 0.5 - 2.0

Wenn TTS_PROVIDER=cit:

• Die CIT Voice Studio App muss geöffnet sein. Das Skript ruft automatisch GET /health auf, bevor es Audio generiert; bei fehlgeschlagener Verbindung wird der Benutzer aufgefordert, die App zu öffnen (oder sie herunterzuladen unter github.com/quyen2867/cit-voice-studio).
• Der Sprechtext kann Emotion-Tags wie [cười] (lachen), [thở dài] (seufzen), [hắng giọng] (räuspern) und Pausen-Tags wie [nghỉ 0.5s] (Pause 0.5s) enthalten (diese werden nicht mitgesprochen). Nicht übertreiben: maximal 1 Tag pro Szene.
• Fehler 400 Voice not found = falscher Stimmname (die Betonung muss stimmen). Überprüfe CIT_TTS_VOICE.

2.2 Ablauf der Audio-Datei Generierung

Wenn das Thema gegeben ist, erstelle eine Voiceover-Skriptdatei und führe das Skript scripts/generate-tts.ts aus, um Audio zu generieren:

import { generateTopicVoices } from "../../scripts/generate-tts";

const scenes = [
  {
    id: "scene1_hook",
    text: "Bạn có biết Docker thực chất là gì và tại sao mọi lập trình viên đều cần nó?",
  },
  {
    id: "scene2_problem",
    text: "Trước đây, câu nói 'trên máy tôi vẫn chạy được' luôn là cơn ác mộng khi bàn giao sản phẩm.",
  },
  {
    id: "scene3_concept1",
    text: "Docker giải quyết việc này bằng Container - đóng gói toàn bộ code và môi trường vào một khối duy nhất.",
  },
  {
    id: "scene4_concept2",
    text: "Khác với máy ảo nặng nề, Docker chia sẻ chung nhân hệ điều hành, giúp khởi động chỉ trong tích tắc.",
  },
  {
    id: "scene5_impact",
    text: "Nhờ đó, bạn deploy ứng dụng mượt mà trên mọi máy chủ từ AWS, GCP cho đến VPS giá rẻ.",
  },
  {
    id: "scene6_outro",
    text: "Follow kênh để nắm trọn các kiến thức công nghệ ngắn gọn mỗi ngày nhé!",
  },
];

await generateTopicVoices("DockerShort", scenes);

Die Audiodateien werden automatisch in public/audio/<TopicName>/<sceneId>.<ext> gespeichert (.mp3 bei edge, .wav bei cit), zusammen mit einer manifest.json, die exakt die Anzahl der Frames (durationInFrames) und den audioPath für jede Szene festhält.

• Optionen pro Szene: voice (Stimme des aktuell gewählten Anbieters), rate/pitch/volume (nur edge), speed 0.5-2.0 (nur cit).
• Bereits vorhandene Dateien werden wiederverwendet (Cache). Um nach Änderungen am Text oder Wechsel der Stimme neu zu generieren, lösche die entsprechende Audiodatei vorher.

---

3. Remotion Coding-Regeln (aus remotion-dev/skills)

Beim Schreiben von Remotion-Quellcode MÜSSEN die folgenden Regeln eingehalten werden:

3.1 Verwendung von Spring-Animationen

Keine CSS-Keyframes/Transitions oder lebloses lineares Easing. Verwende spring():

import { spring, useCurrentFrame, useVideoConfig } from "remotion";

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

// Sanft federnde Karten/Icon-Spring
const scale = spring({
  frame,
  fps,
  config: {
    damping: 12,    // Unter 15 erzeugt natürliche Elastizität
    stiffness: 100,  // Spannung
    mass: 0.8,
  },
});

const entrance = spring({
  frame: frame - 10, // 10 Frames Verzögerung
  fps,
  from: 50,
  to: 0,
});

3.2 Sichere Interpolation (Immer Clamp)

Gib immer extrapolateLeft: "clamp" und extrapolateRight: "clamp" an, um Werteüberläufe zu vermeiden, wenn die Timeline außerhalb des Bereichs liegt:

import { interpolate } from "remotion";

const opacity = interpolate(frame, [0, 15], [0, 1], {
  extrapolateLeft: "clamp",
  extrapolateRight: "clamp",
});

3.3 Audio einbetten und Sequenz synchronisieren

Jede Szene in der Composition verwendet <Sequence> oder <Series>, um das Timing exakt zu steuern:

import { Audio, staticFile, Sequence } from "remotion";

// In der Szenenkomponente - Pfad aus Manifest holen, NICHT .mp3 hardcoden (cit-Anbieter erzeugt .wav):
<Sequence from={0} durationInFrames={sceneDuration}>
  <Audio src={staticFile(audioManifest.scenes[0].audioPath)} />
  <SceneContent />
</Sequence>

4. Knapper Übergangspuffer (Snappy Transition Buffer):
   • Der Puffer zwischen den Szenen sollte nur +3 bis +4 Frames (ca. 0.1s) nach Ende der Sprachausgabe betragen.
   • Vermeide zu lange Puffer (+15 bis +20 Frames), die zu stillen/toten Momenten zwischen den Szenen führen. Die nächste Szene sollte sofort erscheinen, wenn der vorherige Satz endet, um das dynamische, fesselnde Tempo des Kurzvideos zu erhalten.

// Beispiel: Berechnung der Szenendauern in Series
const d1 = audioManifest.scenes[0].durationInFrames + 3;
const d2 = audioManifest.scenes[1].durationInFrames + 3;
// ...

3.4 Visuelle Gestaltungsrichtlinien (Vertikal 1080×1920)

1. Hintergrund: Hochwertiger Dark Mode (bg-slate-950 oder Gradient from-slate-950 via-zinc-900 to-black) mit dezenten Radial-Glow-/Grid-Effekten.
2. Glassmorphism-Karten:
   • backdrop-blur-xl bg-white/10 border border-white/20 rounded-3xl p-8 shadow-2xl
3. Markenheader oben:
   • Zeige immer eine Markenkomponente ⚡ [CHANNEL_NAME] oben mittig (top: 150px, left: 50% translate-x) an, die den Wert der Umgebungsvariable CHANNEL_NAME liest (Standard: "mquyen"), damit sie nicht von der Suchleiste und den Tabs „Abonnements“ / „Für dich“ der Plattform (TikTok, Shorts, Reels) verdeckt wird.
4. Für Mobilgeräte optimierte Typografie (1080×1920):
   • Haupttitel: 72px - 96px, fett font-black, scharfer Farbverlauf.
   • Karteninhalt / Zitate: 40px - 50px font-extrabold.
   • Sekundärtext / Erklärungen: 28px - 36px font-semibold.
   • Kategorie-Badge: 28px - 32px font-black uppercase.
5. Zentriertes Layout & Einzeilige Untertitel (Single-Line Chunked Caption):
   • Hauptlayout: Der gesamte wichtige Inhaltsblock MUSS waagerecht und senkrecht zentriert sein (justify-center vertikal).
   • Position des Untertitels: Unterhalb des zentralen Blocks mit ausreichendem Abstand (mt-64), nicht verdeckt durch die untere Symbolleiste von TikTok/Reels.
   • Einzeiliges Format: Der Untertitel erscheint in nur einer Zeile (ca. 5-7 Wörter), groß text-4xl font-black, wird automatisch in Satzgruppen geteilt und nahtlos entsprechend dem Fortschritt der Sprachausgabe (durationInFrames) überblendet. Verwende eine Pill-Card rounded-full bg-slate-950/95 border-2 border-sky-400/50 px-10 py-5 mit hervorgehobenen Schlüsselwörtern.

---

4. Schrittweise Video-Erstellung für Antigravity / Codex

Bei Erhalt der Anfrage: „Erstelle ein Erklärvideo zu [Thema X]“:

Schritt 1: Skript erstellen (Scripting)

1. Lege die 6 Szenen fest (Hook, Problem, Konzept 1, Konzept 2, Impact, Outro).
2. Schreibe natürlichen, prägnanten vietnamesischen Sprechtext mit kurzen Sätzen (jeweils 15-30 Wörter pro Szene).

Schritt 2: Sprachausgabe generieren (TTS Generation)

1. Lese TTS_PROVIDER in .env, um zu erfahren, ob edge oder cit verwendet wird.
2. Erstelle ein Skript scripts/generate-<topic>-audio.ts, das generateTopicVoices aufruft, und führe es aus mit npx tsx scripts/generate-<topic>-audio.ts.
3. Hole die tatsächlichen Frame-Dauern aus manifest.json / src/<TopicName>/audioData.ts.

Schritt 3: Code-Verzeichnis src/<TopicName>/ erstellen

Standardverzeichnisstruktur:

src/<TopicName>/
├── <TopicName>.tsx          # Hauptcomposition, die die Series.Sequence zusammenfasst
├── types.ts                 # Schema & Props
├── audioData.ts             # Metadaten der Audiodauern
└── scenes/
    ├── Scene1Hook.tsx
    ├── Scene2Problem.tsx
    ├── Scene3Concept1.tsx
    ├── Scene4Concept2.tsx
    ├── Scene5Impact.tsx
    └── Scene6Outro.tsx

Schritt 4: Composition in src/Root.tsx registrieren

Füge eine neue Composition in src/Root.tsx hinzu:

<Composition
  id="<TopicName>"
  component={<TopicName>}
  durationInFrames={totalFrames}
  fps={30}
  width={1080}
  height={1920}
  defaultProps={{}}
/>

Schritt 5: Überprüfen und Berichten

1. Führe npm run lint aus, um TypeScript-/ESLint-Fehler zu prüfen.
2. Gib dem Benutzer den Link zum Öffnen der Composition im Remotion Studio (http://localhost:3000) oder den Befehl zum Rendern als MP4:

   npx remotion render <TopicName> out/<TopicName>.mp4