Produktwerbevideo, in Code erstellt
Eine Pipeline für 15–20 Sekunden Produktwerbung ohne Video-Editor: Jeder Frame, Sound und jede Sprachzeile wird von Skripten generiert, sodass das gesamte Video reproduzierbar und als Text editierbar ist.
Projektfakten ─► Brief + Storyboard ─► Visuals ─────────────► Remotion Render ─► MP4
├ 2D: React (Remotion) ▲
└ 3D: Blender (Headless) ─► JPG-Frames
Sound: scripts/score.py ─► WAV ┘
Sprache: scripts/kokoro_tts.py ─┘
Arbeitsbeispiel (GhostCommits, echte Dateien): examples/ghostcommits/.
Schritt 1 — Das Produkt verstehen, das Briefing schreiben
Lies die README, die Landing Page und den Code. Extrahiere: Ein-Satz-Pitch, 3–4 konkrete Belege (Zahlen sind besser als Adjektive: „1 Datei“, „0 Logins“), die Markenfarben aus dem CSS, Logo SVG, URL. Schreibe auf, was NICHT behauptet werden darf (z. B. „nur Testnet“, „nicht anonym“, keine Benutzerzahlen). Jede auf dem Bildschirm erscheinende Zeile und jede Sprachzeile wird gegen diese Liste geprüft. Frage den Benutzer nach einer Palette / einem Stil, nur wenn die Marke keine eigenen Vorgaben definiert.
Schritt 2 — Storyboard (in eine .md-Datei schreiben, bevor du baust)
18 s bei 30 fps = 540 Frames. 5–6 Einstellungen von ~2,5 s (75 Frames = ein Takt bei 96 BPM, sodass Schnitte auf den Beat fallen). Jede Einstellung: Frames, Kamera / Bewegung, Text auf dem Bildschirm, Sound. Ende mit einer 3–4 s Endkarte (Name, Slogan, URL). Vorlage: references/storyboard.md.
Schritt 3a — 2D-Stil (Remotion)
Kinetypografie + flache Formen, „Spotify Wrapped“-Energie. Siehe references/remotion-2d.md.
npx create-video@latest --yes --blank --no-tailwind video dann eine Komponente pro Werbung, gesteuert nur durch useCurrentFrame() + interpolate mit Easing. Keine CSS-Übergänge.
Schritt 3b — 3D-Stil (Blender, Headless)
Glänzendes Heldenobjekt in schwarzer Leere, Makro-Nahaufnahmen, Lichtstreifen über der Oberfläche, harte Schnitte, große Statistik + kleine Bildunterschrift unten links. Siehe references/blender-3d.md.
Ein Python-Skript baut die Szene, setzt Keyframes für jede Einstellung und rendert Frames:
blender -b --factory-startup -P scene.py -- anim ../public/frames. Remotion überlagert den Text auf den Frames (examples/ghostcommits/GhostAdV2.tsx). Rendere zuerst 2–3 Standbilder und betrachte sie, bevor du die vollständige Animation startest.
Schritt 4 — Sound (scripts/score.py)
Schreibe ein JSON-Cue-Sheet: Ein Eintrag pro visuellem Ereignis, gekennzeichnet durch Frame-Nummer aus dem Animationscode (Schnitt → cut_hit, Objekt fliegt ein → whoosh, landet → click/lock, Lichtstreifen → glint, Endkarte → impact, Aufbau → riser). Dann python scripts/score.py cues.json.
Es synthetisiert alles (keine Samples, keine Lizenzen), fügt ein 96 BPM Musikbett hinzu, das bei break_frame einsetzt und bei end_frame endet, und gibt die Lautstärke pro Sekunde aus, sodass du ohne Zuhören eine Plausibilitätsprüfung machen kannst. Details und Verstärkungsempfehlungen: references/sound.md.
Schritt 5 — Sprachausgabe (optional)
Kurze Zeilen, ≤ 6 Wörter, eine pro Einstellung, passend zum Text auf dem Bildschirm. Beste kostenlose Option:
python scripts/kokoro_tts.py lines.txt vo/ (gehostetes Kokoro, 3 Stimmen zum Vergleich). Füge die Dateien zur voiceover-Liste des Cue-Sheets hinzu, mit Startzeiten, wenn der Text dieser Einstellung erscheint; score.py schneidet Stille ab und senkt die Musik unter der Sprache. Miss die Länge jeder Zeile und stelle sicher, dass sie endet, bevor die nächste beginnt. Optionen und Lektionen: references/voiceover.md.
Schritt 6 — Rendern und ausliefern
<Html5Audio src={staticFile("audio/soundtrack.wav")} /> in der Komposition, dann
npx remotion render <CompositionId> out/ad.mp4. Sende das MP4 an den Benutzer. Sage klar, dass du Audio nicht hören kannst: Lautstärke und Timing wurden numerisch geprüft, nicht nach Gehör.
Wichtige Regeln
- Ehrlicher Text: Keine Behauptung, die das Produkt nicht untermauern kann; behalte Einschränkungen (Beta, Testnet) auf dem Bildschirm.
- Erstelle keine spezifische Markenwerbung nach (Logos, Musik, Charaktere) – leihe dir nur den Stil.
- Text ≥ 48 px bei 1080p, auf dem Bildschirm ≥ 1,2 s, unten links oder zentriert, niemals über dem Gesicht des Helden.
- Rendere Standbilder vor dem vollständigen Render; überprüfe einen Frame aus jeder Einstellung.
- Halte generierte Frames/Audio außerhalb von Git (
.gitignore); committe Skripte + Storyboard.