wbr664393425-lgtm/rui-ui-promo-video

Workflow für echte Komponenten-Werbevideos

Standard-Stil = „Eine Linie“ : Ein Markenmotiv aus dem Produkt zieht sich durch den gesamten Film, ergänzt durch Leerräume und drei durch echte Interaktionen ausgelöste Höhepunkte. Ordentliche, erklärende Kameraeinstellungen und gestapelte Effekte wie bei einer Präsentationsveranstaltung sind als Gegenbeispiele im Kreativ-Handbuch aufgeführt.

templates/ = Aufnahme-Schablone (generalisiert, bereits mit Korrekturen versehen) + Skripte für Compositing, Styling, Musik und Export (v3 abgeschlossen). Nach dem Kopieren in videos/<name>/ müssen die mit 【MUSS GEÄNDERT WERDEN】 markierten Stellen angepasst werden.

Bei Bedarf lesen:

• references/creative-playbook.md: Motiv, drei Höhepunkte, Leerraumregeln, Text, Rhythmustabelle. Vor der Storyboard-Erstellung unbedingt lesen.
• references/compose-recipes.md: Koordinatenmessung, Zeitzuordnung, Bildcontainer, Lichtpanel, Linienzeichnung, Spotlight, Weltenumkehr, Logo-Einblendung, Übergänge, Timeline-Schreibweise. Vor dem Compositing lesen.
• references/pitfalls.md: Phänomene → Ursachen → Behandlungstabellen und Überprüfungsbefehle für Aufnahme, Rendering, Audio und Auslieferung. Bei Anomalien zuerst nachschlagen.

Tech-Stack

Schritt	Technologie	Details
Compositing/Rendering	HyperFrames (fest [email protected], npx --yes, nicht in Projekt-Abhängigkeiten einbinden)	check zur Validierung, snapshot zum Extrahieren von Einzelbildern, render zum Ausgeben des Films
Animation	GSAP (kopierte Version aus dem Geschäftsprojekt in assets/vendor/gsap.min.js)	Einzelne paused Timeline wird unter window.__timelines[id] registriert
Aufnahme-Build	Vite + @vitejs/plugin-vue (Abhängigkeiten werden per createRequire aus dem Frontend-Projekt aufgelöst)	Eigenständiges Root; envDir/publicDir verweist auf das Frontend-Projekt; Vendor als separater Block
Deterministische Uhr	Vite transform Plugin	Alle direkten Aufrufe von setTimeout/rAF/Date.now/performance.now (auch mit window.-Präfix) werden auf window.__shoot umgeleitet
Datenisolation	In-Memory fixtureFetch (inkl. Schreibsimulation) + Netzwerk-Whitelist + fester Seed + feste Epoche + feste Positionierung	Fiktive Daten, Geschäftsrequests werden über Fixtures abgebildet, feste Aufnahmeuhr
Interaktionsskript	performActions(t) + once/byText/rowButton/typeInto	Zu bestimmten Sekunden echte Klicks, Eingaben, Drags auslösen
Material	Querformat PROMO_RESOLUTION=4k (2-fache Pixel); Handy 430×932 separater Viewport	Compositing kann stark herangezoomt werden, bleibt dennoch scharf
Musik	Python3 + NumPy (96 BPM, FFT-Hall, fester Seed)	Stille auf Takt, Akzente auf Höhepunkte, Nodes werden mit Glockenspiel untermalt
Lautheit/Export	FFmpeg zwei Durchläufe loudnorm (−14 LUFS / TP −3), paketierte normalisierte Originalmusik, komprimierte Version, Cover	Hauptfilm + -share.mp4 (ca. 11 MB) + Cover PNG

Verzeichnisstruktur

videos/<name>/
  promo.config.mjs   appDir/srcDir/entry/motionFile/id/duration/coverAt/hyperframes —— einzige projektrelevante Konfiguration
  capture/           index.html (Aufnahmeschablone) bootstrap.ts (Uhr/Isolation/Interaktion) fixtures.ts (fiktive Daten, muss neu geschrieben werden) vite.config.mjs
  scripts/           render-footage.mjs compose-film.mjs compose-audio.py normalize-audio.mjs render-film.mjs remux.mjs
  assets/            footage/ footage-4k/ audio/score-final.wav vendor/gsap.min.js
  index.html (von compose generiert) film.css package.json README.md

npm scripts: capture / compose / audio / check / snap -- <Sekunde,Sekunde> / render / remux / dev.

Ablauf

1. Kreative Ausrichtung: PRODUCT.md/DESIGN.md/Markenidentität lesen, gemäß creative-playbook ein Motiv finden und drei Höhepunkte entwerfen. Nur zwei Dinge mit dem Benutzer abstimmen: kreative Leitlinie (2–3 Richtungen vorschlagen, „Ein Motiv“ empfehlen) und Textsprache (beibehalten oder neu).
2. Storyboard: Jede Szene = echte Seite + ein Songti-Überschrift + Schlüssel-Interaktionssekunden + Ausprägung der Motivlinie in dieser Szene; 45-Sekunden-Referenzrhythmus siehe playbook. In die README-Tabelle des Storyboards eintragen.
3. Aufnahmeschablone: bootstrap.ts installiert window.__shoot, Netzwerk-Whitelist, feste Positionierung, leert Speicher (inkl. IndexedDB-Entwürfe), setzt Theme/Ansicht/Offline-Token vor, ruft nach replaceState zur Route den Produkt-Einstiegspunkt auf; langsam ladende Seiten mit waitFor/settle über rAF spülen; Stile für versteckten Cursor/Scrollbar/Caret einfügen. fixtures.ts übernimmt Felder von echten APIs, Schreiboperationen nur im Speicher. Zuerst im Browser mit ?shot=<Szene>&live die Interaktionen testen.
4. Aufnahme: npm run capture (single Worker); bei Querformat-Szenen mit starkem Zoom zusätzlich PROMO_RESOLUTION=4k npm run capture ausführen.
5. Koordinate vermessen: Aus den aufgenommenen Einzelbildern (1920-Koordinaten, 4K-Ausschnitte für genaue Werte) die Positionen von Pfaden, Schaltflächen, Popups, Schrittknoten ermitteln.
6. Compositing: compose-film.mjs mit Szenentabelle, Koordinaten, Text, Zeitpunkten anpassen, die vorhandenen Hilfsfunktionen wiederverwenden; Regeln siehe compose-recipes. Nach jeder Runde npm run compose && npm run check und dann npm run snap -- <Schlüsselsekunde> für Kontaktbögen (Ein-/Ausgänge der Höhepunkte, Übergänge, Annotationen).
7. Musik: compose-audio.py mit Zeitpunkten anpassen (Höhepunkt-Akzente, Stille-Abschnitte, Klicks, Node-Glockenspiel), npm run audio ausführen.
8. Rendering und Abnahme: npm run render im Hintergrund laufen lassen; nach Fertigstellung mit ffprobe Länge/Frames/Auflösung/Framerate prüfen, mit ebur128 Lautheit und True Peak messen, blackdetect ausführen (geplante Schwarzbereiche müssen dokumentiert sein), ca. 18 Einzelbilder extrahieren und visuell prüfen. Nur das Cover ändern: npm run remux ausführen.

Einschränkungen

• Quellcode und Abhängigkeiten des Produkts werden nicht verändert; die Uhrenänderung findet nur im Aufnahme-Build statt.
• Ausschließlich fiktive Daten verwenden, keine Verbindung zu Geschäfts-Backend/Datenbank, keine echten Anmeldeinformationen lesen; Drittanbieter-Online-Ressourcen (z. B. Karten) nur über Whitelist, API-Keys nur in ignorierten Build-Verzeichnissen. Im README die Isolationsmethode, den Seed und das feste Datum angeben.
• Nur Zahlen verwenden, die tatsächlich in der Benutzeroberfläche erscheinen; die Begriffe „Demo/Beispiel/Simulation“ dürfen weder im Bild noch im Text vorkommen.
• Visuelle Gestaltung folgt dem DESIGN.md des Projekts und den Markenfarben; Schriftarten lokal deklarieren (Songti SC / PingFang SC / Georgia).
• Zwischenprodukte (.capture-build/ .shots/ .quality/ renders/ Logs) in .gitignore eintragen; alte Versionen unverändert lassen, neue Versionen in eigenem Verzeichnis anlegen.
• Nicht committen, nicht auf externe Plattformen veröffentlichen, es sei denn, der Benutzer verlangt es ausdrücklich.
• Vor dem Schreiben oder Anpassen des Composings bei Bedarf hyperframes-core, hyperframes-animation, hyperframes-cli aufrufen, um die aktuelle API zu überprüfen.

Lieferumfang

• Hauptfilm MP4 (45,000 s / 2700 Frames / 1920×1080 / 60 fps / H.264 yuv420p / AAC 320k 48 kHz / −14 LUFS / True Peak ≤ −1 dBTP).
• Komprimierte Version -share.mp4 und Cover PNG, bereitgestellt über das von der aktuellen Plattform unterstützte Datei-Lieferformat.
• Editierbare index.html + film.css sowie Materialien und Skripte.
• README: Visuelle Beschreibung, Storyboard-Tabelle, Musikbeschreibung, Reproduktionsbefehle, Aufnahme-Isolation, Lieferkontrolle.