Launchvideo für ein Softwareprodukt
Produzieren Sie ein 30–60 Sekunden langes Video, das das Produkt verständlich macht und begehrenswert.
Die Entscheidung, die alles bestimmt: nachbauen, nicht aufzeichnen
Bildschirmaufnahmen kämpfen gegen einen an. Echte Latenz ist tote Luft. Nachdrehs sind teuer. Man kann kein Bild halten, man kann einen Schlag nicht verlangsamen und einen anderen beschleunigen, und man kann nicht eng zuschneiden, ohne in Kompressionsmatsch zu landen.
Also bauen Sie die Benutzeroberfläche als frame-gesteuertes React innerhalb von Remotion nach. Jedes visuelle Element ist eine
reine Funktion von useCurrentFrame(). Tippen landet auf einer exakten Kurve, ein
Ladezustand löst sich auf dem Beat auf, und ein Nachdreh kostet eine Zahl.
Dies ist nur sinnvoll, weil Sie den tatsächlichen Code des Produkts (wenn lokal) oder DOM+CSS (wenn gehostet) lesen und originalgetreu reproduzieren können. Tun Sie das – nehmen Sie die realen Klassennamen, die realen Farben, den realen Text. Der Nachbau sollte nicht von einer Aufnahme zu unterscheiden sein, sondern besser sein.
Wann stattdessen aufnehmen: schwere 3D-Grafiken, Videoinhalte im Produkt, eine
Canvas-/WebGL-Oberfläche oder eine native Desktop-App. Wenn eine bestimmte Oberfläche nicht nachgebaut werden kann,
zeichnen Sie nur diese Oberfläche auf und setzen Sie sie mit <OffthreadVideo> zusammen.
Phase 1 – Das Produkt verstehen
Lesen Sie references/discovery.md, bevor Sie mit dieser Phase beginnen. Es behandelt die
Durchsuchungs- und Sichtungsprozedur, das Gespräch über Zugangsdaten und wie man ein Designsystem
aus einer Live-Website extrahiert.
Kurzfassung:
- Bei einer URL: Durchsuchen Sie sie. Zuerst die Landing Page (sie sagt Ihnen, wie sie sich positionieren), dann die App selbst. Finden Sie heraus, welche Aufgabe das Produkt für wen erfüllt.
- Bei einem lokalen Repository/Entwicklungsserver: Lesen Sie den Code. Viel reichhaltiger – Sie erhalten die echten Komponenten, die echten Theme-Tokens, die echten Seed-Daten.
- Sortieren Sie die Seiten. Die meisten Produkte haben 20 Bildschirme und 3, die wichtig sind. Authentifizierung, Einstellungen, Abrechnung, Datenschutz, Konto, Onboarding-Standardseiten – diese sind fast nie die Geschichte. Finden Sie den Bildschirm, auf dem das Produkt das tut, was nur es kann.
- Wenn die guten Inhalte hinter einem Login stecken, fragen Sie zuerst – Testzugangsdaten oder ein
eingerichteter Account in ihrer lokalen Entwicklungsumgebung. Wenn keines verfügbar ist, geben Sie nicht auf
und fälschen Sie keine Sitzung, die Sie nie gesehen haben: Wechseln Sie zur Kapitelform und bauen Sie
aus den eigenen Feature-Karten der Landing Page, dem Text und den Komponenten.
discovery.mdenthält die Ernteprozedur und die Ehrlichkeitsregeln.
Bestätigen Sie dann Ihre Lesart mit dem Benutzer, bevor Sie bauen – eine falsche Lesart des Produkts kostet den gesamten Build. Zeigen Sie ihnen: Was Ihrer Meinung nach das Produkt tut, die 2–4 Bildschirme, die Sie zeigen wollen, das Heldenszenario, die Shot-Liste und die Musikfrage (siehe Phase 4). Ein Checkpoint, dann los.
Phase 2 – Die Form wählen
Lesen Sie references/structure.md. Zwei Formen funktionieren; die falsche Wahl kostet den
Build.
Form A – die einzelne Erzählung. Die Standardform. Ein Benutzer erledigt einen Auftrag und bekommt ein Artefakt. Keine Feature-Tour.
| Beat | Aufgabe |
|---|---|
| Hook (0–5s) | Nennen Sie das Problem mit den Worten des Betrachters. Noch keine Benutzeroberfläche. |
| Ask (5–12s) | Der Benutzer fragt nach der Sache. Nah an der Eingabe. |
| Work (12–25s) | Das Produkt tut sichtbar etwas Schwieriges. Zeigen Sie die Beweise. |
| Artifact (25–35s) | Die Ausgabe, vollständig, in lesbarer Größe. |
| Control (35–45s) | Der Benutzer ändert sie und bleibt am Ruder. |
| Slate (45–50s) | Logo, eine Zeile, Domain. |
Die Work- und Control-Beats unterscheiden eine echte Demo von einem Mockup. „Es hat mich gefragt, anstatt zu raten“ und „Ich konnte bearbeiten, was es gemacht hat“ sind Vertrauensargumente, und Vertrauen ist das, was ein Launch-Video eigentlich verkauft.
Wählen Sie den Moment, in dem das Produkt etwas tut, das ein Mensch nicht einfach selbst tun könnte, und machen Sie die Ausgabe konkret und sichtbar – ein generiertes Dokument, ein erstelltes Diagramm, ein behobener Bug, eine bereitgestellte Website. Konkrete Artefakte sind das, woran sich Menschen erinnern.
Form B – der Kapitel-Feature-Film. Drei Funktionen, jede eingeleitet durch eine klartextliche Beschriftungskarte, dann gezeigt.
hook → [01 label → feature] → [02 label → feature] → [03 label → feature] → slate
Verwenden Sie es, wenn das Produkt eingeschränkt ist und Sie von seiner Landing Page aus arbeiten, oder wenn die Funktionen wirklich keine gemeinsame Benutzerreise haben, oder wenn Sie drei eigenständige Clips aus einem Build haben möchten. Drei ist die Zahl – vier bedeutet, dass keine von ihnen ankommt.
Kapiteln Sie keine Sequenz. Wenn die Fähigkeiten nacheinander in einer einzigen Sitzung auftreten (Recherche → Entwurf → Bearbeitung), ist das ein Workflow, und die Beschriftung als drei Features kämpft gegen das Material. Wenn jemand Kapitel für ein sequentielles Produkt verlangt, bieten Sie den Mittelweg an: Behalten Sie die einzelne Erzählung und setzen Sie die Beschriftungen über die Aktion, während jede Fähigkeit erscheint. Gleiche Lesbarkeit, gleiche Clip-Grenzen, keine Laufzeitkosten, Geschichte intakt.
structure.md behandelt Kapitelkarten-Design, wie man die Beschriftungen schreibt (benennen Sie das Ergebnis,
nicht den Mechanismus; stehlen Sie die eigenen Worte des Produkts), Übergänge und Reihenfolge.
Phase 3 – Alles verankern
Erfinden Sie in welcher Domäne das Produkt auch ist, nicht seinen Inhalt. Wenn es ein juristisches Produkt ist, muss das Gesetz real sein. Wenn es Analytik ist, müssen die Zahlen plausibel und intern konsistent sein. Wenn es ein Code-Tool ist, muss der Code im Kopf des Lesers kompilieren.
Holen Sie das Echte aus dem Repository, der API, den Seed-Daten oder der Dokumentation heraus. Domain-Experten sehen sich diese Videos an, und eine erfundene Kleinigkeit kostet Sie alle. Parteinamen, Daten und Geldbeträge sind in Ordnung zu erfinden – diese sind spezifisch für einen Kunden, keine Behauptungen über die Welt.
Führen Sie einen Provenienzvermerk in der Datendatei, der angibt, woher jede Tatsache stammt. Das zukünftige Ich wird ihn wollen.
Phase 4 – Bauen
Führen Sie das Grundgerüst aus, das die Versionen festlegt, die tatsächlich zusammenarbeiten, und die Konfiguration schreibt:
python3 <skill-dir>/scripts/scaffold_video.py <target-dir> \
--name "product-launch" --fps 60 --seconds 45
Es erstellt ein eigenständiges Remotion-Projekt (sein eigenes Git-Repository – fügen Sie niemals Video-Tooling
zum Repository des Produkts hinzu, es sei denn, es wird darum gebeten), kopiert useCamera.ts hinein und
hinterlässt Ihnen ein Timeline-Modul zum Befüllen.
Dann, in der Reihenfolge:
-
src/timeline.ts– Frame-Mathematik und Shot-Grenzen. Wählen Sie einen BPM, dessen Beat eine ganze Anzahl von Frames ist (bei 60fps: 120 BPM = 30 Frames, 90 BPM = 40). Setzen Sie jede Shot-Grenze auf einen Beat. Selbst ohne Musik verleiht dies dem Schnitt einen inneren Rhythmus, und es bedeutet, dass eine Musikuntermalung später ohne Neuschnitt hinzugefügt werden kann. -
src/data/script.<lang>.ts– jeder String, jede Zahl, jedes Stück Dokumentinhalt, in einer Datei mit Provenienz-Kommentaren. Nichts in Komponenten hartcodiert. Zeitliche Anpassung und Übersetzung werden beide trivial. -
Komponenten – Erstellen Sie die Benutzeroberfläche des Produkts nach. Kopieren Sie echte Klassennamen. Wenn das Produkt Tailwind verwendet, übernehmen Sie dessen Konfiguration und Theme-CSS; wenn es CSS-Variablen für Farben verwendet, müssen Sie diese mitbringen, sonst wird alles farblos dargestellt.
-
src/scenes/ProductScene.tsx– Ein exportiertesB-Objekt, das jeden Beat als absolute Frame-Nummer enthält. Alles liest daraus: das DOM, die Kamera, der Ton. Zeitliche Anpassung bedeutet, diesen Block zu bearbeiten und sonst nichts.
Lesen Sie references/camera.md für das Shot-System, references/motion.md für
Dauern und Typografie.
Phase 5 – Audio
Zwei Spuren, zwei Dateien, zwei <Audio>-Tags: Effekte und Musik. Halten Sie sie
getrennt, damit jede ersetzt werden kann, ohne die andere neu zu generieren.
Effekte – references/sound.md. Zurückhaltung ist die ganze Disziplin: ein
45-Sekunden-Video benötigt normalerweise insgesamt drei bis fünf Ereignisse. Ein Pop bedeutet, dass etwas erschienen ist, ein Swish, dass sich ein Element innerhalb des Shots bewegt hat, ein Whoosh, dass sich der Shot bewegt hat.
python3 <skill-dir>/scripts/make_sfx.py sfx.spec.json public/sfx.wav
Musik – references/music.md. Fragen Sie, bevor Sie eine bauen. Die meisten Leute
haben eine Meinung und viele haben bereits einen Track. Fragen kostet einen Satz und kann die
gesamte Mühe sparen:
Möchten Sie eine Musikuntermalung? Wenn Sie einen Track haben, senden Sie ihn, und ich schneide darauf zu. Wenn nicht, kann ich eine synthetisieren – energiegeladen, ruhig, filmisch, minimalistisch, warm oder angespannt?
Wenn sie einen Track haben, schneiden Sie darauf zu: Finden Sie seinen BPM, stellen Sie die Timeline darauf ein, verschieben Sie die Shot-Grenzen auf seine Takte. Andernfalls synthetisieren Sie eine Untermalung, deren Arrangement-Änderungen auf Ihren Schnitten auf den Frame landen:
python3 <skill-dir>/scripts/make_music.py music.spec.json public/music.wav
Setzen Sie einen sections-Eintrag auf jede reale Shot-Grenze, einen hits-Eintrag auf Ihren
stärksten Schnitt und einen ducks-Eintrag unter jede gehaltene Zeile, die Sie gelesen statt gefühlt haben möchten. Musik bei Spitze ~0,30, Effekte bei ~0,62. Wählen Sie die Stimmung basierend darauf, was das Produkt ist – ernste Themen erfordern eine ruhigere Untermalung, und ein hektischer Schnitt braucht eine sparsamere.
Phase 6 – Mit Standbildern überprüfen, vor dem Rendern
Dies ist die enge Schleife, und sie zu überspringen kostet Stunden.
npx remotion still <CompositionId> out/f0700.png --frame=700
Dann schauen Sie sich das PNG tatsächlich an. Rendern Sie ein Standbild pro Shot, plus eines an jedem Übergang. Überprüfen Sie: Ist das Motiv im Bild, wird irgendetwas mitten im Wort abgeschnitten, gibt es toten Raum, passt der Text.
Fügen Sie eine stille Komposition hinzu (defaultProps: { withAudio: false }), damit Standbilder die Audiodatei nicht benötigen, um zu existieren.
Stimmen Sie numerisch ab, wo immer möglich. Easing-Kurven, Scroll-Distanzen, spektrale Inhalte – all dies ist berechenbar. Schreiben Sie ein Wegwerf-Python-Skript, das die Kurve abtastet und ausgibt, was Sie sonst erraten würden. Es ist schneller als ein Render und es ist richtig.
Rendern Sie das vollständige Video erst, wenn die Standbilder korrekt sind.
npx remotion render <CompositionId> out/video.mp4 --concurrency=4
Begrenzen Sie die Gleichzeitigkeit auf etwa 4 auf einem 16-GB-Rechner – Remotion erzeugt einen Chrome-Tab pro Slot und die Standardeinstellung (Anzahl der Kerne) führt zu Auslagerungen.
Phase 7 – Ehrlich übergeben
Senden Sie die Datei. Dann sagen Sie klar:
- Was Sie nicht überprüfen konnten. Sie können Standbilder lesen; Sie können nicht beurteilen, wie sich acht Sekunden anfühlen, und Sie können das Audio nicht hören. Sagen Sie es.
- Jeden Bildschirm, den Sie rekonstruiert und nicht beobachtet haben – insbesondere bei einem eingeschränkten Produkt. Listen Sie sie auf und bieten Sie an, diese Beats zu wiederholen, wenn sie Zugang gewähren.
- Wo Sie eine Entscheidung getroffen haben, mit der sie möglicherweise nicht einverstanden sind.
- Wie man die Musik austauscht: Legen Sie eine beliebige WAV- oder MP3-Datei unter
public/music.wavab und rendern Sie erneut. - Alles, was Sie während des Bauens in ihrem Produkt gefunden haben – einen Rendering-Fehler, eine falsche Beschriftung, einen fehlenden Zustand. Sie haben gerade ihre Benutzeroberfläche genauer gelesen, als die meisten Leute es je tun werden. Diese Beobachtung ist oft mehr wert als das Video.
Referenzdateien
Lesen Sie diese, wenn Sie die entsprechende Phase erreichen – sie sind detailliert, und es bringt nichts, sie alle auf einmal zu laden.
| Datei | Wann |
|---|---|
references/discovery.md | Phase 1 – Browsen, Seitenauswahl, Zugangsdaten, Designsysteme, und Aufbau von der Landing Page eines eingeschränkten Produkts |
references/structure.md | Phase 2 – Einzelne Erzählung vs. Kapitel, Kapitelkarten-Design, Schreiben von Feature-Beschriftungen, Übergänge, Reihenfolge |
references/camera.md | Aufbau von Shots – Layout-Raum, Fokuspunkt-Kamera, Schnitt vs. Push vs. Morph, Isolieren von Komponenten |
references/motion.md | Animationsdauern, Typografie, Hook-Muster, die Frage-Leiste |
references/sound.md | Sounddesign – das Pop/Swish/Whoosh-Vokabular, Zurückhaltung, Synthetisieren von Tastatur und Klicks |
references/music.md | Beschaffen vs. Synthetisieren einer Untermalung, Wahl einer Stimmung, Ausrichten von Abschnitten an Schnitten, Mischen unter den Effekten |
references/pitfalls.md | Lesen Sie dies vor Ihrem ersten Render. Fehler, die echte Stunden kosten, jeweils mit der Lösung. |
Mitgelieferte Skripte
<skill-dir> unten ist das eigene Verzeichnis dieser Fähigkeit – der Pfad, der Ihnen gegeben wurde, als die Fähigkeit geladen wurde. Gehen Sie nicht von einem festen Installationsort aus; die Fähigkeit kann persönlich, als Plugin oder in ein Projekt ausgecheckt installiert sein.
| Skript | Was |
|---|---|
scripts/scaffold_video.py | Erstellt das Remotion-Projekt mit funktionierenden Versions-Pins und Konfiguration |
scripts/make_sfx.py | Synthetisiert eine Soundeffekt-Spur aus einer JSON-Ereignisliste. Keine Samples, keine Abhängigkeiten außer numpy. |
scripts/make_music.py | Synthetisiert eine Musikuntermalung in einer von sechs Stimmungen, deren Arrangement auf Ihre Schnitte ausgerichtet ist. Gleiche Abhängigkeiten. |
assets/useCamera.ts | Der Fokuspunkt-Kamera-Hook – kopieren Sie ihn nach src/hooks/ |
assets/ChapterCard.tsx | Kapitelkarte für die Kapitelform – kopieren Sie sie nach src/components/ |
Die Kurzfassung
Nachbauen statt aufzeichnen. Eine Geschichte, ein Artefakt – es sei denn, das Produkt ist eingeschränkt oder seine Funktionen sind wirklich getrennt, dann drei Kapitel mit klaren Beschriftungen. Jede Domänentatsache verankern. Frames sind die Einheit von allem. Isolieren Sie eine Komponente, anstatt die Seite zuzuschneiden. UI-Bewegung ist 150–300 ms, Kamerabewegungen sind ~1 s. Vier Geräusche sind genug. Fragen Sie, bevor Sie Musik machen. Schauen Sie sich die Standbilder an, bevor Sie rendern. Sagen Sie, was Sie nicht überprüfen konnten und was Sie abgeleitet haben.