jeremyhan520/promo-film-looks

Promo-Film-Looks: 苹果风格 und 华章版

Zwei fertige Stilvorlagen für institutionelle Imagefilme. Beginne mit einer funktionierenden Engine anstatt mit einem leeren Remotion-Projekt.

• 苹果风格 (glass): Apple-inspiriertes Milchglas. Weiße / himmelblaue / blaue Hintergründe pro Einstellung, gelbe Akzente, 优设标题黑-Schriften, abgerundete rahmenlose Fotos und Live-Daten-Grafiken hinter dem Glas. Lese references/glass.md.
• 华章版 (aurum, Aurum Nocturne): Mitternachtslack-Hintergrund, Champagner-Schrift und Goldblatt-Titel. Es fügt goldgerahmte Bilderrahmen, Lichtlecks und einige Lens Flares hinzu. Lese references/aurum.md.

Eine Codebasis rendert beide Looks. Der Look ist eine Eingabe-Eigenschaft (--props=glass.json oder --props=aurum.json), sodass dieselbe Zeitleiste und dieselben Szenen als zwei Editionen ausgeliefert werden können.

Den Look auswählen

Standard ist 苹果风格: hell, sauber und international, und er eignet sich am besten für Zulassungs- und Recruiting-Filme. 华章版 ist dunkler und zeremonieller. Biete ihn für Jubiläen, Galas, Auszeichnungen und Premium-Markenfilme an, oder wenn der Benutzer nach 华丽 / 黑金 / luxury fragt. Zeige einige Standbilder, bevor du einen ganzen Film darin renderst.

Wenn die Markenfarbe nicht blau ist, behalte die Glas-Engine und färbe die Tokens um (glassVars in looks.tsx, GLASS in theme.ts). Baue keinen neuen Look von Grund auf.

Einen neuen Film starten

python <skill-dir>/scripts/scaffold.py <new-project-dir>

Dann, im Projekt:

npm install
npx tsc --noEmit -p .
PROPS=glass.json bash qa.sh demo 30 150 268 320 460 520

Die Demo-Zeitleiste (src/scenes/Demo.tsx) hat eine Einstellung pro signifikanter Komponente. Rendere ihre Standbilder in beiden Looks, bevor du etwas änderst, um zu bestätigen, dass Schriftarten und der Browser auf dieser Maschine funktionieren.

Einrichtungshinweise:

• Schriftarten werden nicht mit dem Skill weiterverteilt. assets/fonts/README.md listet jede Datei, ihre Quelle und ihre Lizenz auf. Das Gerüst kopiert alles, was in assets/fonts/ ist; fehlende Schriftarten greifen auf Fallbacks zurück, ohne den Render zu unterbrechen.
• Browser: remotion.config.ts zeigt auf lokales Edge, wenn es existiert, da Chrome Headless Shell in manchen Netzwerken möglicherweise nicht heruntergeladen wird.
• Shell: Die Skripte sind Bash, und PROPS=… bash qa.sh ist Bash-Syntax. Unter Windows führe sie in Git Bash aus. Von PowerShell aus rufe Git Bash explizit auf, z. B. & "C:\Programme\Git\bin\bash.exe" -c "PROPS=glass.json bash qa.sh demo 30 150", da ein bloßes bash dort möglicherweise WSL startet.

Was die Vorlage enthält:

Datei	Rolle	Pro Film bearbeiten?
src/config.ts	Dauer, SHOTS (Einstellungston, Titelseite, Chips), CHAPTERS (Motiv, Geisterwort), FORMULAS, BRAND	ja
src/scenes/*.tsx	der Film: eine Datei pro Kapitel, aus Kit-Komponenten aufgebaut	ja
src/kit.tsx	Scene, Ground, Night, Card, Print, DocPage, Caption, Rise, En, Rule, Heading, ChapterCard, useCount, StatHit, MaskTitle, CardRail, FeatureCard	selten
src/looks.tsx	Hintergründe, Übergänge, Bildrahmen und Licht für beide Looks	selten
src/glassfx.tsx	Glas-Detailebenen: Motive, Scheiben, Chips, Geisterwörter, Bokeh, Randkomet	selten
src/theme.ts	Tokens C, Schriften F, FOIL, Easings EZ, r(), mix()	selten
src/Film.tsx	Master-Zeitleiste, GLASS_CSS, VO-/SFX-Verkabelung	ja (Verdrahtung)

Szenen müssen look-agnostisch bleiben. Farbe nur durch C.*-Tokens, Typografie nur durch F.*, Fotos durch Print, Paneele durch Card oder C.card / C.fill. Härte niemals eine Hex-Farbe in einer Szene: Dieselbe Szene muss weiß-auf-blau, tinte-auf-weiß und gold-auf-mitternacht rendern können.

Arbeitsablauf

1. Timing aus dem Voiceover.
   • Gleiche das VO ab (z. B. Whisper-Wort-Zeitstempel) und notiere die Chunk-Zeiten.
   • Jede Scene sitzt bei absoluten VO-Sekunden. Benachbarte Szenen überlappen um etwa 0,35 s.
   • Elementzeiten (t0, at) sind ebenfalls absolute Sekunden: der Moment, in dem der Sprecher die Sache sagt. Text, der beim gesprochenen Wort eintrifft, macht den Film geschnitten wirkend und nicht animiert.
2. Einstellungstabelle. Füge eine SHOTS-Zeile pro Szene in config.ts hinzu.
   • Wechsle die Töne, sodass benachbarte Einstellungen sich unterscheiden.
   • Setze den Titel (head) auf die Seite, die der Inhalt frei lässt.
   • Markiere randlose oder Blend-Mode-Einstellungen als flat.
3. Baue Szenen aus Kit-Komponenten. Muster, die bereits funktionieren, sind in den Referenzen, z. B.:
   • eine nahezu vollbildgroße Kartenleiste für dichte Daten
   • eine Überschriftenzahl, die ganz landet
   • die Text-als-Maske-Eröffnung
4. QA-Standbilder (qa.sh) am belebtesten Moment jeder Einstellung, in jedem Look, den du ausliefern wirst. Sieh sie dir selbst an. Siehe die Checkliste in references/pipeline.md.
5. Mastern mit master.sh: −16 LUFS, h264 crf 17, AAC 320k. Dann die verify.sh-Zahlen melden.
6. Fehlerbehebungen nach Auslieferung. Nur den geänderten Abschnitt mit segment.sh neu rendern. Es bezieht Audio aus dem Master, sodass die Lautstärke passt, und es prüft, dass beide Splice-Frames dem Master entsprechen.

Gestaltungsprinzipien

Diese sorgen dafür, dass die beiden Looks Bestand haben. Jedes wird vom Grund gefolgt, denn die Gründe sind wichtiger als die Regeln.

• Platz für Untertitel und Musik lassen. Liefere Voiceover plus SFX, ohne eingebrannte Untertitel und ohne Hintergrundmusik, es sei denn, es wird verlangt. Institutionen fügen meist einheitliche Untertitel und Musik später hinzu, daher bleibt der untere Bereich (etwa y > 950) frei von wichtigen Inhalten.
• Den oberen Bildrand sauber halten. Dekorative englische Kopfzeilen, Kapitel-Kicker und HUD-Linien wirken auf ein chinesisches Publikum wie überflüssiger Schnickschnack. Bei Glas ist der Kicker bereits ausgeschaltet, und BRAND ist standardmäßig leer. Englische Begleittexte unter Titeln sind in Ordnung.
• Den Folien-Look vermeiden. Ein nacktes milchglasariges Layout wirkt wie PowerPoint. Jede Glas-Einstellung trägt langsame Ebenen hinter dem Inhalt: das Motiv, Scheiben, Geisterwort und vorderes Bokeh, plus die langsame 3‑D-Drehung der Inhaltsebene. Benachbarte Einstellungen wechseln die Hintergründe. Entferne diese Ebenen nicht, um "aufzuräumen".
• Dekoration darf nicht wie Inhalt wirken. Formel-Chips sind reine Notation ohne Zahlen, etwa 60 % Deckkraft und kein Schatten. Ein Chip wie "R² = 0,98" liest sich wie eine Behauptung über die Einrichtung.
• Lesbarkeit schlägt Eleganz. Wenn eine Karte dichte Daten enthält (Forschungsdiagramme, Ergebnisse), gib ihr fast den gesamten Bildschirm (CardRail). Kleine Karten in einer Reihe sind unlesbar.
• Überschriftenzahlen landen ganz. Ein langes Hochzählen von 0 bis 100 % liest sich wie ein Ladebalken. Verwende StatHit für Überschriftenzahlen und useCount nur für gewöhnliche.
• Personen und Dokumente:
  • Niemals einen Kopf abschneiden. Überprüfe jeden Portrait-Zuschnitt in einem Standbild und setze focus auf Print, um es zu korrigieren.
  • Wiederhole kein Foto innerhalb eines Films.
  • Zertifikate und Journalseiten hängen kerzengerade (DocPage hat keine Neigung), skaliert auf das tatsächliche Seitenverhältnis.
• Symbole müssen wörtlich sein. Bevorzuge ein erkennbares Objekt, z. B. ein Auto von vorne für Transport, gegenüber einem abstrakten Zeichen.
• Der Inhalt der Einrichtung sind Daten. Personen, Fotos, Namen und Zahlen werden genau so verwendet, wie sie geliefert werden, niemals erfunden. Wenn ein Quellfoto Arbeit benötigt (Hintergrund, Farbe), passe es an seine Nachbarn an und zeige ein Standbild vor dem Rendern.

Berichterstattung

Berichte, was du geprüft hast, mit Zahlen: Bildanzahl, Dekodierung, Dauer, LUFS, Spitzenpegel und welche Standbilder du dir angesehen hast. Sage klar, was du nicht getan hast, z. B. "nicht vollständig durchgesehen" oder "Audio nicht angehört". Benenne Liefergegenstände <Einrichtung>宣传片_Version_ohneUntertitelOhneBGM_1080p25.mp4. Lege Austauschsegmente in einen <Version>_替换片段/-Ordner, benannt mit dem Start-Zeitcode (Details in references/pipeline.md).

Referenzen

• references/glass.md: die vollständige 苹果风格-Spezifikation. Deckt Tokens, Einstellungslooks, Milchglasoberflächen, Übergänge, Detailebenen, charakteristische Bewegungen und Fallstricke ab.
• references/aurum.md: die vollständige 华章版-Spezifikation. Deckt die Bühnenebenen, Goldblatt-Schrift, Rahmen, Lichtlecks, Flares und Kontrastfallen ab.
• references/pipeline.md: VO-Timing, die SFX-Cue-Tabelle, die QA-Checkliste, Mastering, Überprüfung, Austauschsegmente, Splicing und Benennung der Liefergegenstände.