Produkt-Launch-Video
Erzeugt einen ca. 40-sekündigen Film, bei dem Motion Graphics die Erzählung tragen und jedes "Produkt"-Pixel wirklich von der echten App gerendert wird.
Dies existiert aufgrund einer falschen Entscheidung, die Leute immer wieder treffen:
- Ein reiner Motion-Graphics-Film sieht professionell aus, beweist aber nichts – kein echtes Produkt.
- Eine reine Bildschirmaufnahme beweist alles, sieht aber amateurhaft aus – kein Motion Design.
Die Antwort ist keines von beidem: Remotion ist die Master-Timeline, und die Produktaufnahmen sind echte Frames, die durch das Fahren der tatsächlichen App in einem Headless-Browser aufgenommen werden.
Baue ein kleines Remotion-Projekt neben dem Produkt: gemeinsames Capture-Toolkit + Primitiven, ein Verzeichnis pro App-Film (Marke, Aufnahmen, Capture-Skript, Timeline). Siehe references/toolkit.md für das empfohlene Layout.
Nicht verhandelbar
Lies diese, bevor du Code schreibst. Jede hat echte Debug-Zeit gekostet, und jede schlägt still fehl – du bekommst plausibel aussehende Ausgabe, die falsch ist.
Capture
| Falle | Was passiert | Behebung |
|---|---|---|
setViewport({deviceScaleFactor: 2}) | page.screencast() misst seine ffmpeg-Filterkette bei der System-DPR, baut also eine 1×-Kette auf und verwirft die Retina-Details. Kein Fehler. | Erzwinge es im Browser: --force-device-scale-factor=2 + deviceScaleFactor: 0 im Viewport (0 = "Systemstandard"). |
| Headless rendert keinen Cursor | page.mouse.move() sendet CDP-Ereignisse, die die Seite sieht, aber es wird nichts gemalt. | Injiziere einen DOM-Cursor über evaluateOnNewDocument. Platziere ihn in der Seite, nicht in Remotion komponiert – dann skaliert jede Remotion-Transformation (Frame-Inset, Zoom-Punch) ihn exakt wie eine echte Aufnahme. Ein Sprite erfordert das Invertieren jeder Transformation, und 6px Drift wirkt kaputt. |
| Headless hat keine GPU | Jeglicher WebGL/three.js-Inhalt wird als leerer oder schwarzer Bereich aufgezeichnet. | --use-gl=angle --use-angle=swiftshader --enable-unsafe-swiftshader. Überprüfe mit einem Pixel-Rücklesen, nicht nur "existierte ein Kontext". |
| SwiftShader komponiert auch die Seite | Ein Software-GL-Treiber, der 2560x1440 komponiert, begrenzt den gesamten Tab auf ~8fps, sodass jede animierte Aufnahme als Diashow aufgezeichnet wird. Es wirkt wie ein langsames Produkt, nicht wie eine kaputte Aufnahme, also vermutet niemand die Flags. | Füge --disable-gpu-compositing hinzu. Der CPU-Rasterizer von Skia ist viel schneller bei einfachem 2D, WebGL funktioniert immer noch, und A/B-Standbilder sind identisch. Gemessen auf derselben Seite: 8,2fps → 60,1fps. |
| Glätte nach Augenmaß beurteilen | Doppelte Frames sehen in einem Kontaktbogen gut aus und beim Scrubbing Einzelbild für Einzelbild. Nur die Wiedergabe verrät es, und dann ist es bereits gerendert. | Zähle unterschiedliche Frames: ffmpeg -i take.mp4 -vf mpdecimate,showinfo -f null - 2>&1 | grep -c pts_time. Deutlich unter der Frame-Anzahl der Datei bedeutet Ruckeln. |
page.mouse.click(x, y, {clickCount: 2}) | Sendet einen Tastendruck mit clickCount-Metadaten. Chrome synthetisiert nie dblclick. Zwei diskrete Klicks im Abstand von 60ms auch nicht. | Wenn die App einen echten dblclick benötigt, klicke für die sichtbare Cursor-Bewegung und sende dann das Ereignis innerhalb des Frames an den eigenen Koordinaten des Elements. |
page.keyboard.type() nach Klicken in ein Iframe | Tasten gehen an das, was das übergeordnete Element fokussiert hat. Wenn das übergeordnete Element Tasten an die App weiterleitet (Pfeiltasten-Navigation, Tastenkürzel), steuert dein Tippen still die UI, anstatt Text einzugeben. | Gib in das Frame ein: frame.type(selector, text). |
evaluateOnNewDocument macht DOM-Arbeit | Läuft zu Dokumentbeginn, wo document.head und document.documentElement beide null sein können. Ein ungeschütztes appendChild wirft einen Fehler und bricht alles danach in diesem Skript still ab. | Schützen und auf DOMContentLoaded verschieben. |
| Aufzeichnen der Navigation | Vergräbt die nützlichen Sekunden tief in der Datei und bläht das Mezzanin auf. | Teile jede Aufnahme in setup (nicht aufgezeichnet) und action (aufgezeichnet) auf. |
| Markierungs-Zeitstempeln vertrauen | Screencast ist variable Bildrate; die codierte Timeline komprimiert relativ zur Echtzeit, also eine Markierung bei 22s ist nicht bei 22s in der Datei. | Verwende Markierungen, um ungefähr zu finden, wo gesucht werden muss, und wähle dann startAt durch Extrahieren von Frames und Nachschauen. |
| Entfernte/verlinkte Assets | Drittanbieter-CDN lehnen den Capture-Browser gelegentlich ab; Bildraster werden als leere Transparenz-Schachbrettmuster dargestellt, was als kaputtes Produkt wirkt. | Warte auf Bilder und warne, rahme dann die Aufnahme so, dass sie sie vermeidet. Versende keinen Take mit leerer Kunst. |
window.scrollTo in einer App-Shell | Viele Shells scrollen ein inneres Element (<main class="overflow-y-auto">), nicht das Fenster. Das Scrollen des Fensters ist ein stiller No-Op, und die Aufnahme bewegt sich nie. | Finde den echten Scroller und setze seinen scrollTop. |
| Klickkoordinaten erraten | Apps akzeptieren Interaktionen oft nur auf bestimmten Knoten – z. B. ein Inline-Editor, der nur Blatt-Elemente akzeptiert (childElementCount === 0), während Überschriften ihren Text in Spans einwickeln. Das Klicken des visuell offensichtlichen Ziels tut nichts. | Lies die eigene Quelle der App für die Regel, frage dann die Seite, wo ihre gültigen Ziele sind (frame.evaluate) und bilde Frame-Koordinaten → Seitenkoordinaten über die gemessene Box des Iframes ab. |
Rendering
| Falle | Was passiert | Behebung |
|---|---|---|
| Überspringen der Mezzanin-Transcodierung | Remotion sucht willkürlich; bei einer normalen GOP dekodiert jede Suche ab dem vorherigen I-Frame. Ein 3-minütiges Rendern wird zu 40. | Transcodiere zu All-Intra: -c:v libx264 -crf 14 -g 1 -keyint_min 1 -sc_threshold 0 -pix_fmt yuv420p, plus explizite bt709-Tags, damit Chrome die Markenfarbe nicht verschiebt. |
page.screencast({format:'mp4'}) | Gibt VP9 in einem fragmentierten MP4 aus – schlecht unterstützt. | format: 'webm', dann transcodieren. |
<TransitionSeries> mit einem Beat-Raster | Übergänge überlappen, also Gesamtdauer = Summe der Sequenzen − Summe der Übergänge. Dein Frame-Raster driftet still. | Verwende für einen Frame-genauen Schnitt explizit <Sequence from/durationInFrames> und führe Überblendungen lokal durch. Überprüfe, dass die Kette die Gesamtsumme ergibt. |
Eine <Sequence> länger als ihre Quelle | Friert auf dem letzten dekodierten Frame ein – wirkt wie ein Stillstand, kein Fehler. | Begrenze jede Dauer durch die reale Take-Länge. Notiere die Quelldauern in einem Kommentar. |
premountFor bei überlappenden Sequenzen | Eine vorgemountete Sequenz rendert früh über der aktuellen – du bekommst geisterhafte doppelt belichtete Texte. | Mounte keine Sequenzen vor, die sich Bildschirmplatz teilen; mounte nur über harte Schnitte vor. |
| Overlays in Kompositionskoordinaten positioniert | Wenn die Footage-Komponente die Platte intern beschneidet und skaliert, passt eine Maske oder Hervorhebung in Kompositionskoordinaten nicht zu irgendetwas im Frame – Kanten schneiden durch den Inhalt. | Platziere Overlays innerhalb derselben Transformation wie die Platte oder führe die Behandlung nativ statt über Footage durch. |
Math.random() / Date.now() in einer Komposition | Neuberechnung bei jedem Frame; Text flackert. Remotion rendert jeden Frame unabhängig. | Mache alle Zufälligkeit zu einer reinen Funktion des Index (ein sin-basierter Hash). |
CSS-Animationen / -Übergänge / Tailwind animate-* in Remotion | Rendern eingefroren oder Müll – Remotion treibt die Zeit über useCurrentFrame(), nicht über die Wanduhr. | Baue Bewegungen mit useCurrentFrame() nach. Das bedeutet auch, dass du die animierten Komponenten der Marketingseite im Allgemeinen nicht wiederverwenden kannst. |
| Eine Schleife durch Offset in den Film bauen | Zwei Nahtfehler: ein schwarzer Blitz, wenn der Bereich auf einer Überblendung öffnet, und ein harter Sprungschnitt, wo er wickelt. | Gib der Schleife ihre eigene Komposition und überblende ihr Ende in ein <Freeze frame={0}> ihres eigenen Anfangs. Wähle eine kontinuierlich bewegte Aufnahme; alles, was verweilt, ist nahezu statisch und schlecht zum automatischen Abspielen. |
Prozess
1. Produktwahrheit vor dem Design des Films etablieren
Der mit Abstand wichtigste Schritt. Lese den Code für jede Fähigkeit, die der Film behaupten will. Marketingseiten illustrieren Wünsche; nimm nicht an, dass das Produkt tut, was seine eigene Landing-Page-Animation impliziert.
Es ist bereits einmal passiert: Ein geplanter Höhepunkt des Films wurde von einer animierten Komponente auf der Marketingseite übernommen, die ein Dokument zeigte, das durch vier verschiedene Seitenverhältnisse morphte. Das Produkt hatte ein einziges Seitenverhältnis und eine feste Exportstufe fest codiert – die Komponente war eine Illustration einer Idee, kein Feature. Die Glanznummer darauf aufzubauen, hätte eine nicht unterstützte Behauptung auf die Startseite gesetzt.
Überprüfe insbesondere:
- Welcher Inhalt wird tatsächlich gerendert? Alte Datensätze können vom aktuellen Motor nicht gerendert werden.
- Welche Routen benötigen Authentifizierung? Welche leiten ohne vorherigen Zustand weiter?
- Was erfordert jedes interaktive Feature tatsächlich, um zu interagieren?
2. Risiken der Pipeline mit dem kleinstmöglichen Test reduzieren
Der Reihe nach, bevor etwas darauf aufgebaut wird:
- Beweise die Capture-Geometrie (seitenmarkierte Seite → ist die Datei wirklich 2×?).
- Beweise die Authentifizierung (kann der Browser eine angemeldete Route erreichen?).
- Beweise WebGL, falls 3D involviert ist.
- Beweise eine Interaktion Ende-zu-Ende.
3. Erkunden, nicht raten
Mache Screenshots von jedem Kandidaten-Oberfläche und zeige dem Benutzer einen Kontaktbogen, bevor du Zeit für Videoaufnahmen aufwendest. Der Inhalt dominiert den Produktionswert: mittelmäßiger Demo-Inhalt macht einen schönen Film zu einer Werbung für ein mittelmäßiges Produkt.
4. Wähle den Demo-Inhalt bewusst aus
Bevorzuge die eigene Marke des Produkts. Die Darstellung einer erkennbaren dritten Partei ist überzeugender, setzt aber die Marke eines anderen auf die Startseite, und das Ersetzen einer dritten Partei durch eine andere ändert das nicht. Selbstreferenzieller Inhalt schließt auch den Kreis: Das Artefakt, das das Werkzeug verkauft, wurde vom Werkzeug gemacht.
Wenn der Inhalt noch nicht existiert, ist das Erstellen eine Designaufgabe, keine Capture-Aufgabe – es sind die Frames der zweiten Hälfte des Films. Entwerfe ihn bewusst, erstelle einige Kandidaten und lasse den Benutzer wählen.
5. Schneide auf ein Raster
120 BPM ⇒ 1 Takt = 60 Frames = 2s bei 30fps. Setze jeden Schnitt auf ein Vielfaches von 30 und jede Aktgrenze auf 60. Kostet nichts, und Kürzungen ergeben sich kostenlos.
6. Durch Hinsehen überprüfen
Extrahiere nach jedem Rendern Frames und sieh sie dir tatsächlich an. Erstelle einen beschrifteten Kontaktbogen. Jeder bisher gefundene echte Fehler – leere Logos, eine Aufnahme mit der falschen Seite, eine auf einem hellen Panel unleserliche Bildunterschrift, ein dunkler Streifen durch einen falsch gemessenen Zuschnitt, eine Maskennaht durch ein Label – wurde durch Ansehen von Frames gefunden, nicht durch Bestehen eines Tests.
Sieh es dir stumm an, denn so wird es automatisch abgespielt.
Redaktionelle Regeln
Diese unterscheiden einen funktionierenden Film von einem guten.
Jede Behauptung auf dem Bildschirm muss durch die Footage daneben gestützt werden. Ein Schnitt hatte "Teile einen Link" über Footage, in der nichts geteilt wurde. Zeige es entweder oder formuliere es klar auf einer Karte – impliziere nicht.
Achte auf Behauptungen, die im Kontext ehrlich sind, aber nicht im Videomaßstab. Eine mit "illustrativ" in kleiner Schrift bezeichnete Abbildung wird zu einer harten Behauptung, sobald sie ein gehaltener Hero-Frame in einem Marketingfilm ist. Halte diese aus gehaltenen Frames heraus.
Zitiere die Bewegung des Produkts, erfinde sie nicht neu. Übernimm die eigene Easing-Kurve und Eintritts-Vokabular der App. Eine Kurve für alles, was eintritt oder landet. Nichts hüpft – Überschwingen wirkt wie Zögern.
Zwei Gründe, niemals Mittelgrau. Ein dunkler Grund für Aussagen, ein heller für Erklärungen. Wähle sie aus den eigenen Tokens des Produkts.
Ein Akzent, sparsam eingesetzt – der Cursor, das eine Wort, das den Satz trägt, ein Zustandswechsel. Keine Dekoration.
Nichts im Frame, das nicht für das Publikum ist. Echte E-Mail-Adressen, Organisationsnamen, die eigene Unterhaltung des Bedieners mit einem In-App-Assistenten, Dev-Mode-Abzeichen. Bevorzuge die eigenen Mechanismen der App (Cookies für eine eingeklappte Seitenleiste oder ein geschlossenes Banner) gegenüber CSS-Hacks – kein Aufblitzen auf Kamera.
Eine "Glanznummer" verdient die meiste Zeit. Wähle den einen Moment, der etwas zeigt, was Wettbewerber strukturell nicht können, dann: Kamera fixieren, keine Schnitte, kein Text darüber, und lasse die Musik ausfallen. Stille sagt dem Auge, dass sich das Subjekt bewegt, nicht die Kamera. Setze die erklärende Zeile danach – Text vor der Reaktion sagt den Leuten, was sie denken sollen.
Lesbarkeit schlägt Abdeckung. Eine über vier Bildschirme verteilte Aufnahme kann dazu führen, dass keiner lesbar ist. Bei einem zu verweilen ist normalerweise besser.
Baue den Beat, anstatt ihn zu filmen, wenn die UI nicht mithalten kann. Ein statischer Bildschirm kann nicht drei Dinge nacheinander einführen. Wenn der Beat eine Sequenzierung erfordert, die das Produkt nicht bietet, komponiere ihn nativ in Remotion mit dem echten Text und den echten Tokens des Produkts – und halte ihn visuell von der Footage unterscheidbar, sodass er als Erklärung und nicht als gefälschter Screenshot wirkt.
Wenn es kein Voiceover gibt, tragen die Karten 100% der Bedeutung. Kalkuliere Lesezeit ein.
Mit dem Benutzer besprechen, nicht allein entscheiden
- Slogans und Text auf dem Bildschirm. Biete mehrere Optionen, gruppiert nach Blickwinkel, mit einer Empfehlung und der Begründung. Beachte, dass der Film einen Demo-Hinweis möchte, während eine Website-Überschrift eine dauerhafte Positionierungsaussage möchte – sie müssen nicht dieselbe Zeile sein.
- Welcher Inhalt gezeigt werden soll – zeige den Kontaktbogen.
- Musik. Du kannst keinen Track lizenzieren. Gestalte den Film so, dass er stumm funktioniert, und liefer ein Cue-Sheet (BPM, wo ein Drop landet), damit ein bereitgestellter Track später auf das Raster fällt. Wenn einer eintrifft, überprüfe seine Form, bevor du ihn platzierst: Messe die Lautstärke über die Zeit, anstatt anzunehmen, dass er eine Einleitung oder einen Drop zum Ausrichten hat.
- Remotion-Lizenzierung. Kostenlos für Einzelpersonen, gemeinnützige Organisationen und Unternehmen mit bis zu 3 Mitarbeitern; darüber ist eine kommerzielle Lizenz erforderlich. Weise darauf hin, bevor es ausgeliefert wird.
Befehle (Form)
Capture startet nie einen Server und errät nie einen Port – Auth-URLs sind normalerweise festgelegt.
# Terminal 1 – Produkt läuft bereits
pnpm --filter <app> dev # oder Äquivalent
# Terminal 2 – Filmprojekt
pnpm install
pnpm check-webgl # falls 3D involviert
pnpm capture:<app> # oder eine Aufnahme: pnpm capture:<app> <shot>
pnpm mezzanine:<app> # obligatorisch – siehe Fallen
pnpm studio
pnpm render:<app> # mp4 / webm / loop / poster nach Bedarf
Auth für angemeldete Oberflächen: Bevorzuge das Ausleihen eines Live-Sitzungscookies gegenüber der Anmeldung eines Wegwerf-Benutzers (leere Konten erzwingen vor jedem Dreh langsame Inhaltserstellung).
Auf eine Seite ausliefern
Zwei Formen, und es ist die Entscheidung des Benutzers:
- Kurzer Loop, Klick für den Film. Am leichtesten – ein paar hundert KB spielen automatisch ab, der vollständige Film wird nur abgerufen, wenn der Benutzer klickt.
- Datei mit Teaser und Schalter. Ein -Tag, der bei 1s endet; ein Overlay-Button startet ein zweites mit dem vollständigen Film. Gleiche Kompromisse wie oben.
Vollständiger Film: Keine Steuerung (manuelles Vor- oder Zurückspulen würde die Schnitte zeigen), kein Ton (Autoplay-Richtlinien blockieren ihn auf den meisten Geräten), playsinline und muted. Wähle die Darstellungsgröße passend zum App-Store-Video des Produkts; fast alle Produkte haben bereits solche Referenzen.
Siehe auch
references/toolkit.md– empfohlenes Layout und Capture-Toolkitreferences/shotlist-[app].md– Vorlage für die Aufnahmeliste eines bestimmten Films