bluemountain1231/cinematic-web-promo

video-shotcraft: Filmische Produktvideo-Entwicklung

Ein eigenständiges Produktionskit: 152 Shot-Karten (mit Demo-Quellcode und dynamischer Beispielgalerie), eine geprüfte komplette Werbevideo-Vorlage, wiederverwendbare Komponenten und Audio-Assets, ein sechsstufiger Workflow. Der aktuelle Fokus liegt auf Web-/Desktop-Produktvideos, aber die Shot-Karten sind universelle Bewegungsvokabeln – sie können auch einzeln für beliebige Szenen in Videos verwendet werden.

Modus-Auswahl vor dem Start

Der vollständige Werbefilm hat drei nicht kombinierbare Modi. Bevor Sie mit der Materialerfassung, dem Storyboarding oder der Umsetzung beginnen, prüfen Sie, ob der Benutzer bereits eine explizite Auswahl getroffen hat. Wenn ja, führen Sie direkt aus, fragen Sie nicht erneut und wechseln Sie nicht zu einem anderen Modus.

1. Direkte Verwendung der Vorlage: Behalten Sie den ursprünglichen Ersetzungsprozess von Ink Press bei. Lesen Sie template/TEMPLATE.md und ersetzen Sie Screenshots, Text und Markeninformationen des Zielprodukts gemäß der bestehenden Shot-Struktur.
2. Autonome freie Erstellung: Lesen Sie references/pipeline.md. Der Agent entscheidet auf Basis der bestehenden Benutzeranforderungen und des Projektinhalts selbstständig über visuelle Richtung, Shot-Zuordnung, Storyboard, Material und Audio und arbeitet kontinuierlich bis zum fertigen Video; er hält nicht für Bestätigungen in den Phasen Produktbriefing, Styleframe, Shot-Zuordnung oder Storyboard an.
3. Gemeinsame Erstellung: Lesen Sie references/guided-free-creation.md. Der Agent schlägt zuerst fundierte Einschätzungen und Pläne vor, und der Benutzer bestätigt nacheinander Produktbriefing, Anforderungsentscheidungen, visuelle Richtung, Shot-Zuordnung und finales Storyboard. Nach Freigabe des Storyboards wird mit der endgültigen Materialerfassung und Produktion aus references/pipeline.md fortgefahren.

Wenn der Benutzer einen Projektpfad, eine URL, einen Bildschirmrecording oder einen Screenshot bereitgestellt hat, aber noch keinen Modus gewählt hat, führen Sie zuerst eine minimale, schreibgeschützte Produktprüfung durch: Verstehen Sie die Produktpositionierung, Hauptfunktionen, Seitenvisualität, präsentierbaren Zustand und Materialrisiken; ändern Sie keine Geschäftsprojekte, sammeln Sie keine sensiblen Daten und schreiben Sie keinen Videocode. Nach der Prüfung geben Sie die drei Modi an und erläutern:

• Ob Ink Press für das Produkt geeignet ist, mit konkreten Gründen für und wider;
• Ob die autonome freie Erstellung und die gemeinsame Erstellung jeweils geeignet sind und welche visuellen Hinweise des Produkts voraussichtlich erhalten bleiben;
• Welchen Modus der Agent empfiehlt, mit Begründung und Abwägungen.

Fragen Sie dann explizit: „Basierend auf der obigen Produktprüfung empfehle ich den Modus XX. Soll ich mit diesem Modus fortfahren?“

Informieren Sie den Benutzer gleichzeitig, dass er unter https://vincentwei1021.github.io/video-shotcraft/ die dynamischen Beispielclips durchstöbern und die gewünschten Bewegungseffekte für das Video auswählen kann.

Wenn der Benutzer noch kein prüfbares Projekt oder keine Seite bereitgestellt hat, stellen Sie die drei Modi kurz vor und fragen Sie dann; empfehlen Sie Ink Press nicht automatisch, nur weil es eine fertige Vorlage ist.

• Benutzer wählt Vorlage: Lesen Sie template/TEMPLATE.md vollständig und führen Sie den ursprünglichen Vorlagenprozess aus.
• Benutzer wählt autonome freie Erstellung: Lesen Sie references/pipeline.md vollständig, der Agent arbeitet autonom, ohne auf phasenweise Bestätigung zu warten.
• Benutzer wählt gemeinsame Erstellung: Lesen Sie references/guided-free-creation.md vollständig und arbeiten Sie gemäß den Bestätigungspunkten zusammen.
• Benutzer hat sich noch nicht entschieden: Halten Sie hier an und warten Sie auf die Auswahl; wählen Sie nicht standardmäßig für den Benutzer und beginnen Sie nicht mit der Produktion.

Ausnahme 1: Wenn der Benutzer die Ink Press-Vorlage explizit genannt hat, gilt der Vorlagenmodus als ausgewählt. Zum Beispiel „Mach einen Werbefilm für mein Produkt mit der Ink Press-Vorlage“. Fragen Sie dann nicht erneut, sondern lesen Sie template/TEMPLATE.md vollständig und führen Sie den Vorlagenprozess aus.

Ausnahme 2: Wenn der Benutzer explizit angegeben hat, bestimmte Shot-Karten zu verwenden oder zu referenzieren, sind die Shot-Einschränkungen bereits festgelegt. Zum Beispiel „Verwende deck-deal-flyin und row-embed für dieses Video“ oder „Referenziere den Effekt von spotlight-hero-card“. Stellen Sie dann die Vorlage nicht vor und fragen Sie nicht, ob die Vorlage verwendet werden soll. Bestätigen Sie die angegebenen Shots gemäß den Gallery-Namensauflösungsregeln, lesen Sie jede Karte vollständig und lokalisieren Sie den genauen Demo-Quellcode gemäß der „Referenzimplementierung“ auf der Karte. Ein einzelner Shot kann ausgeführt werden, sobald das Zielmaterial klar ist; wenn für einen vollständigen Werbefilm noch nicht angegeben wurde, ob die autonome freie oder gemeinsame Erstellung verwendet wird, fragen Sie nur nach diesen beiden Modi, wobei die angegebenen Shots als spätere Produktionseinschränkungen dienen und nicht automatisch der gemeinsamen Erstellung gleichgesetzt werden.

Vier Verwendungsmöglichkeiten

1. Vollständiger Werbefilm (Vorlagenroute): Möchten Sie einen Effekt, der der Vorlage sehr ähnlich ist → Lesen Sie template/TEMPLATE.md, befolgen Sie die „Produkterneuerungsanleitung“ und ersetzen Sie Material Shot für Shot.
2. Vollständiger Werbefilm (autonome freie Erstellung): Möchten Sie einen neuen Stil und autorisieren den Agenten zur autonomen Entscheidung → Lesen Sie references/pipeline.md, arbeiten Sie kontinuierlich vom Produktverständnis bis zur Endkontrolle, ohne in den Zwischenphasen auf Bestätigung zu warten.
3. Vollständiger Werbefilm (gemeinsame Erstellung): Möchten Sie an wichtigen Entscheidungen teilnehmen → Lesen Sie references/guided-free-creation.md, bestätigen Sie Produktbriefing, Anforderungsentscheidungen, visuelle Richtung, Shot-Zuordnung und finales Storyboard; nach der Freigabe fahren Sie mit der endgültigen Materialerfassung aus der Pipeline fort.
4. Einzelner Shot/Einzelner Bewegungseffekt: Wählen Sie eine Karte aus references/shots/ (oder lassen Sie den Benutzer in der gallery/-Galerie auswählen), lesen Sie den vollständigen Kartentext und lokalisieren Sie den genauen Demo-Quellcode gemäß „Referenzimplementierung“, passen Sie ihn an das Zielmaterial an.

Grenze zwischen autonomer freier Erstellung und gemeinsamer Erstellung

Autonome freie Erstellung überlässt die kreativen und technischen Entscheidungen dem Agenten. Der Agent leitet dynamisch aus dem Projektinhalt Produktschwerpunkte, visuelle Richtung, Shot-Zuordnung, Storyboard, Materialverarbeitung und Audioplan ab, zeichnet wichtige Entscheidungen auf und führt sie direkt aus; es sei denn, es fehlen notwendige Eingaben, die nicht sicher abgeleitet werden können, stellt er keine Fragen, hält nicht in einzelnen Phasen an und fordert auch keine Bestätigung von Zwischenergebnissen vom Benutzer. Bestehende explizite Anforderungen des Benutzers sind stets Einschränkungen und dürfen nicht durch die Standardauswahl des Agenten überschrieben werden.

Gemeinsame Erstellung verwendet die phasenweise Bestätigung. Standardmäßig lesen Sie references/guided-free-creation.md, stellen in jeder Runde nur 1–3 Fragen, die Nacharbeiten am meisten reduzieren, und halten bei Produktbriefing, Anforderungsentscheidungen, visueller Richtung, Shot-Zuordnung und finalem Storyboard für die Benutzerbestätigung an. Der Benutzer bestätigt die geschäftliche und kreative Richtung; der Agent führt autonom die Erfassungsmethode, Implementierungsparameter, SFX-Anker, Remotion-Projekt, Rendering und technische Qualitätssicherung durch.

Wenn der Benutzer in der gemeinsamen Erstellung explizit sagt „Du entscheidest alles“ oder „Überspringe die Bestätigung und mach einfach“, wechseln Sie zur autonomen freien Erstellung und zeichnen diese Wahl auf; behaupten Sie nicht, autonom vorzugehen, während Sie weiterhin phasenweise Bestätigungen anfordern.

Die Zuordnung von Funktionen zu Shots ist nur „welche Bewegungsgrammatik wird verwendet“, kein vollständiges Storyboard. Nachdem die gemeinsame Erstellung die Zuordnung bestätigt hat, muss der Agent weiterhin Shot-Reihenfolge, Dauer, spezifische Bilder, Seitenstatus, Materialquellen, Untertitel, Übergänge und SFX angeben. Erst nach Bestätigung des vollständigen Storyboards wird mit der endgültigen Materialerfassung fortgefahren. Wenn der Benutzer den Shot-Namen aus der Gallery kopiert, muss er nur den Kartennamen oder „Kartenname · Stilname“ angeben, der Agent liest die lokale Rezeptkarte und den Demo-Quellcode.

Kernprinzipien

1. Für die Nachbildung vorhandener Seiten müssen echte Screenshots verwendet werden; handgefertigte UI ist nur für Nicht-Nachbildungsszenarien erlaubt, und Qualität sowie Ausdrucksklarheit sind harte Grenzen. Wenn Sie die echte Produktseite zeigen, starten Sie im ersten Schritt einen lokalen dev server, verwenden Sie einen Headless-Browser, um die gesamte Seite als 2x-Textur zu erfassen, plus elementweises Freistellen und eine layout.json-Koordinatentabelle. Für Nicht-Nachbildungsszenarien (abstrakter Anfang/ Markenabschnitt/ eigenständige Komponente) ist handgefertigte UI erlaubt, aber wenn sie nicht veröffentlichungsreife Qualität erreicht oder der Betrachter nicht versteht, was sie ausdrückt, kehren Sie zur Screenshot-Route zurück. Behandeln Sie Seitendaten nach Risiko: Öffentliche Demodaten dürfen nur nach expliziter Bestätigung im Produktbriefing beibehalten werden; Kunden-, persönliche, interne, Schlüssel-, Echtzeit- oder andere sensible Daten müssen durch fiktive oder anonymisierte Inhalte ersetzt und vor der Erfassung eingefroren werden.

2. Die visuelle Sprache des gesamten Videos muss aus dem Produkt selbst erwachsen, es darf kein separates, nicht zusammenhängendes „Werbevideo-Skin“ erstellt werden. Extrahieren und schreiben Sie vor dem Erstellen des Styleframes aus dem Designsystem, Quellcode oder den berechneten Stilen des Produkts/der Website ein Design-Spec: Schriftfamilie und -gewichte, Schriftgrößenhierarchie, Zeilenhöhe/ Buchstabenabstand, Raster, Abstände, Ausrichtung, Informationsdichte und Radius, sowie Hintergrund-/Oberflächen-/Text-/Akzent-/Statusfarben, Verläufe und Materialien. Alle Titel, Untertitel, Zahlen, Karten, Layouts, Übergänge, Partikel, Lichteffekte und andere Bewegungsfarben im Video müssen diese Tokens wiederverwenden oder zurückhaltend erweitern, während sie gleichzeitig den Ton, den Geschmack und die Textur des Produkts treffen. Bei Verwendung der Vorlagen- oder Shot-Karten-Route erben Sie nur deren Shot-Struktur, Bewegungsgrammatik, Rhythmus und bereits eingestellte Parameter; Schriftart, Typografie, Farbschema und Material müssen für das Zielprodukt neu angepasst werden. Wenn aus narrativen Gründen eine Abweichung von der Produktvisualität erforderlich ist, erklären Sie in der gemeinsamen Erstellung zuerst den Grund und lassen Sie den Benutzer bestätigen; in der autonomen freien Erstellung schreiben Sie den Grund und die Abwägungen in das Design-Spec und fahren fort.

3. Filmisches Gefühl entsteht aus Kameraführung, Licht und Schatten, Rhythmus und Klang, nicht aus effekthascherischen Animationen. Wiederholt anerkannt wurden: vollständiger Aktionsbogen eines einzelnen Protagonisten (Fokussierung → Heranzoomen → Schweben → Zurückkehren), physisch-metaphorisch getriebene Beschleunigung (Karten austeilen), seitlich geneigte Orbital-Kamerafahrt um Nahaufnahmen, Riser → Impact → Sparkle Klangphrasen. Masseneinführung von Elementen erfolgt durch die Bewegung selbst, nicht durch einzelnes Aufleuchten – dekorative Glints/ massenhafte Überblendungen wirken billig, einzelne hochwertige Lichteffekte sind in Ordnung.

4. Jeder Shot erzählt nur einen Bewegungseffekt; nachdem die Schlüsselinformationen platziert sind, muss geatmet werden. Eine Animationsmethode (Einfliegen/ Stapeln/ Umblättern) wird im gesamten Film nur einmal als Protagonist eingesetzt, wiederholte Shots und wiederholte Taglines werden gelöscht. Der Rhythmus-Präferenz ist unidirektional: Historisches Feedback zeigt durchgängig „verlangsamen/ halten“, nie einmal „zu langsam“ – Markenlogo hält ≥1s, Massenbewegungsabschluss lässt 0,5s Ruhe, die Hauptaktion des Openings erhält ausreichend 3s. Reservieren Sie beim Erstellen der Timeline vorab Budget für Halte-/Ruheframes.

5. Bei Videos mit stark rhythmischem BGM müssen alle Übergänge und Bewegungen auf dem Beat liegen. Benutzer hat Musik ausgewählt → Führen Sie vor Beginn eine Rhythmusanalyse durch (librosa-Gitterfitting für echtes BPM/Phase + Kick/Snare/Hihat-Dreiklassenschlagzeugerkennung), bestehen Sie das Gitter auf Basis der Transientenabdeckung, bevor Sie mit dem Storyboard beginnen; die Timeline verwendet Taktnotation beatF(n), spärliche Akzente werden auf echte Transienten genagelt, nicht auf Gitterinterpolationspunkte. Nach dem Rendern extrahieren Sie die Tonspur aus dem fertigen Video und messen die Schnittfehler ≤3f. Methodik siehe references/music-beat-sync.md. Videos mit BGM werden am Ende in zwei Versionen ausgeliefert: mit BGM und ohne BGM (SFX beibehalten), über die bgm inputProp aus derselben Timeline gerendert, damit der Benutzer später seine eigene Musik hinzufügen kann.

6. Vor der Verwendung von Shot-Karten-Bewegungen muss der Gallery-Index analysiert und der genaue Demo-Implementierungscode gelesen werden. Überprüfen Sie zuerst mit gallery/api/library.json den Kartennamen und den style-key, lokalisieren Sie dann die spezifische TSX anhand der „Referenzimplementierung“ im Kartendokument. Die Rezeptkarte liefert Semantik und Parametertabelle, der genaue Demo-Quellcode ist die Wahrheit der abgestimmten Parameter (Easing, Zeitverteilung, Timing von Maskenaufhebungen, bekannte Fallstricke und deren Umgehung). Anpassungen sind erlaubt, aber die in der Karte als „bekannte Fallstricke/ Achillesferse“ gekennzeichneten Parameter dürfen nicht herabgestuft werden – die Qualitätsstandards dürfen nur steigen, nicht fallen. Das Neuschreiben allein anhand des Kartennamens und Verständnisses bedeutet, die gesamte Abstimmungsarbeit aufzugeben.

7. Gemeinsame Erstellung stellt billige Bestätigungen voran, autonome freie Erstellung führt die gleichen Entscheidungen als Ausführungsprotokoll. Die Reihenfolge Produktbriefing → Anforderungsausführungstabelle → Textrichtung → Styleframe → Shot-Zuordnung → Storyboard bleibt unverändert; in der gemeinsamen Erstellung wird sie dem Benutzer zur Bestätigung vorgelegt, in der autonomen freien Erstellung wird sie vom Agenten autonom ausgewählt und kontinuierlich vorangetrieben. Beide Modi sollten nicht in die Shot-für-Shot-Implementierung einsteigen, bevor die Richtung festgelegt ist.

8. Abnahme durchgängig + unabhängige Prüfung vor Auslieferung. Ab Phase 5 erstellt jeder Shot mit npx remotion still Einzelbild-Selbstprüfung; nach jeder Änderungsrunde wird das gesamte Video gerendert + mit ffmpeg Einzelbild extrahiert zur Rückschau; vor der Auslieferung muss ein Subagent mit sauberem Kontext eine unabhängige Endkontrolle durchführen. Der Prüfinput enthält das fertige Video, Keyframes, Produktbriefing, Anforderungsausführungstabelle, aktuell bestätigte oder protokollierte visuelle Richtung/Styleframe, Funktions-Shot-Zuordnung, Gallery-Kartenname/Variante, genauen Demo-TSX, Gallery-Referenzbeispiele/Einzelbilder, endgültiges Storyboard, ausgewählte Shot-Karten und ästhetische Richtlinien; überprüfen Sie gleichzeitig gemäß references/final-review.md Konzeptkonsistenz, Funktionsvollständigkeit, Shot-Treue, visuelle/audio-technische Qualität und Datensicherheit, und erstellen Sie einen Bericht mit Frame-Nummernbeweisen für jeden Punkt. Der Ersteller hat Bestätigungsverzerrung für seine eigene Arbeit, die Erstprüfung darf niemals dem Benutzer überlassen werden.

9. Deterministisches Rendering: Date.now()/Math.random() ist verboten, alle Pseudozufallszahlen mit festem Seed (mulberry32/Hash, Seed von Index abgeleitet), Frame-für-Frame reproduzierbar.

Workflow

Autonome freie Erstellung führt references/pipeline.md ab Phase 0 kontinuierlich aus, ohne auf phasenweise Bestätigung des Benutzers zu warten. Gemeinsame Erstellung schließt zuerst nach references/guided-free-creation.md die Phasen 0–3 (Produktverständnis, visuelle Richtung, Shot-Zuordnung und Storyboard-Bestätigung) ab und fährt dann ab Phase 4 der Pipeline (endgültige Materialerfassung) fort, ohne erneut zu fragen oder neu zu entwerfen. In den Phasen 2–3 durchsuchen Sie die Frontmatter aller Karten in references/shots/ nach Energieverlauf und wählen Shots aus; in den Phasen 5–7 prüfen Sie kontinuierlich anhand references/aesthetic-rules.md selbst; in Phase 6 lesen Sie references/sound-design.md; bei Beat-getakteten Videos folgen Sie durchgängig references/music-beat-sync.md.

Welche Datei wann gelesen wird

Zeitpunkt	Lesen
Projektstart und Modus unbestimmt	Minimale schreibgeschützte Prüfung, dann drei vollständige Werbefilmmodi anbieten und empfehlen
Autonome freie Erstellung	pipeline.md (Agent führt Phasen 0–7 autonom durch, ohne auf phasenweise Bestätigung zu warten)
Gemeinsame Erstellung	guided-free-creation.md (Phasen 0–3 bestätigen), dann ab Phase 4 von pipeline.md fortfahren
Benutzer hat BGM ausgewählt	music-beat-sync.md (zuerst analysieren, dann Storyboard)
Vorlagenroute	template/TEMPLATE.md vollständig
Storyboard-Design	sequences/ Segmentvorlagen (zuerst das gesamte Filmgerüst füllen); shots/ gesamtes Frontmatter; ausgewählte Karten vollständig lesen
Shot-für-Shot-Implementierung	Diese Shot-Karte vollständig + genauer Demo-Quellcode gemäß „Referenzimplementierung“ + entsprechende Komponenten aus assets/lib/
Sounddesign	sound-design.md + assets/audio/
Abnahme	final-review.md + aesthetic-rules.md vollständige Checkliste (ausgeführt von unabhängigem Subagenten)

Asset-Verwendung

• assets/lib/ Komponenten kopieren in neues Projekt und dann frei modifizieren (nicht aus dieser Bibliothek importieren). Liste: PageCam (2.5D Seitenkamera – die Basis aller „echten Seiten“-Shots), DigitRoll, FlashCut, Caption, FlatPanel, VerticalTicker (3D unendliche Scrollwand), helpers (rand/shake/camera/motion). FlatPanel und helpers/camera benötigen three + @react-three/fiber + @remotion/three Abhängigkeiten, der Rest benötigt nur Remotion.
• assets/scripts/capture-template.mjs nach dem Kopieren die CONFIG oben ändern (BASE/Routen/Selektoren).
• assets/audio/ Soundeffekte direkt kopieren und verwenden (kostenlose kommerzielle Lizenz, siehe audio/ATTRIBUTION.md): audio/bgm/ sind rhythmisch starke BGM-Optionen; audio/sfx/<Kategorie>/ 149 Soundeffekte in 16 Kategorien (transition impact riser camera ui text paper film light data scifi mech glass fluid crowd counter), suchen Sie zuerst im Kategorieverzeichnis, die Liste finden Sie in sound-design.md. Der Begriff „sparkle“ ist im Verzeichnis light/ (kein sparkle/); S1 verbietet Klangfarbe nicht die Aktion – wenn das Bild einen Klick oder Schalter zeigt, muss passender Soundeffekt verwendet werden, aber die Hälfte in ui/ sind synthetische Feedback-Töne (tone/bleep/ notification), die einzeln angehört werden müssen, nicht gesamtes Verzeichnis freigegeben (Liste in sound-design 3.3); lange Samples und leichte Audio-Assets haben separate Listen, die speziell behandelt werden müssen (sound-design 4.1).
• demos/ Quellcode für jede Karte: Meist eigenständige Graustufen-Demos (einige importieren demos/_fixtures/Fixtures.tsx für gefälschte UI-Szenenkomponenten, einige importieren demos/_textures/ für echte Seiten-Texturen); kopieren Sie sie in ein Remotion-Projekt und führen Sie sie aus; einzelne Demos verwenden @remotion/motion-blur (CameraMotionBlur), benötigen npm i @remotion/motion-blur, Liste in demos/README.md.
• template/ Vollständig renderbares Projekt: npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4.
• gallery/ Statische Galerie: Bevorzugen Sie die direkte Online-Version für den Benutzer https://vincentwei1021.github.io/video-shotcraft/library.html ; für lokale Ausführung zuerst gallery/fetch-media.sh ausführen, um Beispielclips herunterzuladen (mp4 nicht im Git), dann cd gallery && python3 -m http.server 4178. 152 Karten mit 209 dynamischen Beispielclips durchstöbern/suchen/mehrfach auswählen und Kartennamen kopieren – geeignet, um dem Benutzer beim Ansehen der Clips die Shot-Auswahl zu ermöglichen.