huypham85/motion-video

Motion Video

Erstellt einen 10–30 Sekunden langen Bewegtgrafik-Spot als echten Code: Ein Swift-Synthesizer schreibt die Partitur, ein Swift-CoreGraphics/CoreImage-Renderer zeichnet jedes Bild auf demselben Taktraster (mit Sub-Frame-Bewegungsunschärfe, echtem Gaußschem Weichzeichner, Milchglas-Effekt, Filmkorn) und AVFoundation kodiert H.264 + AAC. Alles was benötigt wird, befindet sich in diesem Skill-Ordner; macOS + Xcode-Befehlszeilenwerkzeuge sind die einzigen Abhängigkeiten.

Der Maßstab ist "eine Motion-Designer-Showreel", nicht eine Demo: Jeder Cue trifft den Takt, nichts auf dem Bildschirm ist dekoratives Rauschen, und jede Behauptung ist wahr.

Ordnerstruktur

• engine/ — audio_core.swift + audio_main.swift (Partitur-Engine), video_core.swift + video_main.swift (Render-Engine). Nicht pro Projekt bearbeiten; Projektcode kommt in den Projektordner.
• scripts/mv.sh — Build + Run: audio, stills <beats>, video [out]. levels.py, sheet.py, probe.swift werden von diesem Skript verwendet.
• Das vollständige, ausgearbeitete Projekt befindet sich im Companion-Skill app-3d-video (template/: score.swift, scenes.swift, project.env, sowie die SceneKit-Ebene s3d.swift). Für ein reines 2D-Video kopieren Sie dessen project.env und score.swift und schreiben eine neue scenes.swift basierend auf references/engine-api.md.
• examples/scores/energetic-128bpm.swift — Score für hohe Energie (Drops, Fills, Drop-Out).
• references/motion-direction.md — Abstimmung von Tempo, Easing, Übergängen, Layout, Storytelling-Mustern, Review-Checkliste. Vor der Planung der Szenen lesen.
• references/score-guide.md — Rezepte für Tempo/Key/Arrangement, Anpassung an den Key einer Marke, Lautstärke-Zielwerte. Vor dem Schreiben der Partitur lesen.
• references/engine-api.md — Jede Zeichen-/Audiofunktion mit ihrer Signatur. Beim Schreiben von Code lesen.

Workflow

1. Briefing (Fragen auf das beschränken, was das Ergebnis verändert)

Klärung: Zweck und Zielgruppe, Dauer, Seitenverhältnis (Standard 1080×1920 vertikal; 1920×1080 oder 1080×1350 über W/H), Tonfall, Sprache der Texte. Standardwerte, falls der Benutzer keine Angaben macht: 15 s, vertikal, englischer Text, Tonfall passend zur Produktdomäne. Wenn der gewünschte Inhalt nicht in die Dauer bei einem für den Tonfall passenden Tempo passt, teilen Sie dies mit und fragen Sie, worauf verzichtet werden soll – Dauer oder Inhalt – anstatt zu überladen. (Eine Gesundheits-App wollte ruhiges Tempo und 15 s; die Antwort war, Szenen zu streichen, nicht zu beschleunigen.)

2. Recherche dessen, was wahr ist

Alles auf dem Bildschirm muss vertretbar sein:

• Was ausgeliefert wurde: git log seit den letzten Versionssprüngen, CHANGELOG, Release Notes.
• Exakte Produkttexte: Lesen Sie den Code für Benachrichtigungstitel/-inhalte, Schaltflächenbeschriftungen, Siri/Intent-Dialogtexte, Snippet-Überschriften, Onboarding-Texte. Zitieren Sie es; paraphrasieren Sie es nicht zu einem Versprechen.
• Kennzeichnen Sie alles Illustrative (Beispielnamen, Zählungen, Zeiten) und teilen Sie es dem Benutzer bei der Auslieferung mit.
• Halten Sie die Geschichte intern konsistent: Wenn Szene 1 Metformin um 9:41 Uhr protokolliert, kann Szene 2 nicht fragen, wann Metformin zuletzt eingenommen wurde, und "vor 13 Stunden" hören – verwenden Sie ein anderes Medikament.

3. Assets

Sammeln Sie echte Marken-Assets: App-Symbol (größtes PNG), Logo, Markenfarben (Design-Tokens/Asset-Katalog), offizielle Abzeichen, die das Produkt bereits verwendet (z. B. "Works with Apple Health"), und die eigenen Sounds des Produkts (Benachrichtigungs-/Sonic-Logo-WAVs). Konvertieren Sie One-Shots für den Synthesizer: afconvert -f WAVE -d LEF32@48000 -c 1 in.wav assets/name.wav; SVG → PNG mit sharp/resvg, falls im Repository vorhanden, oder qlmanage -t -s 1024.

Bevorzugen Sie nachgebildete Vektor-UI mit einem Datensatz (ein Hintergrundbild, eine Uhrzeit, eine Reihe von Namen) gegenüber rohen Screenshots. Screenshots aus verschiedenen Quellen (verschiedene Zeiten, Geräte, Daten, Bildschirme) nebeneinander sehen falsch aus; Zuschauer bemerken dies sofort. Wenn Sie Screenshots verwenden, nehmen Sie diese in einer Sitzung auf mit xcrun simctl status_bar booted override --time 9:41 …, setzen Sie dies anschließend zurück und fotografieren Sie niemals eine andere App, die zufällig geöffnet ist.

4. Planung auf dem Taktgitter

Dauer = Takte × 4 × 60 / BPM, wählen Sie also BPM und Taktzahl gemeinsam (15 s = 6 Takte bei 96, 8 Takte bei 128). Schreiben Sie plan.md im Projekt: Eine Tabelle von Takten → Szene → der Cue auf jedem Schlag (Wort-Enthüllungen, Karte landet, Haken erscheint, Übergang). Eine Idee pro Takt; die großen Momente (Logo, Hauptfunktion, Endkarte) liegen auf den Betonungen. Siehe references/motion-direction.md für Tonfall-Voreinstellungen und Muster.

5. Projektordner

Arbeiten Sie in ~/Movies/MotionVideo/<slug>/ (bleibt für spätere Überarbeitungen erhalten):

mkdir -p ~/Movies/MotionVideo/<slug> && cp ~/.claude/skills/app-3d-video/template/{project.env,score.swift} ~/Movies/MotionVideo/<slug>/

Bearbeiten Sie project.env (BPM, DURATION, W, H, FPS), legen Sie Marken-Assets in assets/ ab, schreiben Sie dann score.swift und scenes.swift neu. Weisen Sie die Paletten-Variablen (INK, TEAL, MINT, GREEN, GLOW, PAPER, DARKTEXT, ORANGE, DARK_MID, LIGHT_GLOW_A/B) am Anfang von scenes.swift für die Marke neu zu.

6. Partitur zuerst

Schreiben Sie score.swift (Rezepte in references/score-guide.md), führen Sie dann mv.sh <dir> audio aus. Sie können es nicht hören – lesen Sie den Levels-Ausdruck: RMS im Zielbereich für den Tonfall, kein Clipping, Abschnittskontraste wie beabsichtigt (leise Einleitung, Anstieg beim Drop, ein Dip für Drop-Out). Das Video liest music.wav für audio-reaktive Elemente, also rendern Sie Audio vor den Standbildern.

7. Szenen, dann Standbild-Review – mindestens zwei Durchläufe

Schreiben Sie scenes.swift mit der Definition func render(_ t: Double, frame: Int), dann:

~/.claude/skills/motion-video/scripts/mv.sh <dir> stills 0.5,2,4.25,6,8.5,10,13,16,20,22.5

Öffnen Sie <dir>/sheet.png mit Read und gehen Sie die Checkliste in references/motion-direction.md durch (Überlappungen bei Spring-Überschwingern, abgeschnittene Unterlängen, zu kleiner Text, unklare Überblendungen, inkonsistente UI, tote Räume). Wählen Sie auch Schläge während des Übergangs, nicht nur Ruhezustände. Korrigieren Sie und wiederholen Sie die Aufnahme, bis ein Durchlauf sauber zurückkommt. Standbilder rendern mit ~0,1 s/Bild, also iterieren Sie frei.

8. Finaler Render und Überprüfung

mv.sh <dir> video <dir>/out.mp4 – etwa 0,3–0,5 s/Bild mit SUB=5 Bewegungsunschärfe (15 s bei 60 fps ≈ 5–8 min), also führen Sie es im Hintergrund aus. Der Probe gibt Dauer und Tracks aus; extrahieren Sie auch einige Bilder (.build/probe out.mp4 <dir> 2,5,9,12) und betrachten Sie sie.

9. Auslieferung

Kopieren Sie nach ~/Downloads/<Produkt>_<Thema>_<Dauer>s[_vN].mp4, senden Sie es mit SendUserFile und berichten Sie: die Handlung Takt für Takt (Sekunden), welche Assets und Zeichenfolgen echt sind, was illustrativ ist, dass Sie das Audio nur durch Messung beurteilt haben, und eine kurze Checkliste für den Benutzer (laut anhören, Lesbarkeit auf dem Telefon, Marken-/Abzeichen-Verwendung). Behalten Sie frühere Versionen (v1/) bei Überarbeitungen.

Überarbeitung

Die meisten Rückmeldungen lassen sich auf einen Regler abbilden: langsamer/ruhiger → niedrigeres BPM + weniger Szenen + gedämpfte Federn (k≈5, w≈6) + längere Enthüllungen (0,9–1 Takt) + Rack-Focus/Iris-Übergänge statt Peitschen; mehr Energie → der energetische Score, Federn mit Überschwingern, Peitschen, Blitze bei Drops; "Ich verstehe Funktion X nicht" → zeigen Sie die vollständige Ursache-Wirkung auf einem Gerät (Anfrage → Antwort → Ergebnis) mit dem echten Antworttext des Produkts und betiteln Sie es mit dem Wert, nicht dem Funktionsnamen.