Justice219/mobile-app-cinematic-video

Kino-ähnliches Video für mobile Apps

Verwandeln Sie einen echten App-Workflow in einen inszenierten 3D-Film mit der enthaltenen Three.js-, Playwright-, FFmpeg- und Python-Produktionsvorlage. Dies ist ein editierbarer, codebasierter Video-Workflow, kein After Effects-Projekt.

Beginnen Sie mit der App und der bestehenden Ausrichtung

• Untersuchen Sie bestehende Exporte, den Projektquellcode, aktuelles Benutzerfeedback, das tatsächliche Laufzeitthema und verfügbare App-Daten, bevor Sie mit der Erstellung beginnen. Bewahren Sie genehmigte Entscheidungen auf. Legen Sie bei einem neuen Projekt das zu demonstrierende Feature, die Zielgruppe, das Format und verfügbare Aufnahmen fest.
• Nehmen Sie echte App-Komponenten mit fiktiven Fixtures oder autorisierten Aufzeichnungen auf. Messen Sie tatsächliche Tap-Ziele, Scroll-Offsets und hervorgehobene Grenzen. Ersetzen Sie niemals echtes Feature-Verhalten durch erfundene Bildschirme und bezeichnen Sie es als authentisch. Kennzeichnen Sie inszenierte, nur nativ dargestellte Visualisierungen in der Lieferprovenienz.
• Passen Sie die Laufzeitfarben an. Die enthaltene Beispielpalette ist nur ein Standard; es ist nicht die Marke einer anderen App. Dark Mode durchgängig, spärlicher redaktioneller Text und ein Phone-Exit/Brand-Reveal sind die Präferenzen des ursprünglichen Projekts, die konfigurierbar sind, wenn der Benutzer etwas anderes wünscht.

Produktionsablauf

Lesen Sie references/workflow.md für die Produktionsmethode und heikle Timing-/Geometriedetails. Lesen Sie references/capture.md, wenn Sie Bildschirmaufnahmen erstellen oder aktualisieren. Lesen Sie references/timeline.md, wenn Sie Aktionen, Kameraposen, Scrollen oder Text erstellen.

1. Führen Sie für ein neues Projekt python3 scripts/scaffold.py /absolute/neues/projekt aus diesem Skill-Ordner aus. Es kopiert assets/template und erstellt klar gekennzeichnete synthetische Demonstrationsbildschirme. Ersetzen Sie diese Bildschirme vor einer echten Lieferung. Bearbeiten Sie bei einem vorhandenen Film dessen Projekt direkt, anstatt erneut zu scafolden.
2. Installieren Sie im generierten Projekt die Node-/Python-Abhängigkeiten und Chromium, wie im Repository-README dokumentiert. Setzen Sie project.json basierend auf dem tatsächlichen App-Theme, optionalen eigenen Schriftarten und dem Markenbild/-crop. Der aktuelle Renderer zielt auf 1080×1920 bei 30 fps ab, mit 430×860 CSS-App-Aufnahmen bei DPR 3; eine Änderung des Seitenverhältnisses erfordert koordinierte Geometrie- und Koordinatenänderungen.
3. Nehmen Sie den Workflow auf und schreiben Sie source/films.json. Verwenden Sie jeweils eine primäre Kamerabewegung, schnelles taktiles Feedback und klare Aufbau → Aktion → Ergebnis-Sequenzen. Halten Sie das erzählte Feature sichtbar, wenn es gesprochen wird. Verwenden Sie kurzen zusätzlichen Text zur Betonung; Sidecar-Untertitel sind eine separate Lieferung.
4. Schreiben Sie source/narration.json und generieren Sie fehlende Narration mit python3 source/narrate.py nur, wenn die Sprachgenerierung autorisiert ist. Stellen Sie ELEVENLABS_API_KEY und ELEVENLABS_VOICE_ID über die Prozessumgebung bereit. Speichern Sie das MP3-/Ausrichtungspaar im Cache; setzen Sie niemals Geheimnisse in den Quellcode, Screenshots, Logs oder ZIPs. Fehlgeschlagene kostenpflichtige Anfragen stoppen ohne automatischen Wiederholungsversuch. Verwenden Sie zwischengespeichertes Audio für Iterationen.
5. Verwenden Sie die zurückgegebenen Zeichen-Zeitstempel plus den 0,65-Sekunden-Mix-Offset, um Highlights, Taps, Kamerafokus, Text und Ende zu steuern. Rendern Sie Vorschaubilder, überprüfen Sie sie und rendern Sie dann den Film. Die Vorlage unterstützt --preview, --only INDEX und --manifest PATH; Mix/Verify/Package verwenden source/films.json.
6. Führen Sie python3 source/mix.py aus. Bevorzugen Sie autorisierte Soundbibliothek-Samples in assets/audio/sfx; fehlende Samples verwenden die ursprünglichen prozeduralen Fallbacks. Halten Sie Effekte verständlich unter der Stimme. Die Vorlage richtet transiente Peaks an Aktionen aus und dämpft Effekte unter der Narration.
7. Führen Sie python3 source/verify.py aus, überprüfen Sie kritische Übergänge und erzählte Momente visuell und hören Sie den finalen Mix. Automatisierte Dunkelbild-/Lautstärke-Prüfungen stellen nicht sicher, dass das richtige Feature gezeigt wird. Überprüfen Sie Untertitel und den gesamten versprochenen Text.
8. Führen Sie python3 source/package.py aus, nachdem die Exporte bestanden haben. Überprüfen Sie den expliziten Inhalt des Archivs und die Medienrechte vor dem Teilen. Liefern Sie MP4, optional SRT/VTT, Vorschauen, editierbaren Quellcode und Provenienz. Veröffentlichung, Bereitstellung und Posting bleiben im gewünschten Umfang des Benutzers.

Bewahren Sie diese Invarianten

• App-Textur verwendet sRGB und toneMapped:false; die Szenenbeleuchtung darf die App nicht verfärben.
• Highlights und Scroll-Pixel verwenden dieselbe gemessene Scroll-Interpolation. Ein Atlas bleibt aktiv, nachdem das Scrollen beendet ist; andernfalls können kurze Scroll-Dauern einen leeren Bereich freilegen.
• Der Kamerafokus wird vor der Exit-Transformation berechnet, damit die Kamera dem abfahrenden Telefon nicht folgt. Beginnen Sie den Brand-Reveal zügig während der abschließenden Narration; lassen Sie keine toten Haltepunkt.
• Weltraum-Partikel haben Tiefentest und perspektivische Größenanpassung. Halten Sie sie dem App-Inhalt untergeordnet.
• Verwenden Sie die GPU explizit auf macOS (--enable-gpu --use-angle=metal), rendern Sie deterministische Zeiten frame / 30 und leiten Sie Frames mit Gegendruck in FFmpeg.
• Kopieren Sie keine Anmeldeinformationen, proprietären Anwendungsquellcode, unlizenzierte Schriftarten/SFX oder Kundendaten in einen wiederverwendbaren Skill oder ein öffentliches Repository.

Das optionale scripts/demo_audio.py erstellt einen synthetischen Ton für einen Offline-Pipeline-Smoke-Test. Es ist explizit keine Narration und darf niemals als fertiger Voice-Over ausgegeben werden.