smasikurr/RemotionMaster

Produkt-Launch

So verwendest du dieses Playbook. Es ist ein Rezept, kein Regelwerk: Jedes Format, jede Länge, jedes Tempo und jede Formel unten sind Voreinstellungen, und was der Benutzer verlangt, hat Vorrang. Beginne nicht mit Fragen: Verwende die Voreinstellungen, baue auf und erwähne die von dir gewählten Voreinstellungen in einer Zeile, wenn du den ersten Render teilst (frage nur, wenn etwas Wesentliches fehlt, wie das Filmmaterial selbst). Der erste Render ist der Vorschlag, es gibt also keinen zu genehmigenden Plan vorab. Storyboards nur, wenn der Benutzer die Aufnahmen zuerst sehen möchte. Planungsdateien, die die Methode erwähnt (BRIEF.md, PLAN.md und ähnliche), sind deine eigenen Arbeitsnotizen: Schreibe sie, wenn sie dir helfen, niemals als Schritt für den Benutzer.

Ein Produkt kommt rein; ein poliertes Launch-Video kommt raus. Die Art, die man auf X sieht, wenn ein SaaS-Team ausliefert: ein Haken, der den Schmerz benennt, der Produktname landet auf einem Drop, drei Funktionen werden in der echten Oberfläche gezeigt, Beweise und eine saubere Endkarte. Musikgetrieben, normalerweise ohne Voice-Over, 20–60 s.

Referenzbau: Moritz' Notion-Launch-Demo (46 s, 16:9, kein Voice-Over, 120 BPM). Neun Frames: verstreute Werkzeuge als Haken auf dunklem Grund, Logo und rotierende Schlagzeile auf dem Drop, das echte Hero-Video in einem schwebenden Fenster, drei Feature-Frames (Erfassen, Fragen, Agenten) aus echter Notion-UI, eine Anwendungsfall-Rolle, eine Logo-Wand mit Statistiken und ein CTA-Lockup. Dessen Plan befindet sich in references/example-notion.md. Erreiche dieses Niveau.

Die Methode ist festgelegt; das Werkzeug nicht. Wenn das Projekt bereits ein Videotool verwendet, benutze es. Wenn nicht, starte ein Hyperframes-Projekt (npx hyperframes init) und kopiere template/hyperframes/ als Startkomposition.

<playbook> unten bedeutet diesen Ordner (den lokalen Pfad, den get_playbook zurückgegeben hat).

Was reingeht, was rauskommt

• Rein: das, was gestartet wird (URL, die App selbst, Screenshots, Aufnahmen, ein Briefing oder eingefügtes Skript), für wen es ist, wo es gepostet wird. Optional: Markendateien, ein Voice-Over-Skript, ein Musiktitel.
• Raus: ein 20–60 s mp4 (standardmäßig 16:9, auf Wunsch 9:16 oder 1:1) mit echter Produkt-UI, kinetischem Text, Musik und Soundeffekten auf einem Beat-Raster, überprüft und genehmigt in FrameJam.

Voreinstellungen (die Anfrage des Benutzers überschreibt jede von ihnen)

Arbeite diese aus der Anfrage und den Dateien heraus. Wo nichts gesagt ist, verwende die Voreinstellung und mach weiter; frage nur, wenn etwas Wesentliches fehlt.

• Das einzeilige Versprechen. Woran sich der Betrachter erinnern soll. Alles andere ist Beleg dafür.
• Länge und Format: X-Feed 30–45 s 16:9 (Standard); Landing-Hero 30–45 s 16:9, zuerst stumm; Reels 9:16 ≤ 30 s.
• Ton: Nur Musik (Standard, spielt bei Autoplay stumm ab, also trägt der Text die Geschichte) oder Voice-Over + Musik.
• Echte UI-Quelle: die laufende App (nimm sie auf), die Website (mache Screenshots und ihr Hero-Video) oder Dateien, die der Benutzer bereitstellt. Wenn es nichts Reales zu zeigen gibt, sag das; erfinde keine Oberfläche.
• Stil: Verwende den für dieses Video gewählten Stil, falls vorhanden (von wait_for_pick, oder get_preset, wenn der Benutzer einen benennt). Wenn der Benutzer einen FrameJam-Stil gewählt hat, bestimmt er das gesamte Aussehen (Palette, Schriftart, Bewegungsgefühl, Übergänge). Kein Stil: Leite das Aussehen von der eigenen Marke des Produkts ab (Farben, Schriftarten, UI-Oberflächen).
• Fakten: Statistiken, Kundenlogos und Behauptungen nur von der eigenen Website des Produkts oder vom Benutzer. Keine erfundenen Zahlen.
• Musik: standardmäßig das enthaltene kostenlose Skript (scripts/launch_bed.py), ein vom Benutzer eigener Titel oder ein lizenzierter Bibliothekstitel. Generierte Musikdienste sind kostenpflichtig; halte an und frage, bevor du einen verwendest.

Bestehendes Projekt mit einem anderen Tool erstellt: bleib bei diesem Tool. Die Methode (Beat-Raster, Storyboard, echte UI in Fenstern, getaktete Enthüllungen, Überprüfung, FrameJam-Schleife) und die Skripte (launch_bed.py, sheet.sh) funktionieren mit jedem Werkzeug.

Wenn nichts gesagt ist: Nur Musik, 16:9, ~40 s, das Aussehen der Marke. Nenne die Voreinstellungen, die du verwendet hast, wenn du den ersten Render teilst.

Arbeitsablauf

1. Sammle das echte Produkt

Sammle das Material, bevor du eine einzige Zeile schreibst. Details in references/assets.md.

• App: Nimm kurze, saubere Takes jeder Funktion auf (eine Aktion pro Take, 2880 px breit oder mehr, keine Benachrichtigungen, realistische Demodaten). Behalte die Ereigniszeitpunkte (wann der Klick landet, wann das Ergebnis erscheint).
• Website: Speichere das Hero-Video, Screenshots der gesamten Seite und von Abschnitten in 2x, das Logo (SVG), die Schriftarten, die genauen Schlagzeilen, Statistiken und Kundenlogos. Hyperframes-Benutzer können npx hyperframes capture <url> -o capture ausführen.
• Schreibe ASSETS.md: eine Zeile pro Datei mit dem, was sie zeigt, der Größe und bei Videos den Schlüsselmomenten in Sekunden.
• Markenwahrheit: Farben (Tinte, Leinwand, ein Akzent), Anzeige- und Schriftarten für Fließtexte, wie die UI aussieht (Radius, Schatten, Chrome).

2. Geschichte und Beat-Raster

Lies references/story.md. Schreibe dann STORYBOARD.md:

• Wähle einen Bogen (Problem → Plattform, Demo-Schleife, Vorher/Nachher, Feature-Kaskade). Schreibe das Versprechen in eine Zeile.
• 6–10 Frames. Jeder Frame hat eine Aufgabe: Haken, Produkteinführung, Funktion, Nutzen, Beweis, CTA. Eine Funktion wird als kurze Sequenz auf der echten Oberfläche gezeigt (Eingabe → Aktion → Ergebnis), nicht als statischer Screenshot.
• KI-Agenten und Assistenten: Zeige eine echte Anfrage von Anfang bis Ende: Sie wird in die Eingabe getippt und gesendet, wird zu einer Nachricht, die Schritte des Agenten erscheinen nacheinander (frühere werden abgedunkelt), das Ergebnis landet als Karte mit genauen Fakten und einem Häkchen, und der Frame hält auf dem Ergebnis, bevor das Lockup erscheint. Anfragen und Ergebnisse sind spezifisch (Namen, Zeiten, Zählungen), niemals Platzhaltertext.
• Der Haken dauert 3–4 s und funktioniert stumm: der Schmerz oder Wunsch des Betrachters in seinen eigenen Worten, niemals „X ist eine Plattform, die …“.
• Beat-Raster zuerst. Wähle ein Tempo (110–128 BPM; bei 120 BPM ist ein Beat 0,5 s, ein Takt 2 s). Jeder Frame beginnt auf einem Downbeat und dauert ganze Takte. Markiere die Drops: normalerweise der Produktname und der Beweisabschnitt. Jede Enthüllung in jedem Frame landet auf einem Beat.
• Bei Voice-Over: Schreibe SCRIPT.md in kurzen Stichworten (6–20 Wörter pro Frame) und lass die Stimme die Framelängen bestimmen; Musik folgt trotzdem dem darunterliegenden Raster.
• Schreibe einmal oben einen Block ## Video Direction: Palettenrollen, Schriftrollen, wie Fenster eintreten, Bewegungsregeln, welche Frames dunkle „Impact“-Frames sind, was niemals erscheint.

Dann baue auf; der erste Render ist der Vorschlag. Wenn der Benutzer die Frames zuerst sehen möchte, skizziere sie und überprüfe sie in FrameJam als Storyboard: open_review mit panelsDir (ein Bild pro Frame, benannt 01-hook.png…), dann wait_for_feedback.

3. Aufnahme-Design

Schreibe für jeden Frame eine zeitcodierte Aufnahmeliste gegen das Beat-Raster (references/shots.md): Szene 1 (0.0–0.5s): … mit dem, was auf dem Bildschirm ist, wo es sitzt und wie es sich bewegt. Regeln:

• Bei t=0 zeige nur das Erste. Jedes andere Stück kommt auf seinem Beat (oder seinem gesprochenen Wort). Gib niemals den gesamten Frame im ersten Viertel und lass es dann stehen.
• Echte UI sitzt in einem schwebenden Produktfenster (Markenradius, Haarlinienrahmen, weicher, geschichteter Schatten) mit einem 3D-Settle beim Eintritt. Beschneide niemals UI-Text mitten im Wort. Baue nur die eine Komponente neu, die sich bewegen muss (ein Suchfeld, das tippt).
• Eine Akzentfarbe pro Frame, ein hervorgehobenes Wort pro Schlagzeile.
• Beende jeden Frame auf einem gehaltenen Leseeindruck. Stille schlägt träge Atmung oder eine treibende Kamera.
• Übergänge von Frame zu Frame: harte Schnitte auf den Beat als Standard; Zoom-Through bei Abschnittswechseln; Push-Slide für eine Reihe von Funktionen.

4. Musik und Sound

Lies references/music.md. Standardweg, kostenlos: Schreibe cues.json aus dem Storyboard (Abschnitte in Takten, Drops, und einen Soundeffekt für jeden Slam, Pop, Klick, jede Tippsequenz und jeden Fenstereintritt), dann uv run <playbook>/scripts/launch_bed.py cues.json --out assets/music/bed.wav (oder python3 mit numpy, scipy und soundfile). Soundeffekte stammen aus derselben Anweisungsliste, sodass sie genau auf den Schnitten sitzen. Wenn der Benutzer einen Titel bringt: miss sein Tempo, schneide das Raster darauf zu und starte den Titel an seiner stärksten Stelle, nicht mit einem langsamen Intro.

5. Bauen

Baue Frame für Frame im Werkzeug des Projekts. Hyperframes-Hinweise (und Fallstricke, die wir getroffen haben) befinden sich in references/hyperframes.md; der Starter ist template/hyperframes/.

• Eine Komposition pro Frame oder eine Datei mit einer Ebene pro Frame für kurze Stücke. Halte frame-lokale Zeiten.
• Animiere mit expliziten Ausgangszuständen (suchsicher), langschwänzigen Easing-Funktionen (power3/expo.out), keinem Bounce, keinen Endlosschleifen, keinem Zufall.
• Produktvideos: Gib jedem <video> eine ID; bewege einen umschließenden div für Kamerafahrten, nicht das Videoelement selbst.
• Wenn parallele Unteragenten verfügbar sind, gib jedem einen Frame: seinen Storyboard-Block, ## Video Direction, die Asset-Zeilen, die er verwendet, und „bearbeite nur deine Datei“. Ansonsten baue selbst in der Reihenfolge.

6. Prüfen, rendern, überprüfen

• Lint/Prüfen im Werkzeug, dann rendere in eine neue Datei pro Version (renders/v1.mp4, v2.mp4…).
• bash <playbook>/scripts/sheet.sh renders/v1.mp4 erstellt ein 2-fps Kontaktblatt; lies es. Sieh dir die Mitte jedes Frames und beide Seiten jedes Schnitts an. Prüfe: nichts vorne geladen, kein Text abgeschnitten oder unter dem Untertitelband, kein Pop an den Nähten, der Drop landet mit dem Namen, die Endkarte hält ≥ 1,5 s.
• ffmpeg -i renders/v1.mp4 -vf freezedetect=n=0.003:d=2 -f null - zeigt tote Strecken an; ein Standbild ist nur in Ordnung, wo du einen Halt geplant hast.
• Überprüfung in FrameJam: open_review mit videoPath = dem Render (absoluter Pfad), öffne die URL im integrierten Browser, wait_for_feedback. Ordne jede Notiz ihrem Frame per Zeitstempel zu, korrigiere, rendere v2, überprüfe erneut, dann add_version mit einer einzeiligen Notiz und warte erneut. Wiederhole, bis genehmigt.
• Liefere das finale mp4 aus (X: H.264, ≤ 2:20, ≤ 512 MB) mit seiner Dauer und der Frameliste.

Qualitätskriterien

• Echtes Produkt, wahrheitsgemäß: Jeder UI-Shot ist eine echte Aufnahme oder ein echter Screenshot. Texte, Statistiken und Logos stammen aus den eigenen Quellen des Produkts. Drittanbieter-Logos nur, wo das Produkt selbst sie zeigt (Integrationen, Kunden).
• Das Versprechen landet in Frame 2. Der Haken spricht den Schmerz oder Wunsch des Betrachters an; der Name kommt auf dem Drop.
• Jede Enthüllung ist auf einem Beat (oder seinem gesprochenen Wort), und Musik, Soundeffekte und Schnitte teilen sich ein Raster.
• Auf einen Blick lesbar: 1–7 Wörter pro Schlagzeile, ≥ 64 px bei 1080p, ein Brennpunkt pro Frame.
• Hochwertige Bewegung: sanftes Einrasten, Fenster mit Tiefe, geschwindigkeitsangepasste Nähte; kein Bounce, kein Bildschirmschoner-Schweben, keine generischen Stockformen als Produktvertreter.
• Funktioniert stumm: Die Geschichte liest sich allein aus Text und UI.
• Schau es dir selbst an (Kontaktblatt + Schnittprüfungen) vor jeder FrameJam-Runde.

Dateien in diesem Playbook

• references/story.md: Bögen, Framefunktionen, Hakentypen, bewährte Zeilenformen für jede Funktion, VO-Regeln.
• references/shots.md: Aufnahmeformen für Launch-Frames, Layout- und Bewegungsregeln, Nähte, eine ausgearbeitete Aufnahmeliste.
• references/assets.md: Aufnehmen der App, Erfassen einer Website, die Asset-Liste, Rechte.
• references/music.md: Beat-Raster, cues.json-Format, Verwenden deines eigenen Titels.
• references/hyperframes.md: Neustart in Hyperframes, Produktfenster, Video und Audio, Fallstricke.
• references/example-notion.md: Der Plan der Notion-Launch-Demo, Frame für Frame.
• scripts/launch_bed.py: Kostenloses lokales Musikbett und Soundeffekte aus einer Anweisungsliste.
• scripts/sheet.sh: Kontaktblatt jedes Renders.
• template/hyperframes/: Eine Startkomposition (Beat-Raster-Helfer, Produktfenster, kinetische Zeile, Chip, CTA-Karte).