Launch-Video: der Hero-Film vom Creative Director

SaaS-Launch-Video: Kreativdirektor

Jedes Video sollte sich wie für sein Produkt gemacht anfühlen: eigenes Konzept, Struktur, Look und Übergänge. Dieses Skill ist ein Regisseur + Werkzeugkasten, keine Vorlage. Kein Rückfall auf einen einzigen Hausstil.

Voraussetzungen

Node 18+, FFmpeg im PATH, npx [email protected]. Die HyperFrames-Skills hyperframes-creative, hyperframes-animation und hyperframes-registry (Installation: npx [email protected] init <beliebiges-verzeichnis>; aktualisieren: npx [email protected] skills update). Python + pip install librosa nur für Musikanalyse.

Referenzvideo? Wenn der Benutzer ein Video zum Nachahmen sendet ("wie dieses"), folge references/REFERENCE.md: führe scripts/analyze-reference.mjs aus und schreibe reference.md direkt nach Schritt 1. Es formt dann den Pitch, das Drehbuch, die Bauprüfungen und die Musik.

Arbeitsablauf (4 Prüfpunkte mit Benutzerbeteiligung)

1. Einrichten und Produkt kennenlernen. Führe node <skill>/scripts/new-project.mjs <verzeichnis> aus. Lerne dann das Produkt aus der besten verfügbaren Quelle kennen:

   • Code: Lies die Komponenten, Routen, das Theme und die Texte; schreibe brand.json (siehe references/BRAND.md) und führe scripts/brand.mjs aus.
   • Link: node <skill>/scripts/from-link.mjs <url> <verzeichnis> schreibt brand.json und brand-kit.md; überprüfe die Logos und Farben.
   • Screens: Frage nach Logo, Farben und Schlüsselbildschirmen.

   Liste die Live-Funktionen, die Zielgruppe und den Ton auf.

2. PRÜFPUNKT: 3 Richtungen pitchen. Verwende references/PITCH.md. Kombiniere Looks aus references/DIRECTIONS.md (4 Familien × 3 Looks) mit Formen aus references/NARRATIVES.md. Die drei müssen sich unterscheiden (mindestens 2 Familien) und jede erhält ein gerendertes Schlüsselbild. Der Benutzer wählt oder mischt; speichere die Entscheidung in direction.md. Bei einer Referenz ist Richtung A die Referenz in der gewünschten Detailtreue, und jedes Standbild wird neben dem Referenzbild gezeigt, das es beantwortet.

3. PRÜFPUNKT: Drehbuch. Eine Beat-Tabelle für die gewählte Richtung (Szene, On-Screen-Inhalt, Text, Bewegung, Übergang, Sound), plus die genauen UI-Aktionen. Nach der Genehmigung frage nach den benötigten In-App-Bildschirmen (references/UI-REBUILD.md).

4. PRÜFPUNKT: Bilder (nur wenn die Richtung sie benötigt). Schreibe Prompts und warte auf die Dateien; generiere oder fälsche sie niemals selbst (references/IMAGES.md).

5. Bauen.

   • Eine Unterkomposition pro Szene.
   • Lies für jede Szene ihren HyperFrames-Bauplan und durchsuche die Registry (npx [email protected] catalog <wörter> --json), bevor du von Hand baust.
   • Produktszenen beginnen von reference/ui-rig.html. Verwende lib/fx.js für Bewegungen und lib/three-stage.js für 3D.
   • Schleife: Prüfen → Schnappschuss → Korrigieren, bis jeder Frame gut aussieht, dann erstelle einen Entwurf-Render (references/WORKFLOW.md). Mit einer Referenz überprüfe den Entwurf mit analyze-reference.mjs --compare.

6. PRÜFPUNKT: Musik. Schreibe music-plan.json, führe scripts/music-plan.mjs aus, und sage dem Benutzer, er solle 2-4 Takes in ElevenLabs generieren. Richte sie mit analyze-track.py --drop aus, mische sie mit mix-variations.mjs und lasse den Benutzer wählen (references/MUSIC.md).

7. Ausliefern. Lege den Track ein, render mit -q delivery, führe dann scripts/finalize.mjs aus (-14 LUFS Master + eine Upload-Kopie unter 100 MB).

Regeln

• Nur echte Funktionen, echte UI, Demodaten. Erfinde niemals Bildschirme; frage danach.
• Ein charakteristischer Move und 2-3 Übergänge pro Video (oder der eigene Satz der Referenz), konsequent verwendet. Halte jede Textzeile lange genug zum Lesen.
• Nur Markenvariablen in Szenen (var(--brand-primary), var(--font-display)); niemals einen Marken-Hex oder Schriftfamilie hartcodieren.
• Eine Referenz ist Grammatik, nicht Inhalt. Kopiere ihren Rhythmus, Übergänge, Typ- und Farbrollen; niemals ihr Filmmaterial, Logos, Namen, Texte oder Musik.
• Kein Standard-Look. Wenn ein Entwurf in Richtung eines generischen "dunklen Verlaufs + geneigten Fensters + Textkarten" abdriftet, stoppe und lies direction.md erneut.
• Lese references/GOTCHAS.md vor dem Bauen. Es listet die HyperFrames-Fallen auf, die Renders kosten.

Dateien

Pfad	Was es ist
toolkit/fx.js	Bewegungshelfer: Tippen, Stream-Text, Peitsche, Masken-Enthüllung, Cursor, Count-up, Pfad zeichnen/folgen
toolkit/three-stage.js	Three.js-Laptop-/Telefon-/schwebende-Panels-Bühne mit keyframed Kamera und Bildschirmwechseln
toolkit/ui-rig.html	UI-Rekonstruktionsvorlage (flach / geneigt / Frontkamera), kopiert nach reference/ in jedem Projekt
toolkit/skeleton/	leeres Root index.html (Markenmarker, importmap, fx)
examples/	Technik-Demos, eine pro Familie: new-project.mjs <verzeichnis> --examples bindet sie ein. Studieren, niemals kopieren.
scripts/	new-project, from-link, brand, analyze-reference, fetch-sfx, music-plan, analyze-track.py, mix-variations, finalize