timscheuerai/content-vault

Launch-Video-Ersteller

Erstellt ein 30-60s Motion-Graphics-Launch-Video für ein <DEINE_MARKE> Produkt oder Feature, komplett von Anfang bis Ende:

• Remotion 4 React-Komposition gerendert als MP4 (1920×1080 + 1080×1080)
• ElevenLabs AI-Erzählung (Standardstimme Bill), pro-Ereignis Soundeffekte und ein Hintergrundmusikbett
• Beat-verankertes Timing: Jede visuelle Phase liest ihren Startframe aus gemessenen Audio-Dauern in script.timings.json. Text bearbeiten → Audio neu generieren → alle visuellen Elemente verschieben sich automatisch. Kein manuelles Anpassen von Frames.
• Wenn deine Marke ein Motion-Subsystem (Glas/Cursor/Tool-Pill-Komponenten) hat, erbe davon. Die unten beschriebenen Referenzmuster sind ein gültiges System: ein glasmorphisches Motion-Subsystem (Chat-Shells, Cursor, Tool- Pills) über einem sauberen weißen tabellarischen System (Ergebnistabellen, Dashboards, Ablaufverfolgungen).

Wenn dein Repository ein Referenz-Remotion-Projekt hat, weise diese Fähigkeit darauf hin. Andernfalls funktionieren die unten beschriebenen Muster eigenständig. Referenzimplementierungspfad im Quell-Repository: <DEIN_REFERENZ_VIDEO_PFAD>.

---

Wann verwenden

Auslösen bei:

• "Erstelle ein Launch-Video für X"
• "Erstelle ein Launch-Video / Produktvideo / Feature-Enthüllung"
• "Rendere ein Video für das [Feature]"
• Benutzer gibt explizit /launch-video ein

Überspringen bei:

• Statischen Social-Grafiken → /graphics-designer
• Folienpräsentationen / Webinaren → deine Präsentationspipeline
• Kurzen Werbeclips < 8s → diese können normalerweise ein einzelnes Remotion-Standbild oder eine Ein-Szene-Komposition sein; die vollständige Pipeline dieser Fähigkeit ist übertrieben.
• Rohmaterial (Talking Heads, Webinar-Aufnahmen, Gründer-Videos, Kundeninterviews, Screen-Capture-Demos) → stattdessen /video-use verwenden. Diese Fähigkeit schneidet auf Wortgrenzen basierend auf einem Scribe-Transkript, entfernt Füllwörter, führt Farbkorrektur durch und brennt Untertitel ein. Diese Fähigkeit ist für synthetische Motion Graphics, die von Grund auf in Remotion erstellt werden. Die beiden ergänzen sich: Ein /video-use-Schnitt kann Remotion-Overlay-Slots für markierte Animations-Einblendungen erzeugen, aber der Schnitt stammt von /video-use.

---

Architektur in einem Diagramm

motion/<video-name>/
├── package.json              # remotion 4 + react 19 + tsx + dotenv + mp3-duration
├── remotion.config.ts        # publicDir → ../../brand/motion (einzelne Asset-Quelle)
├── tsconfig.json
├── SCRIPT.md                 # menschenlesbares Erzählskript (pro Beat)
├── .env                      # ELEVENLABS_API_KEY (gitignoriert!)
├── .env.example
├── generate-audio.ts         # ElevenLabs Erzählungs-Runner, Hash-gecached pro Beat
├── generate-sfx.ts           # ElevenLabs Sound-Generierungs-Runner, Hash-gecached
├── generate-music.ts         # ElevenLabs Musik-Runner + Trimmen von führender Stille
├── script.timings.json       # Erzählungsdauern (generiert)
├── sfx.timings.json          # SFX-Dauern (generiert)
├── music.timings.json        # Musikdauer (generiert)
└── src/
    ├── Root.tsx              # registerRoot
    ├── Video.tsx             # Kompositions-Registrierung + LaunchVideoComposition-Wrapper
    ├── theme.ts              # fps + Dauer + Farben (spiegelt <DEIN_MARKEN_TOKENS_PFAD>)
    ├── script.ts             # Erzählungs-Beats (id, phase, text)
    ├── timings.ts            # Ladefunktion für script.timings.json + beatStartFrame()
    ├── sfx.ts                # SFX-Clip-Definitionen (verankert an Frames)
    ├── music.ts              # Musik-Prompt + Lautstärke
    ├── Narration.tsx         # Nur-Erzählung Sequences-Track
    ├── SoundDesign.tsx       # Erzählung + SFX + Musik kombiniert
    └── scenes/
        ├── HeroBackground.tsx      # gelooptes /video/hero-bg.mp4
        ├── OpeningScene.tsx        # die Orchestrierungsszene (verankert alle Phasen)
        ├── GlassCursor.tsx         # Multiplayer-artiger "du"-Cursor
        ├── CompanyTable.tsx        # Befüllen einer Datentabelle mit Spalten-Enthüllungen
        ├── AgentDashboard.tsx      # Google-Kalender-Wochenansicht
        ├── AgentRunDetail.tsx      # Tool-Aufruf-Ablaufverfolgungsansicht
        ├── MemoryPanel.tsx         # Statistiken + Sparkline-Dashboard
        ├── Confetti.tsx            # Partikel-Ausbruch
        └── ClosingCard.tsx         # Abschließender Chat-Callback (das "Einladungs"-Muster)

Assets leben in brand/motion/:

• video/hero-bg.mp4 + Poster (der Hero-Hintergrund-Loop deiner Marke · z. B. ein Ambient-Video unter brand/motion/video/hero-bg.mp4)
• logos/{models,tools,companies,sequencers}/ — Drittanbieter-Markenzeichen
• audio/{launch-narration,sfx,music}/ — generierte MP3s (für reproduzierbare Renderings eingecheckt)
• components/HeroChatMockup.tsx — framework-unabhängige Chat-Shell

---

Arbeitsablauf für ein neues Launch-Video

1. Briefing

Vom Benutzer erfragen:

• Zielgruppe: Für wen ist das? (GTM-Teams? Entwickler? Investoren?)
• Laufzeit: Zielsekunden (Standard 30-45s; 60s+ fühlt sich für Hype-Videos lang an)
• Schlüsselbotschaften: 4-8 zu kommunizierende Dinge, in erzählerischer Reihenfolge
• Ausgabeformate: Querformat (Web/LinkedIn), Quadrat (IG/Feed) oder beides

2. Beats skizzieren

Jeder Beat = ein Erzählsatz, der während einer visuellen Phase landet. Typischerweise 6-8 Beats. Summe der Beat-Audio-Längen = Gesamtlaufzeit. Beatlängen Ziel 3-7s pro Stück.

Für jeden Beat erfassen: id, phase (einzeilige visuelle Beschreibung), text (gesprochene Zeile, 10-20 Wörter).

3. SCRIPT.md schreiben

Speichere das Skript als Geschwisterdatei von package.json zur menschlichen Überprüfung. Format:

## Beat N — Phasenname
**Frames** ~Start–Ende (Sekunden) · **Ziel ~NWörter**

> "Gesprochene Zeile hier."

**Visuelle Synchronisation:** Was auf dem Bildschirm passiert.

4. src/script.ts erstellen

Spiegelt SCRIPT.md als Daten. Der Erzählungsgenerator und die Komposition importieren beide SCRIPT. Keine Remotion-Imports hier, damit Generatoren in einfachem Node ausgeführt werden können:

export interface Beat { id: string; phase: string; text: string; }
export const SCRIPT: Beat[] = [...];
export const AUDIO_SUBDIR = "audio/launch-narration";
export function audioPath(id: string) { return `${AUDIO_SUBDIR}/${id}.mp3`; }

5. Erzählung generieren

cd motion/<video-name>
cp .env.example .env  # ELEVENLABS_API_KEY einfügen
npm install
npm run generate-audio

Dies erstellt brand/motion/audio/launch-narration/{beat-id}.mp3 und schreibt Dauern in script.timings.json. Hasht nach Beat-Text, sodass unveränderte Beats bei nachfolgenden Läufen übersprungen werden (günstige Iteration).

6. Die visuelle Szene erstellen

In OpeningScene.tsx:

1. Beat-Starts beim Modulladen berechnen:

   const HERO_BEAT     = beatStart("hero", 0);        // → 0
   const DATABASE_BEAT = beatStart("database", 0);    // → 171 (nachdem Hero endet)
   // ... usw.
   

2. Jeden Animationsframe als BEAT_X + offset ausdrücken:

   const BADGE_IN     = HERO_BEAT + 6;
   const TYPE_START   = HERO_BEAT + 38;
   const TOOLS_START  = HERO_BEAT + 115;  // synchronisiert mit „GTM Stack“-Text
   const CURSOR_PRESS = HERO_BEAT + 165;
   

3. Überblenden zwischen Phasenszenen mittels Opazitäts-Gattern pro Beat.

7. SFX generieren (optional, aber wirkungsvoll)

Klick-/Übergangsmomente in src/sfx.ts definieren. Jeden Clip an einen bestimmten fromFrame unter Verwendung desselben beatStartFrame()-Helfers verankern. Beispiel-Clips, die sich lohnen:

• Tipp-Textur unter der Prompt-Animation
• Scharfer Klick bei Cursor-Drücken
• Feierlicher Pop bei „Einschreiben“-/Abschlussmomenten
• Dezentes Anschwellen bei der abschließenden Karten-Enthüllung

npm run generate-sfx

8. Musik generieren

Einen Prompt + Dauer in src/music.ts definieren. generate-music.ts schneidet führende Stille automatisch ab (ElevenLabs-Musik beginnt oft mit einer leisen Takt, die sich gegen die Erzählung als „keine Musik“ liest).

npm run generate-music

9. Mit Renderings iterieren

npm run render:landscape

Das Rendern dauert ~30-90s. Die Ausgabe immer mit yuv420p TV-Bereich neu encodieren für QuickTime-Kompatibilität – das Hintergrundvideo ist yuvj420p (JPEG- Bereich) und die Propagation unterbricht die Wiedergabe in einigen Playern:

ffmpeg -y -i out/launch-landscape.mp4 \
  -c:v libx264 -profile:v high -level:v 4.0 \
  -pix_fmt yuv420p -color_range tv -crf 18 -c:a copy \
  out/launch-landscape-fixed.mp4
mv out/launch-landscape-fixed.mp4 out/launch-landscape.mp4

Verwende ffmpeg -ss N -i ... -frames:v 1 /tmp/check.jpg zur Stichprobenprüfung bestimmter Zeitstempel, ohne das gesamte Rendering anzuschauen.

---

Designregeln

Stimme (visuell + gesprochen)

• Nie Gedankenstriche verwenden. Nur Punkte, Kommas, Doppelpunkte, Klammern, Mittelpunkt.
• Verbotene Wörter überall: hebelwirkung, synergie, robust, weltklasse, nahtlos, intuitiv, leistungsstark, innovativ.
• Zahlen schlagen Adjektive („8 Tools“ nicht „viele Tools“).
• Knapp, konkret. Kein Abwägen.
• Abschluss: markengeführt, nicht „Glückwunsch.“ Das stärkste Abschlussmuster, das hier gefunden wurde: „Einladungs“-Kicker → Chat-Eingabe mit einem neuen eingegebenen Prompt → URL-Signatur. Der Chat-Callback zum Eröffnungsbeat trifft jedes Mal den Punkt.

Farbe (Beispiel-Tokens · an deine Marke anpassen)

Hell, neutral. Nur ein Akzent, einmal pro Szene verwendet, wo er Bedeutung erhält (Live-Punkt, Hervorhebung, Erfolgszustand).

Token	Hex	Verwendung
--bg	#fafafa	Seitenhintergrund
--surface	#ffffff	Karten, Dashboards
--ink	#0a0a0a	Primärtext + Zahlen
--muted	#71717a	Sekundärtext
--line	#e4e4e7	Rahmen
--accent	#10b981	der eine Akzent

Typografie

• Stack: 'Helvetica Neue', Helvetica, Arial, sans-serif
• Mono (Kicker, Code, Labels): ui-monospace, 'SFMono-Regular', Menlo
• Hero-Typografie: Gewicht 450 mit enger Laufweite (-0.05em)
• Mono-Kicker-Stil: 11-14px, Großbuchstaben, Buchstabenabstand 0.16-0.18em, Farbe #71717a oder #a1a1aa
• Fette/mittlere Teile in gedämpft-grauem Fließtext spiegeln das Markenmuster wider: <span style={{ color: "#0a0a0a", fontWeight: 500 }}>fett</span> vs. umgebenden #71717a-Text.

Zwei visuelle Modi

Einen pro Szene wählen; nicht mischen:

1. Glasmorphisch / im Produkt — Chat-Shell, Cursor, Tool-Pills, über dem Hero-Hintergrundvideo. Weißes Glas mit backdrop-filter: blur(28px), rgba(255,255,255,0.45).
2. Sauberes Weiß / tabellarisch — Tabellen, Dashboards, Ablaufverfolgungen, Speicher-Panel. bg #ffffff, 1px solid #e4e4e7, dezenter Schlagschatten.

Der Hintergrundfade-Übergang zwischen Modi ist einer der filmischsten Momente; etwa ~20-30 Frames dafür einplanen und Easing.bezier(0.4, 0, 0.2, 1) (Material-Standard) für Geschmeidigkeit verwenden.

---

Animationsregeln

1. Dämpfung 22-28 bei Federn. Unter 20 erhält man einen Federungseffekt, der sich amateurhaft liest. Verwende 14-18 nur, wenn du absichtlich einen „Pop“ möchtest.
2. Engere Staffelungen > langsamer. Der erste Instinkt ist immer, zu verlangsamen; der zweite Durchlauf beinhaltet normalerweise, die Staffelungen zu halbieren. Standard-Staffelung zwischen kaskadierenden Elementen: 3-6 Frames.
3. Visuelle Elemente mit Text synchronisieren, wo es wichtig ist. Wenn die Erzählung „GTM Stack“ sagt, sollten die Tool-Pills auf dieses Wort einfliegen — nicht 3s vorher. Verwende with_timestamps von ElevenLabs für wortgenaue Synchronisation, oder schätze anhand der Beat-Dauer / Wortanzahl, wenn Näherung ausreicht.
4. Zeilenhöhen reservieren. Wenn Tabellen/Karten Text einblenden, verhindert minHeight in der Zeile, dass das Layout beim Füllen des Inhalts springt. Sieht ruckelig aus, wenn Zeilen während der Kaskade wachsen.
5. Bedingt rendern statt 0-Opazität, wenn es ein hohes leeres Rechteck erzeugen würde. Karten, die noch nicht mit der Enthüllung begonnen haben, sollten keinen Platz einnehmen.
6. Überblenden zwischen Szenenmodi, nicht harten Schnitt verwenden. Jede größere Szene erhält ein opacity-Gatter, das mit interpolate + Easing-Kurven animiert wird.

---

ElevenLabs Fallstricke

• Standardstimme + Modell: generate-audio.ts verwendet standardmäßig Bill (pqHfZKP75CvOlQylNhV4) mit eleven_multilingual_v2. Bill ist die advertisement-Anwendungsfallstimme in ElevenLabs' Bibliothek: weise, reif, klar. Liest sich wie eine echte Werbesprecherstimme, nicht „AI Typ auf Social Media“. multilingual_v2 ist das stabilste + lebensechteste Modell für die Produktions- Erzählung. Verwende eleven_turbo_v2_5 nicht für Launch-Videos — es ist das schnelle/günstige Modell und der Unterschied ist gegen ein Hero-Hintergrundvideo hörbar. Turbo ist in Ordnung für Vorschauen / SFX-Timing-Checks, nicht für das endgültige Rendering.
• Stimmeneinstellungen im Skript festgelegt: stability 0.40, similarity_boost 0.75, style 0.30, use_speaker_boost true. Gemäß ElevenLabs Best Practices: Stabilität unter 0.30 ist instabil, über 0.60 ist eintönig; Similarity 0.75 ist der Sweet Spot der Dokumentation; Style 0.20–0.40 fügt Ausdruckskraft ohne Drift hinzu. Style nicht über 0.4 erhöhen, es sei denn, du möchtest spürbare Tonfall-Schwankungen.
• Stimmen-Cache-Schlüssel enthält Stimme + Modell + Einstellungen. Das Ändern einer dieser Optionen (oder das Bearbeiten des Beat-Texts) ungültigt die gecachte MP3 und rendert den Beat neu. Einfach .env bearbeiten (VOICE_ID=... MODEL_ID=...) oder generate-audio.ts und npm run generate-audio erneut ausführen.
• Andere erzählungstaugliche Stimmen, falls Bill nicht passt:
  • Eric cjVigY5qzO86Huf0OWal — glatt, vertrauenswürdig, modernes SaaS-Gefühl
  • Chuck Miller HIGUfNOdjuWQwwapnTRW — Pro-Klon, tief rau, filmisch
  • George JBFqnCBsd6RMkjVDRZzb — britischer Geschichtenerzähler, narrative_story
  • Logan jD4PjnscE4XmlzgsuqY0 — Pro-Klon, junger Geschichtenerzähler
  • Brian nPczCjzI2devNBz1zQrb — der alte Standard; als social_media gekennzeichnet, liest sich mehr „AI“ als Bill
  • Muster dieser Stimmen in deinem Referenz-Remotion-Projekt Probe hören, bevor du dich festlegst
• Auflistung der Stimmen erfordert die Berechtigung voices_read. Manche Schlüssel haben sie nicht; wenn du kein GET /v1/voices ausführen kannst, greife auf bekannte IDs zurück.
• Music API lehnt Markennamen in Prompts ab. „Apple Keynote“, „Linear Launch Trailer“ usw. lösen eine TOS-Verletzung aus. Beschreibe die Stimmung, ohne Marken zu nennen („filmisch-instrumental für einen modernen Technologie-Launch-Trailer“, „pulsierender elektronischer Beat mit arpeggierter Synthesizer-Melodie“).
• Musik beginnt standardmäßig mit führender Stille (~1-2s). Der silenceremove ffmpeg-Durchlauf des Generators entfernt sie, sodass die Wiedergabe bei Frame 0 startet. Diesen Filter beibehalten.
• Mindestdauer für Soundeffekte beträgt 0,5 s. Alles darunter verursacht einen API-Fehler. Aufrunden.
• Musiklautstärke: 0.10 liest sich als still unter der Erzählung; 0.15-0.18 ist der Sweet Spot — deutlich vorhanden, aber kämpft nicht mit der Stimme.

---

Zu vermeidende Fallen

1. <Audio> ohne <Sequence> hinzufügen: Es wird während des gesamten Videos abgespielt, nicht auf eine Szene beschränkt.
2. Hartcodierte Startframes verwenden (from={850}) — sobald sich die Beat-Länge ändert, ist alles verschoben. Verwende immer eine Funktion.
3. Stille zwischen Beats vergessen: ElevenLabs fügt oft ~50-150 ms Pause zwischen Sprachclips ein. Füge Sequence mit overlap={8} hinzu, um hörbare Lücken zu vermeiden.
4. Das FFmpeg-Re-Encoding für die Ausgabe überspringen — ohne yuv420p TV-Bereich wird die Wiedergabe auf Apple-Geräten inkonsistent sein (grüne/schwarze Bildschirme).
5. Zwischenszenenmusik — die meisten Launch-Videos schneiden den Musik-Track zwischen Szenen, sodass er bei 0 ansteigt oder abfällt, damit er nicht über eine „ernste“ Einblendung spielt.
6. Den Gruppierungseffekt vergessen: Wenn sich zwei Elemente auf derselben Zeile befinden (Cursor + Chat-Input), rendere sie als <span> nicht als <div>, sonst bricht der Text zwischen Szenen um.
7. Bestimmte Assets über public/ ausliefern — Remotion erwartet statische Assets in public/. Wenn dein Monorepo Assets außerhalb des Remotion-Ordners teilt, verwende remotion.config.ts publicDir.

---

Referenzmodell

motion/reference-launch/
├── package.json
├── remotion.config.ts
├── tsconfig.json
├── SCRIPT.md
├── .env.example
├── generate-audio.ts
├── generate-sfx.ts
├── generate-music.ts
├── script.timings.json
├── sfx.timings.json
├── music.timings.json
└── src/
    ├── Root.tsx
    ├── Video.tsx
    ├── theme.ts
    ├── script.ts
    ├── timings.ts
    ├── sfx.ts
    ├── music.ts
    ├── Narration.tsx
    ├── SoundDesign.tsx
    └── scenes/
        ├── HeroBackground.tsx
        ├── OpeningScene.tsx
        ├── GlassCursor.tsx
        ├── CompanyTable.tsx
        ├── AgentDashboard.tsx
        ├── AgentRunDetail.tsx
        ├── MemoryPanel.tsx
        ├── Confetti.tsx
        └── ClosingCard.tsx