Li's Code Animation — Coding-animierte Mathematik-Videos

Was macht Li's Code Animation — Coding-animierte Mathematik-Videos?

EIN-SATZ-BESCHREIBUNG: Mache aus einer „schwer erklärbaren“ Stelle im Matheunterricht ein 90-Sekunden-Video mit Code-Animationen, die jederzeit pausiert und wiederholt werden können und in denen Formeln immer perfekt ausgerichtet sind.

Die technische Kernkette ist fest vorgegeben und verwendet keine KI-generierten Bilder: HTML/CSS/SVG zeichnet die Szene → GSAP erstellt das Timing → Headless Chromium macht Frame-für-Frame-Screenshots → FFmpeg codiert zu H.264 MP4. HyperFrames dient nur als Vertrag und Orchestrator – es produziert kein einziges Bild – es ist eine Druckmaschine, das Manuskript musst du selbst schreiben.

Voraussetzungen (vor Arbeitsbeginn prüfen, fehlende Punkte nicht ignorieren)

Führe im Projektstammverzeichnis npx -y [email protected] doctor aus. Fahre nur fort, wenn alle vier Punkte grün sind.

Software	Version	Verwendung	Fehlende Konsequenz	Nachinstallieren (Linux/Cloud-PC)
Node.js	≥22	CLI und Skripte	Gesamter Workflow startet nicht	nvm install 22
FFmpeg und ffprobe	4.x	Codierung, Frame-Extraktion, Parameterprüfung	Nur ffmpeg ohne ffprobe führt zu Fehlern beim Export und der Prüfung	apt install ffmpeg (enthält ffprobe) – Keine Paketmanager von Drittanbietern verwenden, sonst wird nur die Hälfte installiert
Chromium / Chrome Headless	Aktuelle Version (ca. 2 Jahre)	Frame-für-Frame-Screenshots	Keine Bilder möglich	apt install chromium – Cloud-PC meist unter /usr/local/bin/chromium
GSAP	3.x lokal	Timing und Tweening	CDN-Referenz führt zu stumm schwarzem Bildschirm ohne Fehlermeldung	Kopiere assets/gsap.min.js aus dieser Skill in das assets/-Verzeichnis des Projekts

Zusätzlich für die Selbstprüfung benötigt (Fehlen reduziert nur die Qualität der Prüfung, beeinträchtigt nicht die Ausgabe):

Tool	Verwendung	Fehlende Konsequenz
playwright-core	Automatische Screenshots der sechs Szenen	npm i playwright-core
scale-Filter von ffmpeg	Helligkeitsdiagnose der Screenshots	Automatische Degradierung auf DOM-Diagnose
zip	Erstellung des Quellcode-Pakets	Verwende tar.gz und dokumentiere die Änderung

Fünf häufige Fehler

1. ffmpeg und ffprobe müssen beide vorhanden sein; viele Systeme haben nur ersteres.
2. Keine winget/portable Pakete mischen – die Versionen im PATH stimmen dann nicht.
3. GSAP immer lokal, CDN verboten; ein CDN-Ausfall führt zu stumm schwarzem Bildschirm ohne Fehlermeldung.
4. Browser läuft im Software-Rendering (Log-Eintrag BeginFrame did not run ist normal) – keine GPU-Optimierung nötig.
5. Standard-Bitrate nur ca. 500 kbps – 1080p benötigt normalerweise 3–8 Mbps. Ohne explizite Angabe verschwimmen feine Linien auf dunklem Hintergrund. Siehe Abschnitt 6.

Routenwahl: Standard A, bei Voiceover oder komplexen Szenen B

	A-Spur · Reine Grafik (Standard)	B-Spur · Voiceover / komplexe Szenen
Geeignet für	Funktionsgraphen, Geometrie, Formelableitungen, Konzeptunterscheidungen	Mit Voiceover, Händen/Figuren/Karten/3D, Hintergrundmusik
Bildmaterial	Sechs Szenen HTML+SVG dieser Skill, feste Koordinaten	Nutze die Skill code2video: film.json-Skript + Bausteine
Ton	Standardmäßig kein Voiceover, Untertitel = Text auf dem Bildschirm; BGM später vom Benutzer hinzufügbar	TTS-Voiceover + Musik + Lautstärkeanpassung
Befehl	npx [email protected] render	node $C/tools/make.mjs <Filmverzeichnis> film
Wann wechseln	Benutzer wünscht explizit „Sprachkommentar/Vertonung/Voiceover“ oder benötigt echte Bewegungen, Karten, Figuren	Benutzer möchte nur Bild und Text

B-Spur erbt, kopiert aber nicht: Die engine/kits/presets von code2video werden nicht in diese Skill kopiert (ca. 20 MB, würde zu Versionsabweichungen führen). Stattdessen wird die bereits installierte Version aufgerufen. Details zur Brücke siehe references/two-tracks.md. Das Storyboard ist für beide Spuren gleich – das A-Spur-Storyboard kann in ein B-Spur-film.json umgewandelt werden (scripts/story-to-filmjson.mjs).

Workflow nach Aufgabenannahme

0 · Umgebungsprüfung

npx -y [email protected] doctor
ls assets/gsap.min.js

Bei Fehlen gib Installationsbefehle aus und warte, bis der Benutzer sie ausgeführt hat – tue nicht so, als ob es trotzdem funktionieren würde.

1 · Nachfragen zur Vervollständigung (Benutzer gibt oft nur einen Satz)

Ein Lehrer sagt oft nur 20 Wörter: „Mach mit Code ein Video über komplexe Zahlen. x²=-4 – gibt es so ein x?“ Den Rest spezifizierst du. Frage nur vier Dinge, jeweils mit Optionen:

Frage	Warum wichtig?	Empfohlener Standard
Wo aufhören?	Entscheidet über die mathematische Korrektheit – die einzige Stelle, die falsch sein kann	Hör auf, bevor ein neues Konzept nötig ist
Dauer und Abschnitte	Entscheidet über die Anzahl der Szenen	90 Sekunden, sechs Szenen
Wer erstellt das Storyboard?	Benutzer hat vielleicht schon eine Reihenfolge	Du erstellst es, zeigst es zuerst
Zielgruppe	Entscheidet über Tiefe und Wortwahl	Entsprechend der Schulstufe des Themas

Frage nicht nach dem Stil: Standard ist dunkles „Light Trail“-Design (vom Benutzer festgelegt). Nur wenn der Benutzer weißen Hintergrund wünscht, ändern.

Wenn der Benutzer „Mach du“ sagt, formuliere die Standardwerte in einem Satz („Ich mache es im dunklen Stil, 90 Sekunden, sechs Szenen, höre bei diesem Schritt auf. Sag Bescheid, wenn es nicht passt.“) – er muss nur nicken.

2 · Erstelle ein Storyboard mit sechs Szenen, warte auf Zustimmung

Erstelle nach dem Schema in Abschnitt 3 eine Storyboard-Tabelle: Szenennummer, Dauer, Bildelemente, Untertiteltext, welche Frage diese Szene beantwortet. Gib nur das Storyboard, schreibe keinen Code. Warte auf die Zustimmung des Benutzers („OK“), bevor du zu Schritt 3 übergehst. Dieser Schritt hat die geringsten Nacharbeitskosten – warte unbedingt auf Bestätigung.

3 · Projekterstellung

node <Skill-Verzeichnis>/scripts/init-project.mjs --name <Projektverzeichnis> --title "<Filmtitel>" --scenes 6

Das Skript: kopiert das assets/project-template/ mit der sechs-Szenen-Struktur und der index.html, kopiert GSAP, erstellt die verify-seeks.json-Vorlage. Kein manuelles npx hyperframes init – die Vorlage entspricht bereits dem Vertrag.

Der Vorlageninhalt ist die komplette sechs-Szenen-Version von „Geometrische Bedeutung von k bei antiproportionaler Beziehung“ (dunkle Version) – kann direkt neu gerendert werden, um eine identische Version zu erhalten. Beim Wechsel des Themas behalte das Koordinatensystem, die Timeline und die Stile, ändere nur Text und K-Wert – das ist viel schneller als von Null zu schreiben.

4 · Szene für Szene das Bildmaterial schreiben

• Jede Szene eine eigene Datei: compositions/scene-1-hook.html … scene-6-outro.html; die index.html dient nur der Einbindung – schreibe nicht alles in ein riesiges HTML.
• Alle Koordinaten fest codiert, kein fließendes Layout: Definiere zuerst den Ursprung und den Maßstab (z. B. OX=460, OY=620, S=96, 1 Einheit = 96 Pixel) – alle Punkte daraus berechnen.
• Kurven als Funktion sampeln, um den Pfad zu generieren – nicht von Hand annähern.
• Formeln und Farben nach references/visuals.md; mathematische Genauigkeit nach references/math-rules.md.

5 · Lint

npx -y [email protected] lint

Muss 0 Fehler, 0 Warnungen haben. Bei Fehlern entsprechend korrigieren und erneut ausführen.

6 · Screenshots der sechs Szenen (Selbstprüfung 1–3)

node <Skill-Verzeichnis>/scripts/verify.mjs --browser=/usr/local/bin/chromium

Jede Szene sucht die Sekunde mit den meisten Informationen, erstellt einen Screenshot im Verzeichnis verify-shots/ und diagnostiziert gleichzeitig: Ist GSAP geladen? Ist die Timeline registriert? Gibt es überlaufende Elemente? Gibt es JS-Fehler? Betrachte jeden Screenshot selbst – nicht einfach ausführen und fertig.

7 · Frame-Extraktion zur Überprüfung (Selbstprüfung 4)

Extrahiere 16 Frames aus der vorherigen Version des fertigen Films und erstelle ein Raster, um zu bestätigen, dass jedes Schlüsselelement tatsächlich zu dem angegebenen Zeitpunkt erscheint. Vorgehen siehe references/qa.md.

8 · Vollständigen Film rendern (Bitrate immer explizit angeben)

npx -y [email protected] render --output <name>.mp4 --quality delivery --video-bitrate 3M

--video-bitrate und --crf schließen sich gegenseitig aus – wähle eines. Ein 90-Sekunden-1080p-Film hat normalerweise eine Größe von 15–25 MB; unter 10 MB ist zu stark komprimiert.

9 · Parameter des fertigen Films prüfen (Selbstprüfung 6)

node <Skill-Verzeichnis>/scripts/inspect-video.mjs <name>.mp4 --expect-duration 90

Prüfe Auflösung, Bildrate, Gesamtframe-Anzahl, Dauer, Bitrate, Dateigröße. Bei Nichterfüllung zurück zu Schritt 8 und neu rendern.

10 · Auslieferung

zip -qr <name>-project.zip <Projektverzeichnis> \
  -x "<Projektverzeichnis>/node_modules/*" -x "<Projektverzeichnis>/verify-shots/*" \
  -x "<Projektverzeichnis>/.verify-tmp/*" -x "<Projektverzeichnis>/*.mp4"

Lieferung umfasst drei Teile: fertiges MP4, reines Quellcode-Paket (ohne MP4), drei Erläuterungen (Worum geht es? Was wurde für den Benutzer festgelegt? Welche Stellen sollen Lehrer überprüfen?). Nur die Dateien zu senden, ist keine Lieferung.

3. Sechs-Szenen-Struktur (90 Sekunden Basis)

Die Dauer kann je nach Anforderung skaliert werden, aber die Struktur darf nicht geändert werden: Zuerst fesseln, dann einen Schritt weitergehen, dann verallgemeinern, dann Schlussfolgerung, dann Fehlerkorrektur, dann Abschluss.

#	Szene-ID	Start/Dauer	Aufgabe dieser Szene	Muss enthalten
1	s1-hook	0 / 10	Stelle eine echte Frage, die zum Weiterlesen einlädt	Hauptgrafik mit Standbild + drei Zeilen Fragen rechts + Bildunterschrift unten
2	s2-q1	10 / 20	Berechne die Schlüsselgröße im einfachsten Fall	Koordinatenachsen, Kurve, beweglicher Punkt, Rechteck/Dreieck, zeilenweise Untertitel
3	s3-other	30 / 18	Überprüfe dieselbe Schlussfolgerung in einem anderen Quadranten	Vier Kurven nacheinander hervorheben + Schlussfolgerungs-Karte
4	s4-triangle	48 / 15	Zerlege die Schlussfolgerung in zwei Hälften, gib die Prämisse	Geometrischer Block + rechter Winkelmarkierung + drei Zeilen Schlussfolgerung
5	s5-table	63 / 12	Korrigiere den häufigsten Fehler	Feine Tabelle + Fehlerkarte (durchgestrichen) + korrekte Karte + Leitspruch
6	s6-outro	75 / 15	Wiederhole die Schlussfolgerung mit einem anderen Koordinatenmaßstab, schließe ab	Verkleinerte Version derselben Grafik + drei Zeilen zentriert + pulsierende Hervorhebung

Einbindung in index.html: body-Hintergrund fest codiert (dunkel #050a14), sechs Szenen track-index 0–5 fortlaufend, start/duration mit obiger Tabelle abgeglichen, gesamter Film title schreibt „Thema | Untertitel-Name".

4. Mathematische Genauigkeit (Fehler = Unterrichtsfehler)

Harte Einschränkungen, die alle im Bild umgesetzt werden müssen. Vollständige Liste und Gegenbeispiele siehe references/math-rules.md.

1. Nur Symbole ableiten, keine Zahlen einsetzen. Bei antiproportionaler Beziehung nur bis |k| und ½|k|, kein konkreter Wert wie „4" im gesamten Film. Bei allgemeinen Schlussfolgerungen analog.
2. Brüche immer mit horizontalem Bruchstrich, kein Schrägstrich, keine a/b-Schreibweise.
3. Dreieckssymbol als tiefgestellter Index rechts unten von S, nicht auf gleicher Höhe mit dem Buchstaben.
4. Verwende „gemeinsamer Punkt", nicht „Schnittpunkt".
5. Formulierung für negative Fälle fest: „Für k<0 ist es in den Quadranten II und IV genauso."
6. Ein Konzept im gesamten Film mit einem Wort, keine wechselnden Formulierungen; Untertitelsprache mit dem Lehrbuch abgestimmt.
7. Bevor eine Schlussfolgerung erscheint, muss die Grundlage im Bild bereits dargestellt sein; keine Schlussfolgerung zuerst, dann nachträglich die Grundlage.

5. Visuelle Richtlinien (Standard: Dunkel mit Lichtspuren)

Vollständige Farbwerte und Umsetzung siehe references/visuals.md. Merke dir die drei eisernen Regeln für dunklen Hintergrund, alles andere ist anpassbar:

1. Flächenfüllung auf 18% reduzieren und einen Rand hinzufügen – 40% Füllung auf dunklem Hintergrund verschwimmt zu Nebel.
2. Dreiecke/geometrische Blöcke mit „Bernstein-Kontur + sehr heller blaugrüner Füllung" – Goldene Vollfläche auf Dunkelblau wird zu schmutzigem Oliv.
3. Tabellen ohne Hintergrundfarbe, mit feinen Linien getrennt – Weiße Tabellen auf dunklem Hintergrund ergeben drei zusammenhängende Zeilen.

Schriftgröße insgesamt 4 Punkt größer als bei weißem Hintergrund. Oben links feste Eckenmarkierung Vibe Wissenspreis ｜ Untertitel dieser Szene, 26px, Buchstabenabstand 5px, left 84 / top 70.

Eiserne Schriftregel: Drei Rollen – Chinesisch Noto Sans CJK SC (思源黑体), lateinische Beschriftungen und Zahlen Inter, mathematische Symbole TeX Gyre Termes Serifen-Kursiv (aus gleicher Familie wie Times, identisch mit Buchstabenformen in Lehrbüchern). @font-face muss innerhalb des <style>-Tags im <template> geschrieben werden (wenn im <head> platziert, wird es vom Framing-Harness verworfen und die Schriftart wird still geladen). Details und vier Fallstricke siehe references/visuals.md Abschnitt Null.

6. Rendering und Bitrate

Parameter	Wert	Erläuterung
--quality	delivery	Hohe Bildqualität; Standardqualität reduziert Bitrate
--video-bitrate	3M	Muss explizit angegeben werden; schließt sich mit --crf aus
--resolution	Standard landscape (1920×1080)	4K nur bei expliziter Anforderung
--resume	Nach Unterbrechung fortsetzen	Bereits gerenderte Frames werden nicht wiederholt

Kriterien: 90 Sek. → Größe 15–25 MB, Bitrate über 1,5 Mbps, 2700 Frames, Dauer 90,000000 s. Bei Abweichung neu rendern, nicht ausliefern.

Bei unzureichender Schärfe (Test: --video-bitrate wirkungslos)

Test Nov. 2026: --video-bitrate 30M ergibt trotzdem nur 1,8 Mbps, auch mit --quality delivery. Die integrierte Bitrate wird also weitgehend ignoriert – die Auslieferungsqualität muss man selbst codieren. Wenn der Benutzer „Unschärfe" meldet, diesen Weg gehen, nicht immer wieder --video-bitrate anpassen:

# 1) Nur Frames rendern, nicht codieren (2700 Frames / ca. 2,4 GB / 16 Minuten)
npx -y [email protected] render --format png-sequence --output pngseq

# 2) Selbst codieren. Viel statischer Inhalt, feine Schrift – CBR statt CRF (CRF liefert nur 0,5 Mbps, Plattform-Transkodierung wird unscharf)
ffmpeg -v error -framerate 30 -i pngseq/frame_%06d.png \
  -c:v libx264 -b:v 4M -minrate 4M -maxrate 4M -bufsize 8M \
  -preset slow -tune animation \
  -x264-params "nal-hrd=cbr:aq-mode=3:chroma-qp-offset=-2" \
  -pix_fmt yuv420p -movflags +faststart -y out.mp4

chroma-qp-offset=-2 ist für feine bunte Linien: Cyan- und bernsteinfarbene Schrift verlieren bei 4:2:0-Chroma-Sampling an den Rändern Farbe – dieser Parameter gibt dem Chroma etwas mehr Bitrate als der Luminanz.

Codierung dauert ca. 2 Minuten, Ergebnis: 90 s / 43 MB / 4 Mbps. Die 40-MB-Grenze ist der Sweet Spot für „im Unterricht abspielbar, nach Plattform-Transkodierung noch scharf". Dateien unter 10 MB sehen auf dem Handy sofort weich aus. Für Plattformen (Video/Weibo) eine zusätzliche Version mit -b:v 8M erstellen (ca. 85 MB) – nach der Plattform-Transkodierung bleibt die Schrift scharf.

Nicht auf 4K-Upsampling hoffen: Bei Software-GPU dauert es über eine Stunde für 2700 Frames (Test: 20 Min = nur 8%) – das passt nicht in den Zeitrahmen.

Nach der Codierung einen Frame 1:1 betrachten (crop=760:300 für Schriftkanten auf Blockartefakte/Klingeln prüfen) – nicht nur das gesamte Miniaturbild betrachten (Miniaturbild zeigt Unschärfe nicht).

Soundeffekte (punktuelle Effekte, kein Hintergrundmusik)

Wenn der Benutzer „etwas Sound", „zu leise" sagt, aber keine Hintergrundmusik wünscht, nur punktuelle Soundeffekte einfügen: Jede Aktion im Bild wird einmal abgespielt, dann ist es wieder still. Hintergrundmusik in Mathe-Erklärvideos beeinträchtigt das Denkgefühl und überdeckt die Stimme des Lehrers.

# 1) Timeline nach Aktionen pro Szene schreiben (absolute Sekunden), Beispiel siehe assets/sfx-events.example.json
python3 <Skill-Verzeichnis>/scripts/make-sfx.py events.json -o sfx.wav --duration 90

# 2) Videostream kopieren, nur Audiospur mischen (kein Pixel am Bild ändern)
ffmpeg -v error -i in.mp4 -i sfx.wav -c:v copy -c:a aac -b:a 128k -shortest \
  -movflags +faststart -y out.mp4

Sechs Soundeffekte, jeder für eine Sache: brush Kurven/Streckenwachstum, slide gleichmäßiges Gleiten eines beweglichen Punktes, tick Erscheinen einer Textzeile, ding Karte/Titel/Frage, thump die entscheidende Größe, chime ✓/Leitspruch/Abspann.

Drei Regeln:

1. Nicht jede Zeile vertonen – nur „Bildaktionen" auswählen, bei 90 Sekunden Film ca. 30 Punkte sind ausreichend – zu viele wirken hektisch.
2. Spitzenpegel unter -16 dBFS – tick bei ca. -29 dB, thump/ding bei ca. -24 dB – hörbar, aber nicht aufdringlich.
3. Nach dem Mischen mit ffmpeg -ss <t> -t 0.6 -af volumedetect stichprobenartig prüfen: An Stellen mit Soundeffekt sollte der Pegel bei -24~-30 dB liegen, an leisen Stellen bei -91 dB (echte Stille). Wenn der Pegel an Stellen mit Soundeffekt über -18 dB liegt, leiser machen.

7. Sechs Selbstprüfungen (vor der Auslieferung alle bestehen)

#	Prüfung	Befehl	Kriterium für Bestehen
1	Strukturkonformität	npx -y [email protected] lint	0/0
2	Sechs Szenen mit Bildmaterial	scripts/verify.mjs	Alle sechs Szenen haben Bilder, kein schwarzer Bildschirm, keine JS-Fehler
3	Keine überlaufenden Elemente	Wie oben, Diagnosebericht prüfen	Keine Überlaufeinträge; Untertitelabstand zum unteren Rand ≥80px
4	Timing korrekt	Frame-Extraktion und Raster (siehe qa.md)	Jedes Segment erscheint zum angegebenen Zeitpunkt, keine leeren Abschnitte
5	Mathematische Korrektheit	math-rules.md Zeile für Zeile mit Untertiteln vergleichen	Alle sieben Regeln eingehalten
6	Parameter des fertigen Films	scripts/inspect-video.mjs	Auflösung/Frame-Anzahl/Dauer/Bitrate/Größe alle erfüllt

Prüfungen 1, 2, 3, 4, 6 erfolgen maschinell mit menschlicher Überprüfung; Prüfung 5 kann nur von einem Menschen durchgeführt werden – sie ist die einzige, die einen Unterrichtsfehler verhindern kann.

8. Regeln für Änderungen und Iterationen

Wenn ein Benutzer Feedback gibt, muss es im „Dreier-Paket" kommen: Welche Szene / Welche Sekunde / Was soll geändert werden. Auf vage Aussagen wie „Hier stimmt was nicht" muss nachgefragt werden – nicht den gesamten Abschnitt neu machen.

Nach einer Änderung müssen die relevanten Prüfungen erneut durchgeführt werden: Bei Änderungen an Koordinaten oder Schriftgröße → 1+2+3; bei Änderungen am Text → 5; bei Änderungen in mehreren Szenen → alle sechs Prüfungen.

Es ist effizienter, mehrere Änderungen auf einmal zu sammeln, als sie einzeln hintereinander zu machen, aber bei großen szenenübergreifenden Änderungen muss das Storyboard erneut bestätigt werden.

Beispielhafte reale Überarbeitungsprozesse (zehn Beispiele) siehe references/revisions.md.

9. Verbotene Handlungen

• assets/gsap.min.js fehlt oder durch CDN ersetzt
• scaleX/scaleY + transformOrigin für SVG-Streckenwachstum verwenden (wächst nur von einem Ende)
• onUpdate zum Antreiben von SVG-Eigenschaften verwenden (wird bei Seek nicht ausgelöst, Screenshots sind falsch)
• Tweening von Eigenschaften, die ein Reflow auslösen (z. B. letterSpacing, width)
• Bei d="" zuerst getTotalLength() aufrufen (muss zuerst einen Platzhalter-d haben)
• Rendern ohne Angabe der Bitrate
• Gesamten Inhalt in ein einziges HTML schreiben
• Formeln mit Schrägstrich für Brüche verwenden
• Bei Lieferung nur MP4 senden, ohne zu sagen, was geändert wurde
• <sup> in SVG <text> einfügen (HTML-Tags in SVG führen zu verschobenen Texten; hochgestellte Zeichen immer mit ²-Zeichen)
• Auf einem vollen (1920) Container eine Scale-Pulsation durchführen (4% Vergrößerung führt zu Grenzüberschreitung, Prüfung 3 erkennt sofort Überlauf; Scale auf einem Inline-Block innerhalb des Containers platzieren)
• Die absolut positionierte Durchstreichung auf Geschwisterebene des Ziels platzieren (geht über die gesamte Spalte; in den eigenen relativen Positionierungscontainer des Textes legen)
• repeat: -1 für zyklische Pulsation verwenden (lint meldet Fehler, da Sub-Kompositionen kein data-duration haben; auf endliche Wiederholungen beschränken)
• Beliebige temporäre .html-Dateien im Stammverzeichnis des Projekts hinterlassen (wird als zweite Root erkannt, lint meldet „nur eine index.html erlaubt")
• Bei zwei Pfaden für einen Kurvenzug (heller Pfad + Leuchteffekt) nur dem hellen Pfad dasharray/dashoffset zuweisen (der Leuchteffekt erscheint vorzeitig, sieht aus wie „noch nicht fertig gezeichnet, aber schon ein dunkler Schatten"; beide müssen gesetzt werden, gleichzeitig tweenen)
• Mit --video-bitrate versuchen, Schärfe zu erzielen (wirkt nicht, siehe Abschnitt 6)
• Nur CRF für Codierung verwenden, ohne auf die Größe zu achten (CRF liefert bei statischem Inhalt nur 0,5 Mbps, Plattform-Transkodierung wird unscharf)
• Systemstandardschriftart für Buchstaben und Zahlen verwenden (system-ui im Headless Chromium ist DejaVu Sans, langweilig; immer "Inter", sans-serif)
• Im font-family chinesische Namen schreiben (z. B. "Noto Sans SC", dann wird lint font_family_without_font_face melden, wenn nicht installiert)
• Koordinatenachsen nur als zwei gerade Linien zeichnen, ohne Richtungspfeile an den Endpunkten (Lehrbuchstandard: x nach rechts, y nach oben, jeweils ein gefüllter Pfeil, Schreibweise siehe references/visuals.md Abschnitt „Koordinatenachsen")

9.5 Schriftarten in alten Projekten aktualisieren

Alte Projekte (Schriftart noch system-ui) müssen nicht neu erstellt werden – ein Befehl aktualisiert sie auf die Drei-Rollen-Schriftarten:

node scripts/apply-fonts.mjs --project <Projektverzeichnis>

Es macht fünf Dinge: Kopiert Schriftarten in assets/fonts/, fügt @font-face in das <style>-Tag des <template> ein (im <head> würde es vom Framing-Harness verworfen), setzt für .row/.cap/.tag-Container Inter, umschließt jedes bloße x/y/k/S im Text mit <i> (reines CSS betrifft keine bloßen Textknoten – der häufigste Grund, warum die Schriftart nicht geändert wird), ersetzt font-family in SVG durch 'Termes', serif und setzt x/y/k kursiv. Mathematische Symbole einheitlich calc(1em + 2px), um die visuelle Schrumpfung von Serifen im Vergleich zu Sans-Serifen auszugleichen. Idempotent – erneute Ausführung führt nicht zu doppelten Einfügungen.

Danach wie gewohnt: lint → verify → render, muss neu gerendert werden – die Schriftart wirkt nicht auf alten fertigen Filmen.

10. Referenzdateien

Datei	Wann lesen
references/pipeline.md	Beim ersten Mal oder wenn man die vier Schritte im Zusammenhang erklären muss
references/math-rules.md	Vor dem Schreiben von Formeln und Schlussfolgerungen
references/visuals.md	Beim Festlegen von Farben, Schriftgrößen, Karten, Formellayout
references/prompts.md	Beim Nachfragen zur Vervollständigung, Schreiben von Storyboards, Erklären, wie man den ersten Satz sagt
references/revisions.md	Wenn ein Benutzer Feedback gibt oder man dem Lehrerteam erklären muss, „wie zehn Überarbeitungen ablaufen"
references/qa.md	Bei jeder Selbstprüfung, um zu entscheiden, ob ein Film ausgeliefert werden kann
references/two-tracks.md	Wenn Voiceover/Musik/Hände/Karten/Figuren benötigt werden, für Spurwechsel zu B
assets/project-template/	Wird bei der Projekterstellung von init-project.mjs kopiert – nicht von Hand ändern
assets/gsap.min.js	Wird bei der Projekterstellung in das assets/-Verzeichnis des Projekts kopiert