remotion-design-system

Remotion Koubo-Packaging-Designsystem (v1 Hub)

Stilziel: Nachbildung des HUD-Packagings der Referenz-Koubos (Referenzbibliothek im Projekt refs/). Diese Datei ist der hart codierte Hub: Eiserne Regeln + Token-Semantik + Komponentenübersicht + Fehlersammlung; Detailregeln befinden sich in references/ (Niederschlag der tiefgehenden Analyse vom 2026-07-16, die 77 Abweichungen aufdeckte). Wenn eine visuelle Entscheidung nicht im System dokumentiert ist, ergänze sie zuerst in der entsprechenden Datei, bevor du Code schreibst.

Routingtabelle (Was ist zu lesen, bevor man schreibt)

Bereich	Datei	Zuständigkeit
Spezifikationstabelle (erst prüfen, dann schreiben)	references/specs.md	Gemessene Werte der Referenz: Kartenbreite/Schriftgröße/Position/Frame-Anzahl – vor dem Zusammenbau prüfen. Wenn nicht in der Tabelle, dann selbst messen und nachtragen. Kein Schätzen nach Augenmaß
Layout & Komposition	references/layout.md	Drei Zonen, Takeover-Mechanismus (A-Level ohne PiP, Abdunkeln + Zeitlupe wurde abgelehnt), ein Schwerpunkt pro Bild, Schablonen, Verzahnungsstellen
Typografie	references/typography.md	Einzige größte Schrift, h1-Pflicht, Hero-Sandwich, SideLabel-Titelvariante
Farbe & Textur	references/texture.md	Jelly-Blöcke/Glow, SURFACE-Hell/Dunkel-Varianten, Stempel-Linienstärke, max. 2 Farbsysteme pro Bild, keine nackte Schrift auf hellen Flächen
Motion	references/motion.md	useEnter/useExit, Beat-Muster, Build-up, Einsatzintervalle, Breathe, Netto-Bildschirm
Informationsdesign	references/infographic.md	Diagrammauswahl, grafische Metaphern, Waffle, große Zahlen (3 Schichten), Mikrografik-Vokabular
Erzählung/Rhythmus/Untertitel/Material/Ton	remotion-assembly's references/	narrative / rhythm / subtitle / broll / audio
Fehlersammlung (Symptom → Reparaturindex)	Eigenständiges Skill remotion-gotchas-index	Hier die Position der Reparaturmethode für jede "Fehler #NN" im gesamten Text suchen; Renderanomalien/falsche Bilder zuerst hier prüfen

Substrat-Checkliste (Grundlage – vor Kaltstart / neuem Film prüfen)

Dieses Designsystem ist ein gemeinschaftlich genutzter Sockel im gesamten Repository, der nicht für jeden Film neu erstellt wird. Die folgenden Dateien sind die Voraussetzung für den gesamten Ablauf (Assembly „Eingangsprüfung → Bildausgabe → Drei Gates“ + Motion §12 Gate); ein neuer Film übernimmt sie standardmäßig und erstellt nur seine eigene Composition + Untertitel + Szene, nicht den Sockel neu. Kaltstarter (die nicht src/ lesen dürfen) landen hier oft im Leeren – prüfe zuerst diese Tabelle auf Vollständigkeit; um konkrete Werte zu erhalten, öffne die entsprechende Datei und lies sie, erwarte nicht, dass das Skill sie dir ausspuckt.

Sockeldatei	Enthält	Verwendung beim Kaltstart
src/design/tokens.ts	Einzige Quelle der Wahrheit für Werte: COLOR (4 semantische + Basisfarben hex), SURFACE, FONT, GRADIENT, SIZE-Stufen (kicker…mega), GRID, RADIUS, SAFE, MOTION-Frames	Wenn du SIZE.mega, semantische Farb-Hex usw. konkrete Pixel/Farben brauchst, lies sie direkt aus dieser Datei – das Skill gibt sie bewusst nicht wieder (um Snapshots und Code-Drift zu vermeiden, siehe §1); wenn die Datei fehlt, fehlt der Sockel, erstelle ihn zuerst
src/design/*.tsx	Komponentenbibliothek (vollständige Tabelle in §3: SideLabel/HeroText/Chip…) + FontGuard.tsx (Schriftartwächter, Fehler #01) + qc.tsx (QC-Sonde QcProbe: liest frame-genau [data-qc]-Boxen und erkennt Überlappungen, Fehler #29)	Bevor du Verpackungselemente schreibst, suche die Komponente in §3 und finde die Datei
src/design/motion.ts	useEnter/useExit/usePop Basis-Hooks + MOTION-Konstanten	Die in motion.md referenzierten Hooks befinden sich hier
src/design/fonts.ts	@fontsource lokale Schriftart-Registrierung (Fehler #01: Webfonts würden stillschweigend auf Songti/Sans-Serif-Fallback zurückfallen)	package.json sideEffects muss diese Datei enthalten
src/koubo/scenes/shared.tsx	Assembly-Gate-Viererset Enter/DimAfter/Exit/ClearOut (motion §12) + Place-Positionierungsbox + qcAllow QC-Verzahnungs-Whitelist (assembly §2.5 Gate ①)	Beim Zusammenbau von Szenen diese Wrapper direkt verwenden, nicht opacity selbst programmieren
src/Root.tsx	Composition-Registrierung (vorhandene <Composition id="Koubo-0715-01" fps={30} …/>)	Für einen neuen Film eine neue <Composition> mit eigener ID hinzufügen; das Segment-Rendering-Skript muss diese ID verwenden (siehe assembly §6 render-service ID-Änderung)
src/koubo/	Film-spezifisch: subtitles-<Filmtitel>.ts / SubtitleTrack.tsx / <Hauptkomponente>.tsx / scenes/SceneNN.tsx	Für einen neuen Film nur in diesem Ordner neue Dateien erstellen (Struktur siehe assembly §4)

Wirklich von Null (src/ komplett leer): Bevor der Sockel steht, kann der Assembly-Prozess nicht starten (keine Token abrufbar, kein erster Frame, keine drei Gates). Reihenfolge = erst Sockel, dann Assembly: ① tokens.ts als Quelle der Wahrheit → ② fonts.ts + FontGuard.tsx (Fehler #01) → ③ motion.ts drei Hooks → ④ Komponentenbibliothek §3 → ⑤ src/koubo/scenes/shared.tsx Gate-Viererset + Place/qcAllow → ⑥ src/design/qc.tsx QC-Sonde → ⑦ src/Root.tsx Composition registrieren. Verwende die vorhandene src/design als Referenz für die Implementierung; nach der Portierung Werte dennoch aus tokens.ts lesen, nicht im Skill hartkodieren.

0. Sechs eiserne Regeln

1. Standardmäßig Informationen auf der linken Seite, Personen auf der rechten Seite: Der Informationsbereich befindet sich standardmäßig links (Benutzerentscheidung), der HUD-Anker wächst vertikal auf der linken Seite, der Personenbereich ist tabu; aber frage den Benutzer bei jedem Film nach dem Layout – nimm dir nicht selbst die Entscheidung, Ausnahmen für die drei Zonen und den Takeover siehe references/layout.md Regel 1.
2. Jeder Text besteht aus zwei Schichten: Englisch UPPERCASE mit weitem Zeichenabstand als Kicker (klein) + Chinesisch fett/schwarz (groß). Komponenten mit nur einer Textebene gelten als unvollständig.
3. Ein Satz hebt nur ein Wort hervor: In chinesischen Titeln maximal eine farblich hervorgehobene Stelle; die Farbe muss aus dem Vier-Farben-Semantiksystem stammen (blau/grün/gelb/rot).
4. Reales Material ist der Hauptinhalt, Remotion ist ein Synthesizer, kein Zeichenbrett (Aufwertung vom 2026-07-16, seg01-Entscheidung): „Produkterfahrungs“-Szenen (Tippen/Generieren/Oberfläche/Demo) müssen als echtes Material geschnitten werden – Selbstaufnahme > offizielles Video > Web-Screenshot > UI-Simulationskarte; Handzeichnungen nur für HUD-Ebene (SideLabel/Untertitel/Diagramme/Stempel/grafische Metaphern). Mit CSS die Arbeit professioneller Motion-Design-Teams nachzubauen, ist zum Scheitern verurteilt, der Grund, warum „es fühlt sich immer irgendwie falsch an/weit entfernt“ ist, ist die Verwendung eines Zeichenbretts für die Arbeit eines Synthesizers. Erfassungs- und Schnitt-Pipeline siehe assembly references/broll.md.
5. Keine nackte Schrift auf hellen Flächen (Entscheidung vom 2026-07-16 tiefgehende Analyse, die 6 Bereiche betrifft – die übergreifende Regel Nr. 1): Auf hellem Hintergrund (weiße Tafel/weiße Wand/heller Takeover-Hintergrund) ist Text ohne Hintergrund verboten – jeder Text muss auf einer dunklen Platte (SURFACE.darkPlate), einer Karte oder einer hellen Oberflächenvariante sitzen; textShadow ist keine Lösung. Details siehe references/texture.md.
6. Ein Bild, eine dominante Schicht: Jeder Informationsbildschirm hat genau ein „größtes Element“; maximal 2 Chip-große kleine Elemente außerhalb des Hauptbereichs. Details siehe references/typography.md und layout.md.

1. Design-Tokens

Einzige Quelle der Wahrheit = src/design/tokens.ts, alle Komponenten dürfen nur Werte von dort importieren. Dieser Abschnitt beschreibt nur die Semantik und Verwendungsregeln, nicht die Werte – zuvor gab es bereits einmal Snapshots und Code-Drift (2026-07-16 festgestellt, dass kicker/h1 usw. an mehreren Stellen nicht übereinstimmten), der Code hat Vorrang.

• Vier-Farben-Semantik (einzige erlaubte Akzentfarben): blau = Definition/Methode/neutrale Weiterentwicklung; grün = positiv/niedrige Einstiegshürde/bereits aktiv; gelb = Chance/Warnung/Kontroverse/Wendepunkt; rot = negativ/Falle/Krise. Grundfarben: white, grey, greyDim, cardBg, cardStroke.
• Schriftarten (zwei Ebenen, nicht mischen): MG-Verpackungsebene – FONT.zh = Noto Sans SC (einzige chinesische Schriftart für die Verpackungsebene, Titel durchgängig FONT.zhHeavy); FONT.en = Inter (Kicker/Fließtext/Zahlen); FONT.enTitle = Archivo Black (englische Titel und große Schlussfolgerungen, schmal und extrafett, weight durchgängig 400 – Inter hat nicht die Kraft für große Schriften, Ergebnis des Schriftvergleichs vom Juli 2026). Untertitelebene – FONT.subZh = PingFang SC 400 / FONT.subEn = Inter 300 (nach fünfstufigem Vergleich am 2026-07-26 vom Benutzer entschieden): Untertitel sind eine Begleitebene, keine Verpackungsebene; nur eine schlanke Schrift hat die Textur von Apple-Untertiteln und unterscheidet sich von den fetten schwarzen MG-Titeln, ohne Aufmerksamkeit zu stehlen; die alte Version verwendete durchgängig Noto 700, was wie ein Aufkleber wirkte. PingFang SC ist eine macOS-Systemschriftart und wird nicht über @fontsource gebündelt – Rendering auf dem lokalen Mac ist in Ordnung; unter Windows/Linux wird auf das gebündelte Noto Sans SC 400 (Schlankstufe) zurückgegriffen (in fonts.ts vorhanden, ähnliches Aussehen, aber nicht identisch); vor dem Rendern auf verschiedenen Maschinen zuerst einen Frame rendern, um die Untertiteloptik zu überprüfen. Die englische Zeile in Untertiteln muss eine proportionale westliche Schriftart verwenden, siehe Fehler #42.
• Große Schlussfolgerungen sind immer reine semantische Farbe + textShadow; backgroundClip: text-Farbverlaufstext ist verboten (Fehler #06); GRADIENT ist nur für Farbflächen/Striche.
• Schriftgrößen nur aus der SIZE-Stufenleiter (kicker / subSmall / chip / subZh / subEn / card / h2 / h1 / mega) erlaubt; keine externen Größen; 1080p-Basis, 4K-Ausgabe ×2.
• Abstände immer Vielfache von GRID (8px); Eckenradien mit RADIUS; Sicherheitszone mit SAFE (SideLabel-Anker, Stapel-Linkskante, Untertitel-Abstand zum Boden; permanente Karten überschreiten nicht x55%, Personen-Tabu-Zone/Rechtszone-Koordinaten siehe layout.md; Untertitel-Tabu-Zone y>82%, Unterkante linker Bereich ≤ y840 – das ist eine strengere linke Grenze als y82%).

2. Kapitel-SideLabel (durchgehend im gesamten Film, Komponente mit höchster Priorität)

• Struktur: │ (4px vertikale Linie, semantische Farbe) + ENGLISH KICKER · Chinesischer Ausdruck (erste Zeile, Englisch in Kicker-Spezifikation + semantischer Farbe, Chinesisch weiß 34px) + zweite Zeile grau 24px Ergänzungsinfo.
• Position: Fest SAFE.sideLabel; beim Wechsel altes Label 12 Frames ausblenden, neues Label 15 Frames von links einschieben.
• Benennung mit Nummerierungssystem: SCENE 01, PATH 1/2/3, Gegensatzpaare (DISSOLVED·01.. vs IMMUNE·01..).
• Farbe = semantische Stimmung des Abschnitts, siehe Token-Kommentare. Referenz: refs/01-Layout-und-SideLabel/.

3. Komponenten-Spezifikationsübersicht (Details folgen bei Implementierung, zuerst Referenzbilder ansehen, dann coden)

Komponente	Wichtige Spezifikationen	Referenz
BilingualSub	CN 52 weiß+schwarzer Schatten / EN 28 reinweiß, unten mittig, immer oberste Schicht	Beliebige refs
HeroText	Kicker + chinesisch h1/h2, Hervorhebungswort in semantischer Farbe; Varianten: rote Durchstreichung zur Korrektur, gelber Pinsel-Unterstrich, schräger Stempel	refs/02
Chip	Schwarze Karte RADIUS.chip + farbiges Icon + 34px Text, ein farbiges Hervorhebungswort möglich	refs/03
Checklist	Chip vertikal gestapelt, Zeile für Zeile einblenden; inaktive Zeilen opacity 0.35	refs/03
InfoCard	Icon + Kicker + 44px Titel + blaues Hervorhebungswort	refs/01
StepList	①②③ Kreisziffer + Chinesisch + englischer kleiner Kicker, schrittweise aufleuchtend	refs/04
FlowChain	Schwarze Karte + → Pfeile verbunden, Knoten erscheinen nacheinander	refs/04
CompareCard	Logo + Name + rot × Schwächen-Chip + grün ✓ Stärken-Chip, vertikal gestapelt	refs/04
Formel	Großer Buchstabe A Symbol B (>, », ⇄, =), Symbol in semantischer Farbe	refs/05
BigNumber	Inter große Zahl + kleine Einheit + Kicker; Counter mit Spring-Rolleffekt	refs/05
BarChart	Datenbalken mit 8px abgerundeten Ecken; hervorgehobener Balken in Gelb + Krone-Chip oben; restliche grau	refs/05
CurveOverlay	2–3px gelbe Kurve direkt über B-Roll gelegt, rechter Endpunkt beschriftet	refs/05
Timeline	Typ mit zwei Endpunkten/Ereignis mit roten/grünen Ergebnis-Chips	refs/05
ScoreBoard	Grün:Rot große Punktzahl	refs/05
PhoneMockup	iPhone-Rahmen + Farbverlauf-Strich-Glow + eingebetteter Screenshot-Scroll	refs/06
WindowCard	Mac-Ampel + App-Icon + Funktions-Chip, dynamischer Inhalt	refs/04
QuoteDoc	Screenshot-Karte mit weißem Hintergrund + gelbe Leuchtmarkierung + schwarze chinesische Übersetzungsleiste overlay	refs/07
TweetCard	Avatar + Identitäts-Kicker + rote große Schlussfolgerung + Views-Chip	refs/07
PersonCard	Runder Avatar + Name + Identität klein + Institutions-Chip	refs/07
Stempel	Schräg -8°~-6° Umriss-Stempel-Schrift (rot/grün), Stempel-Animation = scale 1.3→1 + leichte Vibration	refs/08
MatrixIcon	Quadratmatrix-Icons: rot=auflösbare Fraktion / grün=immune Fraktion	refs/08
CardWall	Weiße kleine Karten von 3→20 Stück nach und nach füllend, simuliert Nachfrageexplosion	refs/06
BeforeAfter	Zwei Icon-Karten + blauer Pfeil + darunter Schlussfolgerungs-Chip	refs/04
Breathe	Idle-Leichtbewegungs-Wrapper: Atmung scale ±0.6% + Float ±3px, phase versetzte Phase gegen Synchronität; um das Hauptelement wickeln	src/design/Breathe.tsx
BrickWall	Versetzte goldene Ziegelsteinwand, Stein für Stein aufgebaut + mittiges Etikett, Metapher „Mauer/harte Hürde“	src/design/BrickWall.tsx
UnitMatrix	N Gruppen von Quadratmatrizen, Raster für Raster aufleuchtend; fillRatio Waffle-Modus (73% Datenfeld)	src/design/UnitMatrix.tsx
CloneCascade	Quell-Icon-Karte + Nachahmungen nacheinander einblenden + Warn-Chip, Metapher „kopiert/destilliert“	src/design/CloneCascade.tsx

Inline-Komponenten für Batch-Szenen (2026-07-17 für Batch-Produktion hinzugefügt, noch nicht zu gemeinsamen Komponenten hochgestuft)

Die folgenden Komponenten leben derzeit nur in einzelnen Szenen und sind gekennzeichnet mit „Scene-Inline, bei zweiter Wiederverwendung in src/design als gemeinsame Komponente hochstufen und Spezifikationszeile in specs ergänzen“ – wenn du in einem neuen Film auf eine ähnliche Anforderung stößt, suche zuerst hier, nicht neu erfinden:

Inline-Komponente	Position	Funktion	Hochstufungsbedingung
DissolveGrid	scenes/Scene08.tsx	Auflösungsgitter: Quadrate der auflösbaren Fraktion lösen sich Zelle für Zelle auf, zentraler ⚡ Hintergrund wird ausgeblendet, weiße Kontur schwebt	Bei zweiter Wiederholung der „Fraktion auflösen“-Metapher
VerdictBox	scenes/Scene17.tsx	Rot-grüne Spiegel-Urteilsbox: ≈400×170 Umriss-Leerrahmen zuerst + Header + 3 Chips waagerecht nacheinander (rot zuerst voll, grün später voll, erzeugt „Auf welcher Seite stehst du?“-Spannung)	Bei zweiter „VS-Urteil“-Aufwertung
NamePlate + CtaBadge	scenes/Scene19.tsx	End-CTA waagerecht unten: NamePlate zuerst als Anker → vier Aktionsabzeichen nacheinander einblenden (letztes Kommentar-Abzeichen am breitesten = Betonung)	Bei zweitem End-CTA-Abschluss

Icon-Richtlinien

• Icons durchgängig lucide-react lineare SVG-Icons verwenden, Farbe semantisch (COLOR[accent]), strokeWidth 2.5; Emojis sind verboten (farbige runde Blöcke kollidieren mit dem monochromen linearen Stil der Referenz, Lehre aus der dritten Abnahmephase im Juli 2026).
• Die icon-Eigenschaft von Chip / Checklist / SideLabel akzeptiert ReactNode: icon={<Lock size={26} strokeWidth={2.5} />}.

Textur-Richtlinien → references/texture.md

Jelly-Block-Farbverläufe, gleichfarbiger Glow, Vignette, echte Logos, SURFACE-Hell/Dunkel-Varianten, Stempel-Linienstärke sind alle in texture.md (seit 2026-07-16 ist dies die einzige Quelle der Wahrheit für Textur; der alte Text in diesem Abschnitt wurde dorthin verschoben).

4. Motion-Regeln → references/motion.md

useEnter/useExit, Beat-Eingänge, Einsatzintervalle, Breathe, Netto-Bildschirm zwischen Kapiteln, Verbote sind alle in motion.md (seit 2026-07-16 ist dies die einzige Quelle der Wahrheit für Motion; der alte Text in diesem Abschnitt wurde dorthin verschoben; beachte, dass die alte Regel „alte Informationen bleiben transparent sichtbar“ durch „Einsatzintervalle + Exit-Disziplin“ ersetzt wurde).

5. Selbstprüfung vor Export (vor jedem Rendern durchführen)

1. grep-Prüfung, ob Komponenten Farb-/Schriftgrößen-/Schriftartenwerte außerhalb der Tokens enthalten.
2. Überprüfen, ob alle permanenten Karten faceZone / subtitleZone überschreiten.
3. Prüfen, ob jeder Titel maximal eine Hervorhebung hat; ob englische Kicker durchgängig großgeschrieben sind + Zeichenabstand haben.
4. 3–5 Keyframes extrahieren und mit Referenzbildern in refs/ nebeneinander vergleichen; wenn sie nicht ähnlich sind, erklären, welches Token abweicht, und das Token ändern, nicht die Komponente.

6. Fehlersammlung

#01 Chinesisch wird stillschweigend zu Songti/Sans-Serif (2026-07-15 · Erster Tag des Designsystems)

• Symptom: Im Render/Screenshot wird Chinesisch zu Songti/Sans-Serif, Englisch bleibt normal; dieselbe Komponente ist manchmal normal, manchmal nicht (Glückssache).
• Ursache: Drei Ebenen, die letzte ist der wahre Schuldige. ① @remotion/google-fonts lädt Laufzeitschriften von gstatic; das Netz in China erreicht sie nicht, stummes Fallback; ② chinesische Webfonts werden nach unicode-range aufgeteilt, Laden und Screenshot haben Wettlaufsituationen; ③ Tree-Shaking: sideEffects: ["*.css"] in package.json führt dazu, dass fonts.ts, das nur durch Nebenwirkungen importiert wird, im Produktions-Build komplett entfernt wird – das Schriftart-CSS ist nicht im Render-Bundle (document.fonts.size === 0) – der Studio-Entwicklungsmodus tree-shaked nicht, daher „Studio normal, Render katastrophal“.
• Reparatur: ① Schriften über @fontsource lokale Pakete (src/design/fonts.ts) einbinden; ② package.json sideEffects muss "src/design/fonts.ts" enthalten; ③ Jede Zusammensetzung, die Text enthält, <FontGuard/> hinzufügen: load→check-Zyklus zur Verifizierung, und muss auch document.fonts.size > 0 prüfen (fonts.check() gibt bei null Schriftarten-Registrierung fälschlich true zurück), bei Timeout direkt cancelRender mit Fehler, niemals stillschweigend Songti-Frames ausgeben.
• Lehre: „Studio normal, Export katastrophal“ – zuerst Produktions-Build-Unterschiede (Tree-Shaking/Kompression) vermuten, kein mysteriöser Wettlauf; Schriftarten-Abnahme muss durch FontGuard harte Grenze erfolgen, das menschliche Auge ist bei Vorschaubildern unzuverlässig.

#02 remotion still Ausgabe „○“ = Wiederverwendung alter Bilder

• Symptom: Code geändert, neu gerendert, Ausgabedatei sieht unverändert aus; Befehlszeile zeigt ○ anstatt +.
• Reparatur: Vor Abnahme-Rendering alte Ausgabe löschen (oder in neuen Dateinamen rendern); bei Bedarf --bundle-cache=false hinzufügen. + = echtes Rendern, ○ = verdächtig.
• Lehre: Abnahmevergleich muss auf bestätigt frischen Render-Produkten basieren, sonst wird fälschlich „Reparatur unwirksam“ diagnostiziert (dadurch unnötige zwei Runden gedreht).

#03 Miniaturansichtsvergleiche täuschen

• Symptom: Im nebeneinander Vergleich der Miniaturansicht sieht Chinesisch aus wie Songti, das Originalbild ist tatsächlich normal.
• Reparatur: Bei der Beurteilung von Schrift-/Strichdetails muss der Ausschnitt in Originalauflösung vergrößert werden, nicht das gesamte Frame-Miniaturbild zur Entscheidungsfindung verwenden.

#04 JSX-Attribut-Strings parsen \uXXXX Escape-Sequenzen nicht

• Symptom: <Chip icon="\u2705" /> zeigt im Bild wörtlich \u2705 an, nicht ✅.
• Ursache: String-Literale in JSX-Attributen sind HTML-ähnlicher Text, der nicht von JS-Escape-Parsing verarbeitet wird; nur String-Ausdrücke innerhalb von JS-Ausdrücken (icon={\u2705}) werden escaped. Besonders leicht passiert beim batch-weisen Schreiben von TSX mit Skripten.
• Reparatur: Emojis/Sonderzeichen in JSX-Attributen direkt als Zeichen schreiben (icon="✅"); wenn Escape nötig, als icon={\u2705} schreiben.

#06 backgroundClip: text Farbverlaufstext wird dunkel gerendert

• Symptom: Großer Titel mit backgroundImage-Farbverlauf + WebkitBackgroundClip:'text' + WebkitTextFillColor:'transparent', im Studio OK, im gerenderten Bild wird die Farbe dunkel und stumpf (hellrot wird ziegelrot), vom Benutzer sofort abgelehnt.
• Reparatur: Große Schlussfolgerungen immer reine semantische Farbe COLOR[semantic] + textShadow; für Tiefe Schatten und Schriftgewicht verwenden, nicht Farbverlaufsfüllung. tokens.GRADIENT nur für Farbflächen/Striche.

#08 Schriftart-Ränder im finalen MG-Film haben Unschärfen/Streifen („mit MG wird die Bildqualität schlechter“) (2026-07-16 · 0715-01 v3)

• Symptom: Benutzer sehen den finalen Film und sagen die Bildqualität ist schlecht; bei Vergrößerung haben die MG-Schriftart-Ränder JPEG-Mücken/Unschärfen, desto schärfer das Element, desto deutlicher. Das Ausgangsmaterial selbst (15 Mbps HEVC) ist sehr sauber.
• Ursache: Die standardmäßige Remotion-Pipeline doppelte Kompression – jeder Frame wird mit JPEG-Qualität 80 gescreenshotet, dann mit CRF 18 zu H264 komprimiert. MG-Großschrift/dünne Linien sind Hochfrequenzsignale, die als erstes Kompressionsartefakte zeigen. Vor dem Hinzufügen von MG sind die Artefakte in der realen Textur verborgen, daher wird fälschlich diagnostiziert, dass „MG die Bildqualität verschlechtert“.
• Reparatur: In remotion.config.ts Config.setJpegQuality(100) + Config.setCrf(15) festlegen (in diesem Projekt bereits gesetzt, nicht zurücksetzen). Volumensteigerung ~20%, Rendern etwas langsamer, es lohnt sich.
• Diagnose: Von demselben Frame aus Material/altem Film/neuem Test-Parameter jeweils einen Screenshot machen, denselben MG-Schriftartbereich vergrößern und nebeneinander vergleichen; zuerst 5 Sekunden Test-Segment rendern, um Parameter zu validieren, dann gesamten Film rendern.

#09 Langes Rendern bricht ab, mp4 wird zu Bruchstück (2026-07-16 · 0715-01 v3)

• Symptom: Rendern läuft lange, dann „Prozess läuft noch“ aber die Datei wächst nicht; oder Rendern verschwindet lautlos und hinterlässt eine nicht abspielbare mp4.
• Ursache: ① Rendern hängt an einem Unterprozess der AI-Sitzung; Sitzungs-Neustart/Beenden tötet das Rendern mit (diesmal bei 90% getötet); ② Prozesserfassung mit pgrep -f "remotion render" matcht auch das Erkennungsskript selbst (Befehlszeile enthält denselben String), was den Anschein erweckt, „der Prozess lebt noch“.
• Reparatur: ① Rendern über wenige Minuten immer mit nohup npx remotion render … > /tmp/xx.log 2>&1 & disown von der Sitzung trennen; ② Abschlusskriterium ist die Zeile + Ausgabedateiname im Log (+ = echte Render-Erfolg), nicht die Existenz des Prozesses; ③ Prozesserfassung muss Selbst-Matching ausschließen (CPU-Auslastung prüfen oder genaue PID verwenden); ④ Vor Neu-Rendering alte Bruchstücke löschen.
• Lehre: Bruchstück-mp4 (Länge/Größe stimmen nicht) niemals ausliefern; zuerst mit ffprobe Länge und Audiospur prüfen, dann dem Benutzer zeigen.