tugrulz/Kurzgesagt-Stil

Erklärvideos im Kurzgesagt-Stil

Dieses Skill ist die kreative Richtung. Es entscheidet, wie ein Video aussieht, sich bewegt, klingt und liest. Die remotion-*-Skills entscheiden, wie es in Code umgesetzt wird: Lies remotion-best-practices (den Router) und remotion-markup, bevor du eine Komposition schreibst, und folge ihnen, wo ein Ausschnitt hier widerspricht.

Das Genre funktioniert, weil es schwierige Ideen klein, warm und lustig wirken lässt, während die Bilder klar bleiben. Die meisten Regeln unten dienen diesem Zweck: einfache Formen, damit die Idee lesbar ist; ständige sanfte Bewegung, damit es lebendig wirkt; und große Skalensprünge, damit eine Zahl oder Entfernung gefühlt und nicht nur gelesen wird.

Der Stil in zehn Regeln

1. Keine Konturen. Formen werden durch Füllung, Verlauf und eine Schattenform definiert. Striche erscheinen nur bei Diagrammlinien, Graphen und Zeigern, in einem einheitlichen Gewicht mit runden Enden.
2. Abgerundete, einfache Geometrie. Kreise, Kapseln, abgerundete Rechtecke, weiche Kleckse. Wenn eine Form mehr als etwa ein Dutzend Pfadpunkte braucht, vereinfache sie.
3. Tief gesättigter Hintergrund, scharfe Akzente. Ein dunkler Verlaufshintergrund (Marineblau, Indigo, Aubergine, tiefes Teal) mit ein oder zwei lebhaften Akzentfarben. Der Warm-Kalt-Kontrast zieht den Blick auf das Motiv.
4. Licht hat eine Richtung. Jedes Objekt besteht aus Basis + Schatten (farbtonlich in Richtung Blau/Lila, nicht nur dunkler) + einem schmalen Glanzlicht. Eine Lichtrichtung pro Szene.
5. Winzige, fast gesichtslose Charaktere. Punktaugen, meist kein Mund, stummelige Gliedmaßen. Emotionen entstehen aus Haltung und Bewegung, nicht aus Gesichtsdetails.
6. Unruhige Ränder, klare Mitte. Hintergrundebenen tragen kleine, kontrastarme Details (Sterne, Partikel, entfernte Formen). Das Motiv ist kräftig und in der Thumbnail-Größe lesbar.
7. Nichts ist jemals statisch. Leises Treiben, langsamer Kamerazug, Parallaxe, Funkeln. Ein gehaltenes Bild wirkt tot.
8. Schnell rein, weich raus. Elemente erscheinen mit kleinem Überschwinger, wellenförmig gestaffelt. Ausblendungen und Kamerafahrten laufen sanft aus.
9. Skalierung ist der Haupt-Spezialeffekt. Zoome durch ein Objekt in eine kleinere Welt, ziehe zurück, um zu zeigen, wie klein etwas war, wiederhole Icons, bis eine Zahl landet.
10. Worte sind sparsam. Die Erzählung trägt den Inhalt. Text auf dem Bildschirm ist für Label, Zahlen und den gelegentlichen Pointen.

Arbeitsablauf

Arbeite in Phasen mit zwei Freigabeschleifen. Drehbücher und Storyboards sind günstig zu ändern, Animationen teuer – hole also Zustimmung ein, bevor du baust.

0. Briefing. Frage nur, was fehlt: Thema, Zielgruppe, Länge, Seitenverhältnis, Stimmenquelle (Benutzeraufnahme, ElevenLabs via remotion-markup's voiceover.md oder stummer Platzhalter) und Stimmung. Vorgaben: 16:9, 1920×1080, 30 fps, 3-5 Minuten.
1. Recherche → research/facts.md. Tabelle mit Behauptung | Zahl | Quelle | Vertrauensgrad. Erfinde niemals eine Statistik; kennzeichne Schätzungen als Schätzungen. Der Erklärer ist nur so gut wie seine Fakten.
2. Drehbuch → script.md. Lies references/script-and-structure.md. Freigabe: Benutzer genehmigt das Drehbuch.
3. Storyboard → storyboard.md, eine Zeile pro Einstellung (Vorlage im Skript-Referenz). Wähle für jede Einstellung ein Rezept aus references/scene-recipes.md. Freigabe: Benutzer genehmigt das Storyboard.
4. Stil-Bibel. Kopiere assets/theme.ts nach src/kg/theme.ts. Wähle eine Palette pro Akt (ein „Farbdrehbuch“; siehe references/visual-language.md), damit die Stimmung mit der Argumentation wechselt.
5. Bauen. Zuerst die gemeinsamen Grundbausteine in src/kg/ (schattierte Formen, Sternenfeld, Charaktere, Label, Kameragestell), dann eine Komponente pro Szene in src/scenes/. Lies references/visual-language.md und references/motion-language.md. Verwende remotion-create zum Gerüstbauen und remotion-markup für die Mechanik.
6. Audio. Die Erzählung zuerst, dann leite die Dauer jeder Einstellung aus den Audio-Timings ab (remotion-captions für Wort-Timings, calculateMetadata für dynamische Dauer). Füge einen Musikteppich und ein weiches Pop/Woosh pro Hauptauftritt hinzu (remotion-markup's sfx.md). Mische die Erzählung bei etwa -20 dB RMS, den Musikteppich etwa 8 dB darunter und den Spitzenwert bei oder unter -1 dBFS. Text-to-Speech-Dateien spitzen oft bei 0 dBFS, also skaliere die Erzählung auf etwa 0,8, bevor du etwas hinzufügst (Details in references/motion-language.md).
7. Qualitätssicherung und Rendern. Rendere Standbilder bei jedem Takt, bei Frame 0 und auf beiden Seiten jeder Szenengrenze. Gehe die Checkliste unten durch, rendere mit remotion-render und messe dann das Audio des Ergebnisses.

Projektstruktur

src/
  kg/theme.ts          Paletten, Schattierungsrampen, Easing-Voreinstellungen
  kg/primitives/       ShadedSphere, StarField, Character, Label, CameraRig, ...
  scenes/NN-name.tsx   eine Szene pro Storyboard-Einstellungsgruppe
  Video.tsx            setzt Szenen zusammen; besitzt Audio
public/                Erzählung, Musik, Soundeffekte
research/facts.md
script.md
storyboard.md

Umgebungsnotizen

• Windows: Halte den Pfad kurz. Tools, die Remotion startet (esbuild, der Renderer, headless Chrome), schlagen mit ENOENT fehl, wenn ihr aufgelöster Pfad 260 Zeichen überschreitet. Das ist schnell unter AppData oder in einem tiefen Sitzungsordner erreicht, wo der Pfad nach der Systemauflösung noch länger wird. Gerüste anlegen unter z. B. D:\mein-video und ein Standbild rendern, bevor du etwas baust.
• Remotions gebündeltes ffmpeg ist ein Minimalbau ohne volumedetect-Filter. Um Pegel zu prüfen, dekodiere das Rendering in eine WAV (npx remotion ffmpeg -i out.mp4 -vn -ac 1 -c:a pcm_s16le check.wav) und berechne Spitze und RMS in einem kurzen Skript.

Checkliste vor dem Rendern

Gehe diese über Standbilder vom Anfang, der Mitte und dem Ende jeder Szene sowie über Frame 0 und die Frames auf beiden Seiten jeder Szenengrenze.

• Gibt es eine Kontur auf einer Form, die keine Diagrammlinie ist? Entferne sie.
• Hat jedes Objekt eine Schattenseite und ein Glanzlicht, beleuchtet aus der einzigen Lichtrichtung der Szene?
• Gibt es im Frame höchstens 2 Akzentfarbtöne plus die Hintergrundfamilie?
• Ist das Motiv bei 25% Größe lesbar? Wenn nicht, vergrößere es oder senke den Kontrast der Umgebung.
• Bewegt sich in jeder Sekunde der Szene etwas (Leerlaufbewegung, Kamera, Partikel)?
• Trifft mindestens alle 2-4 Sekunden ein neuer visueller Takt ein, normalerweise an einem Satz ausgerichtet?
• Ist Text auf dem Bildschirm 6 Wörter oder weniger, mindestens 36 px bei 1080p, in Satzschreibung?
• Ist jede Zahl auf dem Bildschirm in research/facts.md mit einer Quelle?
• Ist jedes Leuchten ein einzelner Verlauf (keine gestapelten Bänder), und ist etwas, das außerhalb des Bildes wartet, bei Frame 0 frei von sichtbarem Leuchten?
• Ist die Vignette hell (etwa 35% an den Ecken) und lila getönt, damit helle Motive nicht matschig werden?
• Bleibt Text neben einem wachsenden Motiv frei von der größten Größe des Motivs, und passt die Box eines Zählers den breitesten Wert?
• Nach dem Rendern: Spitzt das Audio bei oder unter -1 dBFS, mit der Erzählung deutlich über der Musik?

Leitplanken

• Originalität. Der Look ist ein Genre; die Identität des Kanals ist es nicht. Verwende nicht den Namen Kurzgesagt, das Logo, Intro/Outro oder seine spezifischen Charaktere (wie seinen Vogel) in der Ausgabe. Entwerfe originale Charaktere und eine originale Endkarte und präsentiere das Video nicht als Arbeit des Kanals.
• Genauigkeit. Ein Erklärer lehrt, daher sind belegte Fakten wichtiger als ein hübscher Frame. Benenne Unsicherheiten in der Erzählung („Wissenschaftler schätzen...“), anstatt sie wegzurunden, und beende das Video mit einer Quellenliste.
• Barrierefreiheit. Füge Untertitel hinzu (remotion-captions). Vermeide Blitze schneller als 3 pro Sekunde, einschließlich Vollbild-Zoom-Durch-Blitze. Kodiere Diagrammserien nicht nur durch Farbe; beschrifte sie direkt.
• Schwierige Themen. Niedliche Bilder plus ernster Inhalt ist Teil des Charmes des Genres und auch seines Risikos. Bei Tod, Krankheit, Krieg oder Armut halte die Bilder einfach und Witze aus dem Weg.

Referenzdateien

Lies dies	Wann
references/visual-language.md	Paletten wählen, schattierte Formen zeichnen, Hintergründe, Charaktere, Typografie, Komposition, Objekt-Rezepte
references/motion-language.md	Animation schreiben: Easing, Pop-In, Leerlaufbewegung, Kamera, Parallaxe, Zoom-Durch, Graphen, Timing
references/script-and-structure.md	Erzählung schreiben, den Bogen planen, Tempo, Faktenblatt, Einstellungsliste
references/scene-recipes.md	Jede Einstellung planen: Maßstabenthüllung, Menge von 100, Cutaway, Zeitraffer, Prozessdiagramm usw.
assets/theme.ts	Startpunkt für Design-Tokens (Paletten, Schattierungsrampen, Easing-Voreinstellungen)