lroe/apple-dracula

Skill: Minimalistische Erklär-Animation — Dracula Dark (MinutePhysics / Thought-Provoking-Stil)

Erstellt Storyboards, Timing-Pläne, visuelle Drehbücher und Produktions-Prompts im Stil minimalistischer, handgezeichneter Konzept-Erklärvideos.

---

1. Visuelle Identität und ästhetische Regeln

• Leinwand: Dracula-Nacht-Hintergrund (#282A36), keine Farbverläufe, keine Schlagschatten.
• Linienführung: Handgezeichneter Tuschestil (Kreide/Monoline mit subtiler organischer Rauheit), gleichmäßige Strichstärke (3px–4px), Dracula-Vordergrund (#F8F8F2). Telefon-sicherer Mindestwert: Kein Diagrammstrich unter 3px bei 1080p; Grundlinien verwenden 4px.
• Telefon-sicherer Schrift-Mindestwert (einzelnes 16:9 YouTube-Master): Kein Text auf dem Bildschirm unter 36px bei 1080p. Sekundäre Labels 36–44px, Hauptlabels 48–56px, Überschriften 72–80px. Wenn ein Label nicht bei 36px passt, kürzen oder das Detail stattdessen in den Sprechertext verschieben – nicht verkleinern.
• Palette (Dracula):
  • Basis: Dracula-Hintergrund (#282A36) + Vordergrund (#F8F8F2).
  • Fläche: Dracula-Aktuelle-Zeile (#44475A) für hervorgehobene/aktive Karten; verwende #313342 für Standard-Panels und #1E1F29 für vertiefte Bereiche/Bildschirme.
  • Funktionale Akzente A: Dracula-Rot (#FF5555) — Verlust, Entlassungen, negatives Guthaben, Reibung.
  • Funktionale Akzente B: Dracula-Grün (#50FA7B) — Gewinne, Beschäftigung, Ersatz, Gleichgewicht.
  • Unterstützende Akzente (sparsam verwenden): Pink (#FF79C6), Lila (#BD93F9), Cyan (#8BE9FD), Orange (#FFB86C), Gelb (#F1FA8C).
  • Neutrale Füllung: Dracula-Aktuelle-Zeile (#44475A) — subtile Objektfüllungen (Schreibtische, Gebäude).
  • Tiefe Füllung: Dracula-Kommentar (#6272A4) — nur für größere gefüllte Formen, niemals für Fließtext.
• Typografie:
  • Schriftart: Saubere handschriftliche Sans oder lässige Lettering (z. B. Caveat, Patrick Hand).
  • Wortdichte: Maximal 1–5 Wörter pro Callout. Niemals den gesamten Sprechertext auf dem Bildschirm transkribieren.
  • Platzierung: Direkt über, unter oder neben dem zugehörigen visuellen Anker positioniert.
  • Kein kontrastarmer Text: Sekundäre Labels, Überzeilen und Untertitel müssen auf dunklem Hintergrund lesbar bleiben: Dracula-Vordergrund (#F8F8F2) oder Lavendelgrau (#B8B9C5). Verwende niemals Dracula-Kommentar (#6272A4) oder ausgewaschenes Grau für Text; es verschwindet auf Projektoren.
  • Keine Szenenüberschriften oben links: Wiederhole nicht den Sprechertext als Titel + Untertitel am oberen Rand von Inhaltsszenen. Der Sprechertext trägt den Satz; das Diagramm trägt nur kurze funktionale Labels. Dies vermeidet das „Augen-Pingpong“: erst oben links lesen, dann in die Mitte schauen.
  • Kapitelkarten sind die einzige Ausnahme: eine Kapitelnummer + ein einzelnes Motiv können als Vollbild-Übergang verwendet werden. Halte sie sparsam und füge niemals einen Absatz hinzu.

---

2. Charakter- und Metaphern-Design

• Charaktere: Einfache Strich- oder Bohnenfiguren. Minimale Gesichter (Punkt-Augen, neutrale/subtile Mundlinie). Unterscheidung durch einfache Requisiten (Hut, Schreibtisch, Telefon).
• Konzeptuelle Metaphern:
  • Aufgaben/Jobs: Kreisförmige Cluster, gepunktete Umrisse, die ein-/ausblenden.
  • Makroökonomie: Waagen, 2D-Liniendiagramme, Punktgitter/Arrays (z. B. 1.000 Punkte).
  • Institutionen: Einfache geometrische Gebäude-Strichzeichnungen, Türrahmen für Zugang/Stellenangebote.

---

3. Timing, Synchronisation und Rhythmus-Regeln

• Sprach-Synchron-Trigger: Visuelle Elemente zeichnen oder erscheinen genau auf der Silbe, auf der sie gesprochen werden.
• Sequentielles Staffeln: Zerlege komplexe Konzepte in diskrete visuelle Komponenten, die nacheinander eingeführt werden (z. B. Aufgabe 1 $\rightarrow$ Aufgabe 2 $\rightarrow$ ATM-Arm zieht Aufgabe 1).
• Die „Atemraum“-Regel (entscheidend):
  • Niemals sofort nach dem Erscheinen eines Assets übergehen.
  • Halte den fertigen Rahmen für 1,5 bis 3,0 Sekunden oder länger, nachdem die Erzählung zu diesem Punkt abgeschlossen ist. Wir müssen sicherstellen, dass der Benutzer alles verarbeiten kann.
  • Zuschauer brauchen Zeit, um Callouts zu lesen, die Beziehung zu erkennen und die Einsicht aufzunehmen, bevor die Bewegung weitergeht.
• Mindestverarbeitungs-Haltezeit (harte Regel):
  • Die finale visuelle Enthüllung in einer Szene muss mindestens 2,0 Sekunden Bildschirmzeit vor dem Schnitt haben. Wenn die Erzählung dies unmöglich macht, verschiebe die Enthüllung nach vorne, wenn sie kontextuell ist, oder verlängere die Szene bis zur nächsten natürlichen Pause.
  • Schneide niemals auf demselben Wort, das ein Diagramm vervollständigt.
  • Wenn die letzte Erzählzeile nur eine Überleitung ist („lass uns die Zahlen rechnen“, „Adapter beheben das“), verschiebe diesen Text in die nächste Szene, anstatt ihn 0,1–0,8 s auf dem Bildschirm zu lassen.
  • Dichte Szenen (mehrteilige Diagramme, Mathematik, Architektur) benötigen den Endzustand für 2,5–3,5 s gehalten. Vereinfache den letzten Beat, anstatt den Schnitt zu überstürzen.
• Übergänge = kurzer Fade durch den Dracula-Hintergrund (harte Regel):
  • Verwende einen 4–6 Frames dauernden Fade durch #282A36 bei 30 fps (0,13–0,2 s). Verwende keinen Links-nach-rechts-Wipe; er lässt den Schnitt mechanisch wirken.
  • Starte das erste visuelle Element der nächsten Szene vor, sodass die Dunkellücke nur ein Blinzeln ist, niemals eine leere Szene. Setze niemals eine leere Leinwand für mehr als ~0,2 s aus.
  • Wenn eine Szene wirklich eine Kapitelkarte benötigt, behalte ein Motiv auf dem Bildschirm, sodass die Karte niemals eine leere Textfolie ist.
  • Überprüfe mit einem Standbild bei Szenenstart + 0,4 s. Wenn es zu mehr als ~80 % leer ist, verschiebe das erste visuelle Element nach vorne.

---

4. Komposition und negativer Raum

• Negativer Raum: Halte 60 %–80 % der Leinwand jederzeit leer.
• Grundlinie / Basislinie: Verankere Figuren und Gebäude auf einer durchgehenden unteren horizontalen Richtlinie.
• Fokuspunkte-Isolation: Halte 1 aktiven Fokusbereich pro Beat (links, Mitte oder rechts). Animiere niemals mehrere nicht zusammenhängende Quadranten gleichzeitig.
• Übergänge: Kurzer Fade durch den Dracula-Hintergrund #282A36 (4–6 Frames), seitlicher Schwenk entlang der Grundlinie oder plötzliches Abdunkeln. Keine Links-nach-rechts-Wipes, auffällige Zooms oder Rotationen.
• Behalte große Schriftgrößen bei.

---

5. Storyboard-Erstellungs-Workflow

Wenn ein Erzählskript oder ein konzeptionelles Thema gegeben wird:

1. Aufgabenebenen-Zerlegung: Segmentiere die Erzählung in 3–7 Sekunden dauernde visuelle Beats.
2. Visuelle Metaphern-Zuordnung: Weise abstrakten wirtschaftlichen/technischen Aussagen konkrete, minimale Metaphern zu.
3. Bildschirmtext-Auswahl: Wähle $\le$ 3 Ankerwörter pro Beat für die Bildschirmbetonung aus.
4. Timing- und Haltezeit-Zuweisung: Markiere exakte Synchronpunkte ([SYNC]) und Pausen-/Haltezeiten ([HOLD: Xs]).

---

6. Ausgabe-Vorlage

Formatiere für jede Videoszene die Ausgabe wie folgt:

### Szene [Nummer]: [Szenentitel]
**Audio-Zeitstempel:** [MM:SS - MM:SS]
**Erzählung:** „[Exaktes Transkriptsegment]“

* **Visuelle Beschreibung:** (1–2 Sätze zum visuellen Layout und den Assets)
* **Text auf dem Bildschirm:** „[Exakter Text]“ | Position: [z. B. Oben-Mitte] | Farbe: [z. B. Dracula-Rot]
* **Animationssequenz:**
  1. `[00:00.0 - Wort]` Zeichne [Asset A] auf der Grundlinie.
  2. `[00:02.0 - Wort]` Blende [Asset B] ein/schiebe es in [Asset A].
  3. `[00:03.5 - Wort]` Label erscheint mit kleinem Hüpfer.
* **Nach-Animations-Haltezeit:** [X, X Sekunden] (Statischer Rahmen, um das Verständnis vor dem Übergang zu sichern)
* **Übergang raus:** [Schnitt / Grundlinien-Schwenk nach links / Fade zu Dunkel]
  

#### 1. Linienführung und Metaphern-Engine: **Rough.js**

- **Warum:** Man kann sich nicht auf statische SVGs verlassen, wenn man den organischen, handgezeichneten MinutePhysics-Look möchte. [Rough.js](https://www.google.com/url?sa=E&q=https%3A%2F%2Froughjs.com%2F) ist eine leichte Canvas/SVG-Bibliothek, die geometrische Formen, Linien und Pfade mit einstellbarer „Rauheit“, „Biegung“ und skizzenhaften Federstrichen rendert.
    
- **LLM-Freundlichkeit:** Sehr hoch. Anstatt komplexer Spline-Koordinaten ruft das LLM einfach auf:
    
    codeTsx
    
    ```
    rc.line(x1, y1, x2, y2, { roughness: 1.5, stroke: '#F8F8F2', strokeWidth: 3 });
    rc.circle(x, y, diameter, { fill: '#50FA7B', fillWeight: 3, roughness: 1.2 });
    ```

#### 2. Animations- und Timing-Laufzeit: **Remotion (React + TypeScript)**

- **Warum:**
    
    - Anders als traditionelle CSS/Browser-Animationen, die Frames auslassen können, rendert Remotion Frame für Frame (fps = 30 oder 60).
        
    - Verfügt über eingebaute Hooks wie `interpolate()` und `spring()` für Einblendungen und lineare Schreibeffekte.
        
    - Native Handhabung von Audio-Timing über `useCurrentFrame()`.
        
- **Implementierung des „Einzeichnen“-Effekts:** Für SVG-Linienstriche animiert ein LLM `strokeDashoffset` von der Gesamtlänge des Pfades auf 0.

#### 3. Typografie: **Google Fonts (Caveat oder Patrick Hand)**

- Bette die Schriftarten direkt via `@remotion/google-fonts` oder lokales `@font-face` ein.
    
- Setze das Styling strikt auf `#F8F8F2` mit maximal 1–5 Wörtern pro Callout.

#### 4. Audio-Synchronisations-Pipeline (vorgelagert): **OpenAI Whisper (Wortgenaue Zeitstempel)**

- Bevor das LLM animiert, wird der rohe Voiceover mit wortgenauen JSON-Zeitstempeln transkribiert (z. B. via Whisper `timestamp_granularities=["word"]`).
    
- Das LLM erhält das Transkript mit Zeitstempeln und wandelt diese in Framenummern um:
    
    ```
    Zielframe = Zeitstempel (Sekunden) × FPS
    ```