CommunityCodierung & Entwicklunggithub.com

syklayou-glitch/video-shotcraft

Ein AI-Agent-Skill zur Erstellung von filmischen Produktvideos mit Remotion: 152 Shot-Rezeptkarten, 2.5D-Kamerabewegungen, beat-synchrone Schnitte und filmreife Soundeffekte.

Was ist video-shotcraft?

Dieses Skill befähigt KI-Agenten (z. B. Claude Code, Cursor, Codex), vollständige Produkt-Showreels oder einzelne, filmische Szenen mit Remotion zu erstellen. Es enthält eine umfangreiche Bibliothek von 152 vorgefertigten „Shot Recipe Cards“, die von 2.5D-Kamerafahrten über beat-synchrone Schnitte bis hin zu filmreifen Soundeffekten reichen. Der Workflow ist in sechs Phasen unterteilt und bietet drei Modi: (1) die direkte Nutzung einer geprüften Vorlage (Ink Press), (2) die autonome kreative Freiheit des Agenten, der eigenständig Entscheidungen trifft, oder (3) die gemeinsame Erstellung mit schrittweiser Freigabe durch den Benutzer. Das Skill legt großen Wert auf die Extraktion und Wiederverwendung des echten visuellen Stils einer Webseite oder App (Designsystem, Schriftarten, Farben), die Verwendung von echten Screenshots statt nachgebautem UI, eine strenge Beat-Sync-Analyse (z. B. mit librosa) für stark rhythmische Musik und eine vollständige Qualitätskontrolle durch einen unabhängigen Sub-Agenten vor der Auslieferung. Es unterstützt deterministisches Rendering und kann optional CapCut-Exportdateien für die Nachbearbeitung durch den Benutzer generieren.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add syklayou-glitch/video-shotcraft

Installed? Explore more Codierung & Entwicklung skills: steipete/bluebubbles, steipete/eightctl, steipete/blucli · View all 6 →

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

video-shotcraft: Filmische Produktvideos erstellen

Eine eigenständige Bibliothek zur Videoproduktion: 152 Shot-Rezeptkarten (mit Demo-Quellcode und dynamischer Sample-Galerie), eine abgenommene vollständige Showreel-Vorlage, wiederverwendbare Komponenten und Audio-Assets sowie ein sechsphasiger Workflow.

Der aktuelle Fokus liegt auf Web-/Desktop-Produkt-Showreels, aber die Shot-Karten selbst sind universelle Bewegungsvokabeln – sie können auch einzeln für einzelne Szenen in beliebigen Videos verwendet werden.

Zuerst den Modus bestimmen

Bei vollständigen Showreels gibt es drei sich gegenseitig ausschließende Modi. Bevor Sie mit der Materialerfassung, dem Storyboard oder der Implementierung beginnen, prüfen Sie, ob der Benutzer bereits eine klare Wahl getroffen hat; falls ja, führen Sie direkt aus und fragen Sie nicht erneut oder schalten Sie in einen anderen Modus um.

  1. Direktvorlage verwenden: Behalten Sie den ursprünglichen Austauschprozess von Ink Press bei. Lesen Sie template/TEMPLATE.md und ersetzen Sie Screenshots, Texte und Markeninformationen des Zielprodukts gemäß der vorhandenen Szenenstruktur.
  2. Autonome freie Erstellung: Lesen Sie references/pipeline.md. Der Agent entscheidet auf der Grundlage der vorhandenen Anforderungen und des Projektinhalts eigenständig über die visuelle Richtung, die Szenenzuordnung, das Storyboard, das Material und das Audio und arbeitet kontinuierlich bis zum fertigen Video; er hält nicht zur Bestätigung des Benutzers bei der Produktzusammenfassung, dem Styleframe, der Szenenzuordnung oder dem Storyboard an.
  3. Gemeinsame Erstellung: Lesen Sie references/guided-free-creation.md. Der Agent legt zunächst begründete Einschätzungen und Pläne vor, und der Benutzer bestätigt nacheinander die Produktzusammenfassung, die Entscheidungsfindung, die visuelle Richtung, die Szenenzuordnung und das endgültige Storyboard; nach Freigabe des Storyboards fährt der Agent mit der endgültigen Materialerfassung und Produktion gemäß references/pipeline.md fort.

Wenn der Benutzer einen Projektpfad, eine URL, einen Bildschirmrekorder oder einen Seiten-Screenshot bereitgestellt, aber noch keinen Modus gewählt hat, führen Sie zunächst eine minimale, schreibgeschützte Produktprüfung durch: Verstehen Sie die Produktpositionierung, die Hauptfunktionen, die visuelle Seite, den präsentierbaren Status und die Risiken des Materials; ändern Sie das Geschäftsprojekt nicht, sammeln Sie keine sensiblen Daten und schreiben Sie keinen Videocode. Nach der Prüfung stellen Sie die drei Modi vor und erläutern Sie:

  • Ob Ink Press für das Produkt geeignet ist, sowie die konkreten Gründe für die Eignung oder Nichteignung;
  • Ob die autonome freie Erstellung und die gemeinsame Erstellung jeweils geeignet sind und welche visuellen Hinweise des Produkts voraussichtlich beibehalten werden;
  • Welchen Modus der Agent empfiehlt, sowie die Begründung und die damit verbundenen Kompromisse.

Fragen Sie dann explizit: „Basierend auf der obigen Produktprüfung empfehle ich den Modus ××. Soll ich mit diesem Modus fortfahren?“ Informieren Sie den Benutzer gleichzeitig, dass er unter https://vincentwei1021.github.io/video-shotcraft/ dynamische Samples durchstöbern und visuelle Effekte auswählen kann, die er in seinem Video verwenden möchte.

Wenn der Benutzer noch kein prüfbares Projekt oder keine prüfbare Seite bereitgestellt hat, stellen Sie die drei Modi kurz vor und fragen Sie dann; empfehlen Sie nicht standardmäßig Ink Press, nur weil es eine vorgefertigte 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 und wartet nicht auf Bestätigung in jeder Phase.
  • Benutzer wählt gemeinsame Erstellung: Lesen Sie references/guided-free-creation.md vollständig und arbeiten Sie gemäß den dort festgelegten Bestätigungspunkten zusammen.
  • Benutzer ist unentschlossen: Halten Sie hier an und warten Sie auf eine Auswahl; treffen Sie keine Standardauswahl 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. Z. B. „Erstelle mit der Ink Press-Vorlage eine Showreel für mein Produkt.“ Fragen Sie dann nicht erneut, sondern lesen Sie template/TEMPLATE.md vollständig und folgen Sie der Vorlagenroute.

Ausnahme 2: Wenn der Benutzer explizit bestimmte Shot-Karten verwenden oder referenzieren möchte, sind die Shot-Einschränkungen bereits festgelegt. Z. B. „Verwende für dieses Video deck-deal-flyin und row-embed“ 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 Namensauflösungsregeln der Galerie, lesen Sie jede Karte vollständig und lokalisieren Sie den genauen Demo-Quellcode gemäß der „Referenzimplementierung“ der Karte. Einzelne Shots können nach der Bestimmung des Zielmaterials ausgeführt werden; wenn für eine vollständige Showreel noch nicht angegeben wurde, ob die autonome freie Erstellung oder die gemeinsame Erstellung verwendet werden soll, fragen Sie nur nach diesen beiden Modi. Die angegebenen Shots dienen als Einschränkungen für die spätere Produktion und werden nicht automatisch mit der gemeinsamen Erstellung gleichgesetzt.

Vier Verwendungsmöglichkeiten

  1. Vollständige Showreel (Vorlagenroute): Für ein Ergebnis, das der Vorlage sehr ähnlich ist → lesen Sie template/TEMPLATE.md und ersetzen Sie das Material gemäß der „Anleitung zur Reproduktion mit Produktaustausch“ Szene für Szene.
  2. Vollständige Showreel (autonome freie Erstellung): Für einen neuen Stil und um den Agenten zu ermächtigen, autonom zu entscheiden → lesen Sie references/pipeline.md und arbeiten Sie kontinuierlich vom Produktverständnis bis zur Endkontrolle, ohne in der Zwischenzeit auf Bestätigung in jeder Phase zu warten.
  3. Vollständige Showreel (gemeinsame Erstellung): Um an wichtigen Entscheidungen teilzunehmen → lesen Sie references/guided-free-creation.md, bestätigen Sie die Produktzusammenfassung, die Entscheidungsfindung, die visuelle Richtung, die Szenenzuordnung und das endgültige Storyboard; fahren Sie nach der Freigabe mit der endgültigen Materialerfassung aus der Pipeline fort.
  4. Einzelner Shot / Einzelner Effekt: Wählen Sie eine Karte aus references/shots/ (oder lassen Sie den Benutzer in der gallery/-Galerie wählen), lesen Sie den vollständigen Kartentext und lokalisieren Sie den genauen Demo-Quellcode gemäß der „Referenzimplementierung“ und passen Sie ihn an das Zielmaterial an.

Grenze zwischen autonomer freier Erstellung und gemeinsamer Erstellung

Autonome freie Erstellung überlässt dem Agenten die kreativen und technischen Entscheidungen. Der Agent leitet die Produktschwerpunkte, die visuelle Richtung, die Szenenzuordnung, das Storyboard, die Materialverarbeitung und das Audio-Schema dynamisch aus dem Projektinhalt ab, dokumentiert die wichtigen Entscheidungen und führt sie dann direkt aus; es sei denn, es fehlen notwendige Eingaben, die nicht sicher abgeleitet werden können, stellt er keine Fragen, hält nicht in jeder Phase an und fordert keine Bestätigung von Zwischenergebnissen an. Explizite Anforderungen des Benutzers sind stets Einschränkungen und dürfen nicht durch die Standardwahl des Agenten überschrieben werden.

Gemeinsame Erstellung verwendet die schrittweise Bestätigung. Standardmäßig wird references/guided-free-creation.md gelesen, pro Runde werden nur 1–3 Fragen gestellt, die die Nacharbeit am meisten reduzieren, und an den Punkten Produktzusammenfassung, Entscheidungsfindung, visuelle Richtung, Szenenzuordnung und endgültiges Storyboard wird angehalten und auf die Bestätigung des Benutzers gewartet. Der Benutzer bestätigt die geschäftlichen und kreativen Richtungen; der Agent erledigt autonom die Erfassungsmethode, Implementierungsparameter, SFX-Platzierung, das Remotion-Projekt, das Rendern und die technische Qualitätssicherung.

Wenn der Benutzer in der gemeinsamen Erstellung explizit sagt „Entscheide du alles“ oder „Überspringe die Bestätigung und mach einfach“, wechseln Sie zur autonomen freien Erstellung und dokumentieren Sie diese Wahl; behaupten Sie nicht, autonom vorzugehen, während Sie weiterhin eine schrittweise Bestätigung verlangen.

Die Zuordnung von Funktionen zu Shots ist nur die „Auswahl der zu verwendenden Bewegungsgrammatik“, nicht das vollständige Storyboard. Nach der Bestätigung der Zuordnung in der gemeinsamen Erstellung muss der Agent die Shot-Reihenfolge, die Dauer, die spezifischen Bilder, den Seitenstatus, die Materialquellen, Untertitel, Übergänge und SFX angeben; erst nach der Bestätigung des vollständigen Storyboards wird mit der endgültigen Materialerfassung begonnen. Wenn der Benutzer einen Shot-Namen aus der Galerie kopiert, muss er nur den Kartennamen oder „Kartenname · Stilname“ angeben; der Agent ist für das Lesen der lokalen Rezeptkarten und des Demo-Quellcodes verantwortlich.

Kernkonzepte

  1. Bestehende Seiten müssen mit echten Screenshots nachgebildet werden; die manuelle Erstellung von UI ist auf Nicht-Nachbildungsszenarien beschränkt, und Qualität und Ausdrucksklarheit sind harte Anforderungen. Wenn Sie die echte Seite eines Produkts darstellen, starten Sie sofort einen lokalen Dev-Server und verwenden Sie einen Headless-Browser, um 2x-Texturen der gesamten Seite, elementweises Ausschneiden und eine layout.json-Koordinatentabelle zu erfassen. In Nicht-Nachbildungsszenarien (abstrakter Einstieg / Markenteil / unabhängige Demonstrationskomponenten) ist die manuelle UI-Erstellung erlaubt, aber wenn sie nicht die Qualität einer veröffentlichten Seite erreicht oder der Betrachter nicht versteht, was sie ausdrückt, kehren Sie zur Screenshot-Route zurück. Seiten-/Daten nach Risiko behandeln: Öffentliche Demodaten dürfen nur nach expliziter Bestätigung in der Produktzusammenfassung beibehalten werden; kundenbezogene, persönliche, interne, schlüsselbezogene, Echtzeit- oder andere sensible Daten müssen mit fiktiven oder anonymisierten Inhalten verwendet und vor der Erfassung eingefroren werden.

  2. Die visuelle Sprache des gesamten Videos muss aus dem Produkt selbst erwachsen, nicht ein separates, nicht zusammenhängendes „Showreel-Skin“ erschaffen. Bevor Sie ein Styleframe erstellen, extrahieren Sie das Designsystem aus dem Produkt / der Website, dem Quellcode oder den berechneten Stilen und schreiben Sie eine Design-Spezifikation: Schriftfamilie und -gewicht, 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, Typografie, Übergänge, Partikel, Lichteffekte und andere Bewegungseffekte im Video müssen diese Tokens wiederverwenden oder zurückhaltend erweitern und gleichzeitig den Ton, den Geschmack und die Haptik des Produkts treffen. Bei Verwendung der Vorlagen- oder Shot-Karten-Route erben Sie nur deren Szenenstruktur, Bewegungsgrammatik, Rhythmus und bereits eingestellte Parameter; Schriftarten, Layout, Farbpalette und Materialien müssen gemäß dem Zielprodukt neu eingekleidet werden. Wenn aufgrund der Erzählung eine Abweichung von der Produktvisuell erforderlich ist, erläutern Sie in der gemeinsamen Erstellung zunächst den Grund und lassen Sie ihn vom Benutzer bestätigen; in der autonomen freien Erstellung schreiben Sie den Grund und die Abwägung in die Design-Spezifikation und fahren fort.

  3. Filmische Wirkung entsteht aus der Kombination von Kameraführung, Licht, Rhythmus und Sound, nicht aus Effekthascherei. Wiederholt anerkannt wurden: vollständiger Bewegungsbogen eines einzelnen Protagonisten (Spotlight auf → Zoom rein → Schweben → Zurück an Ort), durch physische Metaphern angetriebene Beschleunigung (Karten austeilen), schräge Orbit-Umrundung einer Nahaufnahme, riser → impact → sparkle als Satz für Soundeffekte. Der Einlass von Massenelementen erfolgt durch die Bewegung selbst, nicht durch einzelnes Aufleuchten – dekorative Glitzereffekte/Massenblitzen wirkt billig, einzelne hochwertige Lichteffekte sind in Ordnung.

  4. Jeder Shot zeigt nur einen Effekt; nachdem die Schlüsselinformation gelegt ist, muss geatmet werden. Eine Animationsmethode (Einfliegen / Stapeln / Umblättern) ist im gesamten Video nur einmal der Hauptdarsteller; wiederholte Shots und wiederholte Taglines werden gelöscht. Die Rhythmuspräferenz ist einseitig: Historisches Feedback zeigt alle auf „Langsamer / Anhalten“, nie einmal „zu langsam“ – Markenlogo hält ≥1s, nach Massenbewegungen 0,5s Stillstand, Eröffnungsbewegung des Hauptakteurs volle 3s. Reservieren Sie bei der Timeline-Erstellung von Anfang an Frames für Hold/Ruhe.

  5. Bei stark rhythmischer Hintergrundmusik müssen alle Übergänge und Bewegungen auf den Beat treffen. Benutzer hat Musik ausgewählt → vor Arbeitsbeginn eine Rhythmusanalyse durchführen (librosa-Gitteranpassung für echte BPM/Phase + Kick/Snare/Hihat-Dreiklassifizierung zur Platzierung von Drums), Gitter erst nach Bestätigung der Transientenabdeckung für das Storyboard verwenden; Timeline mit Taktzahlen beatF(n) schreiben, spärliche Akzente an echte Transienten binden, nicht an Gitterinterpolationspunkte. Nach dem Rendern die Audiospur aus dem fertigen Video extrahieren und die Schnittpunktabweichung ≤3f prüfen. Beat-Synchronisation betrifft den Zeitpunkt, nicht die Amplitude – ein auf den Beat wirkender Schlag auf die gesamte Bild-/Kameraebene gilt als großer Slam, ≤3 pro Video (aesthetic-rules R4), andere Beat-Punkt-Bewegungen wirken nur auf der Elementebene. Methodik siehe references/music-beat-sync.md. Videos mit BGM werden standardmäßig in zwei Versionen ausgeliefert: mit BGM und ohne BGM (SFX beibehalten), über die bgm-InputProp von derselben Timeline gerendert, damit der Benutzer später problemlos selbst Musik hinzufügen kann.

  6. Vor der Verwendung von Shot-Karten-Effekten muss der Galerie-Index geparst 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 gemäß der „Referenzimplementierung“ im Kartendokument. Rezeptkarten geben Semantik und Parametertabellen; der genaue Demo-Quellcode ist die Wahrheit der abgestimmten Parameter (Easing, Zeitverhältnis, Maskierungszeitpunkt, bekannte Problemumgehungen). Anpassungen sind erlaubt, aber Parameter, die auf einer Karte als „bekannte Fallstricke / Achillesferse“ markiert sind, dürfen nicht herabgestuft werden – der Qualitätsstandard kann nur erhöht, nicht gesenkt werden. Das Neuschreiben basierend auf dem Kartennamen und Verständnis bedeutet Verzicht auf die gesamte Abstimmungsarbeit.

  7. Gemeinsame Erstellung priorisiert kostengünstige Bestätigungen; autonome freie Erstellung dokumentiert dieselben Entscheidungen als Ausführungsnachweise. Die Reihenfolge bleibt: Produktzusammenfassung → Entscheidungstabelle von Anforderung zu Ausführung → Textrichtung → Styleframe → Szenenzuordnung → Storyboard. In der gemeinsamen Erstellung wird sie dem Benutzer zur Bestätigung vorgelegt; in der autonomen freien Erstellung trifft der Agent die Auswahl selbst und arbeitet kontinuierlich. Kein Modus sollte mit der Shot-für-Shot-Implementierung beginnen, bevor die Richtung festgelegt ist.

  8. Qualitätskontrolle durchgängig + unabhängige Prüfung vor Auslieferung. Ab Phase 5 wird jeder Shot mit npx remotion still als Standbild selbst geprüft. Nach jeder Änderungsrunde wird das gesamte Video gerendert + mit ffmpeg Frames extrahiert und zurückgespult. Vor der Auslieferung muss ein Sub-Agent mit sauberem Kontext eine unabhängige Endkontrolle durchführen. Die Prüfungseingaben umfassen das fertige Video, Keyframes, die Produktzusammenfassung, die Entscheidungstabelle von Anforderung zu Ausführung, die aktuelle Modusbestätigung oder dokumentierte visuelle Richtung / Styleframe, die Funktions-zu-Shot-Zuordnung, die Galeriekarten / -varianten, den genauen Demo-TSX, die Galerie-Referenzsamples / -frames, das endgültige Storyboard, die ausgewählten Shot-Karten und die ästhetischen Kriterien; prüfen Sie gemäß references/final-review.md gleichzeitig die konzeptionelle Konsistenz, die funktionale Vollständigkeit, die Shot-Treue, die technische Qualität von Video/Audio und die Datensicherheit und erstellen Sie einen Bericht mit Framenummer-Belegen. Der Ersteller hat einen Bestätigungsfehler für seine eigene Arbeit; die Erstkontrolle darf niemals dem Benutzer überlassen werden.

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

Workflow

Bei der autonomen freien Erstellung wird references/pipeline.md von Phase 0 an kontinuierlich ausgeführt, ohne in jeder Phase auf Bestätigung zu warten. Bei der gemeinsamen Erstellung wird zuerst references/guided-free-creation.md gelesen, um die Phasen 0–3 (Produktverständnis, visuelle Richtung, Szenenzuordnung und Storyboard) abzuschließen und zu bestätigen, dann mit Phase 4 der Pipeline (endgültige Materialerfassung) fortgefahren, ohne Fragen zu wiederholen oder neu zu entwerfen. In den Phasen 2–3 werden die Frontmatter der Karten in references/shots/ gescannt und Shots basierend auf der Energiekurve ausgewählt; in den Phasen 5–7 wird kontinuierlich gegen references/aesthetic-rules.md selbstgeprüft; Phase 6 liest references/sound-design.md; bei Beat-synchronen Videos wird durchgehend references/music-beat-sync.md verwendet.

Nach der Auslieferung des fertigen Videos in allen Modi wird der Benutzer standardmäßig einmal gefragt, ob auch eine CapCut-Projektdatei exportiert werden soll (in der CapCut der Untertiteltext / die Schriftgröße / die Farbe geändert, Shots verlangsamt/neuanordnet, Audio angepasst oder ersetzt werden kann); wenn der Benutzer dies wünscht oder den Export explizit anfordert, lesen Sie references/jianying-export.md und führen Sie den Export aus.

Welche Datei wann gelesen wird

ZeitpunktLesen
Projektstart und Modus unbestimmtMinimale schreibgeschützte Prüfung, dann drei vollständige Showreel-Modi anbieten und empfehlen
Autonome freie Erstellungpipeline.md (Agent erledigt Phasen 0–7 autonom, wartet nicht in jeder Phase auf Bestätigung)
Gemeinsame Erstellungguided-free-creation.md (Bestätigung der Phasen 0–3), dann mit pipeline.md Phase 4 fortfahren
Benutzer hat BGM ausgewähltmusic-beat-sync.md (zuerst analysieren, dann Storyboard)
Vorlagenroutetemplate/TEMPLATE.md vollständig
Storyboard-Designsequences/ Szenenvorlagen (zuerst das gesamte Filmskelett ausfüllen); shots/ alle Frontmatter; ausgewählte Karten vollständig lesen
Shot-für-Shot-ImplementierungVollständiger Text der Shot-Karte + genauer Demo-Quellcode gemäß „Referenzimplementierung“ + entsprechende Komponenten aus assets/lib/
Sound-Designsound-design.md + assets/audio/
Qualitätskontrollefinal-review.md + aesthetic-rules.md vollständige Checkliste (von unabhängigem Sub-Agenten ausgeführt)
Nach Auslieferung des fertigen Videos (CapCut-Projektexport)jianying-export.md + jianying-export/ Plattformmodule

Asset-Verwendung

  • assets/lib/-Komponenten werden in ein neues Projekt kopiert und können dann frei modifiziert werden (nicht als Import aus dieser Bibliothek). Liste: PageCam (2.5D-Seitenkamera – das Fundament aller „echten Seiten“-Shots), ClipCard (verpackt externes Videomaterial mp4 zu einer „Karten-Hauptfigur“, die vom Bewegungsgerüst der Shot-Karte angetrieben werden kann, inklusive OffthreadVideo-Crossfade-Schleife – wenn das Material kürzer als der Shot ist, nahtlos weiterspielen), DigitRoll, FlashCut, Caption, FlatPanel, VerticalTicker (3D unendliche Scroll-Wand), helpers(rand/shake/camera/motion). FlatPanel und helpers/camera benötigen three + @react-three/fiber + @remotion/three Abhängigkeiten, der Rest nur remotion.
  • assets/scripts/capture-template.mjs kopieren, dann die CONFIG am Anfang ändern (BASE/Route/Selektoren).
  • assets/audio/ Soundeffekte direkt kopieren und verwenden (kostenlose kommerzielle Lizenz, siehe audio/ATTRIBUTION.md): audio/bgm/ enthält stark rhythmische BGM-Optionen; audio/sfx/<Kategorie>/ 149 Soundeffekte nach Kategorie 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 vollständige Liste finden Sie in sound-design.md. Der Glossarbegriff „sparkle“ hat das Verzeichnis light/ (kein sparkle/); S1 verbietet Timbre, nicht Aktion – wenn im Bild tatsächlich ein Klick / Schalter ist, sollte man ein Sounddesign machen, aber die Hälfte der ui/-Sounds sind synthetische Feedback-Töne (tone/bleep/notification), die einzeln angehört werden müssen und nicht als ganzes Verzeichnis freigegeben werden dürfen (Liste siehe sound-design 3.3); lange Samples und leichte Audiomaterialien haben jeweils eine Liste, die speziell behandelt werden muss (sound-design 4.1).
  • demos/ Quellcode aller Karten: Meist eigenständige Graustufen-Demos (einige importieren demos/_fixtures/Fixtures.tsx mit UI-Szenen-Attrappen, einzelne importieren echte Seitentexturen aus demos/_textures/); einfach in ein Remotion-Projekt kopieren und ausführen; einzelne Demos verwenden @remotion/motion-blur (CameraMotionBlur), benötigen npm i @remotion/motion-blur, Liste siehe demos/README.md.
  • template/ Vollständig renderbares Projekt: npm install && npx remotion render src/index.ts AiflPromo out/promo.mp4.
  • jianying-export/ CapCut-Projekt-Exportmodul: mac_draft.py (Getestet auf Mac CapCut 11.2), windows_draft.py (Implementierung gemäß Upstream-Unterstützungspfad, nicht auf echter Hardware verifiziert), smoke_test.py (Minimaler Rauchtest für neue Umgebungen). Ablauf, Timeline-Extraktion und Spurbaumethode siehe references/jianying-export.md; benötigt venv + pip install pyJianYingDraft.
  • gallery/ Statische Galerie: Bevorzugt die Online-Version für den Benutzer https://vincentwei1021.github.io/video-shotcraft/library.html ; lokal ausführen: zuerst gallery/fetch-media.sh um Samples zu ziehen (mp4 ist nicht in git), dann cd gallery && python3 -m http.server 4178. 152 Karten, 209 dynamische Samples zum Durchstöbern / Suchen / Mehrfachauswahl und Kopieren von Kartennamen – ideal, damit der Benutzer bei der Ansicht Samples auswählen kann.

Verwandte Skills