dyachkovp/product-motion

Product Motion

Kurze Videos, die zeigen, wie eine Funktion funktioniert: Produktoberfläche im Bild, Klick-Cursor, getippter Text, Labels unter Eingabefragmenten, Karten, die kaskadierend erscheinen, Kameraführung, Voice-Over. Der Ansatz wurde bei mehreren Produkten validiert und ist hier vom konkreten Brand entkoppelt.

Prinzipien

1. Frame als Funktion der Zeit. Das Video ist eine HTML-Seite, bei der render(t) den Zustand eines Frames aus der Zeit berechnet. scripts/render.py rendert die Frames einzeln und übergibt sie an ffmpeg. Keine CSS-Animationen, Timer oder Screen-Recording: keine Ruckler oder Desynchronisation, jeder Moment kann als Einzelframe geprüft werden. Engine: templates/engine.js (references/engine.md).
2. Wir zeigen nur, was im Produkt existiert. Bildschirme, Beschriftungen, Zustände – aus Code, Prototyp, docs/ oder Screenshots des aktuellen Projekts. Nicht existierende Funktionen kommen nicht vor. Daten sind fiktive Kurzbezeichnungen. Für eine Szene erdachte Inhalte (Antworten, Zustandstexte) werden dem User zur Überprüfung vorgelegt.
3. Style kommt vom Produkt, nicht vom Skill. Farben, Akzente, Schriftarten, Logos – aus dem Brand-Profil des Projekts (motion/brand/), extrahiert aus dessen Code (references/brand.md). Das neutrale Skill-Profil dient nur als Entwurf.
4. Stimme synthetisieren wir nicht selbst. Lokale TTS klingen roboterhaft. Der User bekommt Text und Prompt für Gemini TTS separat (oder nimmt selbst auf) und liefert die Audiodatei; align_vo.py legt sie Wort für Wort auf die Timeline. Bis dahin läuft das Video mit Untertiteln und Musik.
5. Erst Augen, dann Render. Kontaktabzüge der Schlüsselmomente in den gewählten Formaten und verify_scene.py vor dem Vollrender. Kompositionsfehler sind auf Einzelframes am günstigsten zu erkennen.
6. Entscheidungen des Users nicht erraten. Sprache, Formate, Tempo, Musik, Veröffentlichung – aus Brief oder Nachfrage. Die unten genannten Defaults gelten nur, wenn der User nichts anderes sagt.

Prozess

0. Umgebung (einmal pro Maschine)

python3 <skill>/scripts/check_env.py

Erforderlich: Python 3.9+, ffmpeg/ffprobe, pip install playwright numpy scipy pillow (+ faster-whisper für Voiceover), python -m playwright install chromium; für die beschleunigte Version ffmpeg mit rubberband. Am besten im venv des Projekts oder daneben; installiere keine Abhängigkeiten ohne Zustimmung des Users – zeige die Befehle an.

1. Brief

Funktion; Dauer (falls nicht genannt: 30–35 s pro Funktion, 60–75 s für einen Abschnitt); Zielgruppe und Zweck (Tutorial, Promo, Investor, Landingpage); Sprache; Formate (falls nicht genannt: 16:9, vertikal 9:16 vorschlagen). Maximal zwei Fragen auf einmal; den Rest als vernünftige Defaults nennen. Detail: references/brief.md.

2. Fakten zur Funktion – aus dem aktuellen Projekt

Lies Code und Prototyp der Funktion, docs/, Screenshots: Bildschirme, exakte Beschriftungen, Platzhalter, Buttons, Zustände, was vorhanden ist und was nicht. Wenn unklar, was der User nach der Hauptaktion sieht, frage nach.

3. Brand-Profil – einmal pro Projekt

Wenn das Projekt kein motion/brand/ hat, erstelle es nach references/brand.md: brand.css (Tokens aus CSS-Variablen, Themes, Tailwind-Konfig), lokale Schriften mit geprüften Rechten, Logos. Zeige dem User vor dem ersten Video einen Beispiel-Frame. Folge-Videos übernehmen das fertige Profil.

4. Szenario

Tabelle „Timecode · Bildinhalt · Kamera/Animation · Voice-Over-Text“ (references/storyboard.md: Grundgerüste nach Dauer, Textdichte 1.3–1.6 Wörter pro Sekunde, Szenen-Archetypen). Bei Videos länger als 30 s oder unvollständigem Brief zeige die Tabelle und warte auf „ok“; bei kurzen, klaren Briefen kann direkt montiert und die Tabelle zusammen mit den ersten Frames gezeigt werden.

5. Video-Projekt

Falls das Projekt bereits einen Ort für Videos hat (promo/, design/motion/ o. Ä.), lege es dorthin; sonst motion/<slug>/.

python3 <skill>/scripts/new_project.py motion/<slug> --brand motion/brand --lang de --title "Funktion · Produkt"

Enthält: video.html, plan.js, cues.js, tmap.js, engine.js, processing.js, base.css, brand/, build/, out/, README.md. build/ und große out/*.mp4 in .gitignore des Projekts, wenn der User nichts anderes entscheidet. Falls das Projekt docs/ hat, füge einen kurzen Link zum Video und sein README hinzu.

6. plan.js und Szenen

plan.js ist die einzige Quelle: duration, fps, canvas, language, product, audience, hold, Voiceover-Zeilen vo[] (id, at, text, tts, subs), pronounce, emphasis, music. Strenges JSON nach window.PLAN =.

Ersetze in video.html den Demo-Inhalt der Vorlage durch die echten Bildschirme der Funktion: build (wiederkehrende Elemente), setup (Maße mit E.measureAt + E.rect, Kamera-Keyframes für beide Formate, Cursor, Klicks), scene(t). Ereignisse auf dem Bildschirm an Voiceover-Wörter binden (E.sync('p3:wort', Fallback)). Dunkle Bildschirme und Modals via E.dim() und in #app2. Szenen-Rezepte: references/scenes.md, Bewegungs- und Kameraregeln: references/motion.md. Vorschau mit Slider: video.html?preview=1 via python3 -m http.server aus dem Video-Ordner.

7. Frame-Prüfung

python3 <skill>/scripts/verify_scene.py video.html --fmt both
python3 <skill>/scripts/render.py video.html stills --fmt both --times 1,6,9,12,15,19,23,27,31,34 --sheet

Öffne build/stills/sheet_h.jpg und sheet_v.jpg: Kamera blickt auf die Aktion; Labels unter ihren Fragmenten; Text wird nicht umbrochen oder abgeschnitten; Akzente nur an den richtigen Stellen; am Übergang „Verarbeitung → Ergebnis“ kein weißer Blitz; im 9:16-Format ist der Text groß, Untertitel oberhalb der unteren Leiste. Korrigiere, bis die Keyframes sauber sind. Vor dem ersten Vollrender: references/pitfalls.md.

8. Voiceover

python3 <skill>/scripts/vo_pack.py plan.js            # --model 3.8 für Gemini 3.8 Flash TTS, --voice female

Gib out/voiceover/tts_text.txt und tts_prompt.txt als zwei separate Code-Blöcke (Text ins Textfeld, Prompt ins Style-Feld), Stimme (für Deutsch männlich – Alfihar zuerst), Bitte um einen einzigen kompletten Take und die Tabelle aus timing.md. Auch eine eigene Aufnahme des Users nach demselben Text ist möglich. Regeln: references/voiceover.md.

9. Voiceover erhalten → Align

python3 <skill>/scripts/align_vo.py plan.js voice.wav        # build/vo_aligned.wav, cues.js, out/subtitles.srt, report

Lies build/align_report.md: Wörter, die „akustisch prüfen“ erfordern, dem User mit Timecode nennen; verschobene Zeilen besser in plan.js korrigieren. Das Skript stoppt, wenn die Sprache den finalen Halteframe (hold) erreicht.

Tempoänderung nur als Vorschlag. Falls das Video „sich zieht“, schlage retime.py vor (Sprechgeschwindigkeit +4.5 %, kürzere Pausen, einheitliche Zeitkarte für Video, Stimme, Musik und Untertitel). Führe eine Änderung nur nach Zustimmung durch.

10. Musik, Abmischung, Render, Assembly

python3 <skill>/scripts/music.py plan.js --out build/music.wav                         # Synthetischer Entwurf aus music-Abschnitt
python3 <skill>/scripts/prepare_music.py plan.js track.mp3 --end-align --out build/music.wav   # oder eigener Track des Users
python3 <skill>/scripts/mix.py build/music.wav build/vo_aligned.wav --out build/mix.wav
python3 <skill>/scripts/render.py video.html video --fmt h --out build/h_subs.mp4
python3 <skill>/scripts/render.py video.html video --fmt h --qs subs=0 --out build/h.mp4
python3 <skill>/scripts/assemble.py --video build/h.mp4 --audio build/mix.wav --out out/<slug>_16x9.mp4
python3 <skill>/scripts/assemble.py --video build/h_subs.mp4 --audio build/mix.wav --out out/<slug>_16x9_subs.mp4
#   … und dasselbe für --fmt v (_9x16, _9x16_subs), falls vertikal im Brief
python3 <skill>/scripts/verify_media.py plan.js out/*.mp4 --sheet

Render ≈ 2–5 Minuten pro Videominute pro Format – im Hintergrund oder in Teilen starten (--start/--end, Zusammenbau mit assemble.py --video part1 part2 …). Synthetische Musik ist temporär; für öffentliche Videos lizenzpflichtigen Track vorschlagen. Details: references/audio.md. Auf Anfrage: export_web.py (rohes MP4, WebVTT, Poster, Final Frame) für Player auf der Website; Veröffentlichung nur nach separater Entscheidung des Users.

Was dem User übergeben wird

• Dateien in gewählten Formaten: <slug>_16x9.mp4, <slug>_16x9_subs.mp4 (+ _9x16), SRT, Voiceover-Paket (vor Aufnahme), Kontaktabzug. Dateipfade; falls ein Dateiversand-Tool existiert, sende die Dateien.
• Kurz: Dauer, was in welchen Szenen passiert; was erfunden ist und mit dem Produkt abgeglichen werden muss; dass die Musik temporär ist; was nicht geprüft wurde (z. B. nicht akustisch kontrolliert).
• Aktualisiere das README des Video-Ordners: Status, Brief-Entscheidungen, wie neu zu bauen ist.
• Keine Prozessbeschreibung und keine Werbung für „revolutionäre KI“.

Skill-Dateien

templates/engine.js	Frame-Engine: Kamera, Cursor, Klicks, Dimming und obere Ebene #app2, Untertitel (subs=0), Zeitkarte tmap.js, Preview preview=1, Maße, markup/grad/plural
templates/base.css	Komponenten auf Brand-Tokens: Header, Input-Feld mit Overflow, Labels, Tooltips, Dark Processing, Ergebnis, Popover, Chat, Rating, Finale
templates/brand/	Neutrales Brand-Profil: brand.css, Manrope (OFL), Platzhalter-Logo
templates/processing.js	Neutrale Processing-Animation (Ringe, Akzent-Glanz, einfliegende Karten)
templates/starter.html, plan.js	Arbeitsfähiger ≈36-Sekunden-Democlip „Smarte Suche“ im fiktiven Produkt Demo: Hook → Eingabe mit Labels → Vorschläge → Processing → Ergebnis mit „Warum“ → Speichern → Rating → Finale
scripts/	check_env, new_project, verify_scene, render, vo_pack, align_vo, retime, music, prepare_music, mix, assemble, verify_media, export_web
references/	brief.md · brand.md · storyboard.md · scenes.md · motion.md · engine.md · voiceover.md · audio.md · pitfalls.md