dolly: Launch-Film in Remotion, jedes Format

dolly: Produktvideos und Bewegtgrafik in Code

Das Video ist ein Remotion-Projekt: React-Komponenten, die Bild für Bild gerendert werden. Neben dieser Datei befindet sich starter/ mit zwei funktionierenden Videos: Video, ein 41-Sekunden-Schnitt von Termarys Launch-Video aus echten Aufnahmen, und Promo, ein 25-Sekunden-Bewegtgrafik-Schnitt nur aus Vorlagen. Beide werden in 8 Stilen und 4 Formaten gerendert. Du formst sie in die des Nutzers um und behältst, was sie funktionieren lässt.

Plan → Filmmaterial (aufnehmen oder vorhandenes des Nutzers scannen) → Szenen bauen → Bilder überprüfen → Rendern

Du kannst kein Video ansehen, daher überprüfst du es, indem du Kontaktbögen renderst und die PNGs liest. Das machst du nach jeder Änderung: Die meisten schlechten Bewegungen sind in einem Bogen sichtbar.

Lies nur, was der Job braucht. Die Pfade sind ab dem Ordner dieser Fertigkeit:

Wann	Lies
Du nimmst das Produkt auf einem Mac auf (der Bediener bedient es): eine App, eine Website, der iOS Simulator	references/record-mac.md
Der Nutzer muss aufnehmen: Windows, ein echtes Telefon, ein Gerät oder Konto, das du nicht bedienen kannst	references/record-elsewhere.md
Der Nutzer gibt dir selbst gemachte Aufnahmen	references/your-footage.md
Eine Szene, die aus einer Aufnahme gebaut ist: das 3D-Kit und die Kamerabewegungen	references/camera.md
Ein Video, das kein Produkt-Launch ist: ein Event, Einstellung, Changelog, Datengeschichte …	references/agendas.md
Komponenten auswählen: Vorlagen, Text, Grafiken, Zeichnungen, Hintergründe, Übergänge	starter/src/library/CATALOG.md
Etwas wird falsch gerendert, oder du schreibst eine neue Komponente	references/gotchas.md

1. Start

<this skill's folder>/new.sh my-video     # prüft Node, kopiert den Starter, installiert alles
cd my-video && npx remotion studio         # optional: der Nutzer kann es auf localhost:3000 durchsehen

new.sh installiert Node mit Homebrew, falls es fehlt, führt npm install aus (das auch die Soundeffekte generiert), lädt das Headless-Chrome herunter, mit dem Remotion rendert, und zeigt an, ob der Bediener installiert ist. Unter Windows in Git Bash ausführen, nach winget install OpenJS.NodeJS.LTS. Für ein bestehendes Remotion 4.0.320+ Projekt kopiere src/kit.tsx, src/look.tsx, src/parts.tsx, src/sequence.tsx, src/backdrop.tsx und src/library/.

Datei	Was ist drin
src/brand.ts	Das Produkt: Name, URL, Logo (in public/), Akzent- und Alarmfarben, sein Stil, seine Schriftarten, falls es eigene hat
src/look.tsx	Die 8 Stile und 4 Formate, und useLook(), über das jeder Teil sie liest
src/Video.tsx, src/Promo.tsx	Ein Video: seine Szenen in Reihenfolge mit ihren Längen, und die Sound-Cues
src/scenes/	Die szenenbasierten Szenen. takes.ts sagt, wo die Dinge in den Takes sind
src/library/	Die Komponentenbibliothek, ein Ordner pro Element; CATALOG.md listet sie mit ihren Props
src/sequence.tsx, src/backdrop.tsx	Scenes verbindet die Szenen mit Übergängen; Backdrop zeichnet die Seite des Stils
src/parts.tsx	Was über einen Shot geht: Caption, Tap, Callout, Speed, Pop
src/kit.tsx	Das 3D-Kit und die Kamerabewegungen (references/camera.md)
public/takes/	Die Aufnahmen. Ersetze sie durch die eigenen des Nutzers
scripts/	take.sh zeichnet einen Take auf, scan.mjs (npm run scan) liest Aufnahmen, sfx.mjs und music.mjs machen Sound, voice.mjs einen Voiceover, library.mjs baut den Katalog neu, check.mjs (npm run check) misst einen Render, web.mjs (npm run web) erstellt die Upload-Kopie

Remotion ist kostenlos für Einzelpersonen und Unternehmen mit bis zu 3 Personen; größere Unternehmen benötigen eine Unternehmenslizenz (remotion.pro). Informiere den Nutzer einmal, falls dies zutrifft.

2. Plan

Lies zuerst die Website des Produkts, dann kläre diese Punkte mit dem Nutzer, frage nur, was du nicht ableiten kannst:

• Wo es abgespielt wird, was die Formate und die Länge bestimmt. Rendere jedes benötigte Format; gestalte für das Hauptformat und überprüfe die anderen.

  Format	Komposition	Größe	Für	Länge
  landscape	Video	1920×1080	YouTube, X, LinkedIn, eine Website, ein Vortrag	Launch 45–90 s
  vertical	Vertical	1080×1920	Reels, TikTok, YouTube Shorts, Stories	15–35 s
  square	Square	1080×1080	Feeds auf X, LinkedIn, Instagram	15–45 s
  portrait	Portrait	1080×1350	Instagram- und LinkedIn-Feeds (4:5)	15–45 s

  Feeds werden stumm abgespielt: Die Worte tragen die Geschichte, und die ersten 2 s müssen allein fesseln.

• Der Stil. Rendere einen Frame in jedem Stil (npm run styles, füge --props='{"frame":420,"format":"vertical"}' für einen anderen Frame oder ein anderes Format hinzu), zeige sie dem Nutzer und setze brand.style. Schlage einen aus der Marke vor: ein dunkles Entwickler-Tool → midnight oder terminal, eine Consumer-App → soft oder bold, ein Premium- oder ruhiges Produkt → editorial oder swiss, ein Teaser → cinema, ein kreatives oder handwerkliches Produkt → paper.

  Stil	Der Look
  editorial	Helles Papier, eine Serifen-Überschrift mit einer kursiven Akzentphrase, harte Schnitte. Ruhig und teuer: das Termary-Video
  midnight	Fast schwarz mit dem Akzent glühend, eine enge serifenlose Schrift, Wörter verschwimmen im Fokus, Zoom-Übergänge
  bold	Der Akzent als Seite, riesige schwere Schrift, die Akzentphrase aus einem Block ausgestanzt, federnde Pops, Rutscher
  swiss	Gebrochenes Weiß, schwarze Schrift in einem Spaltenraster, der Akzent sparsam verwendet, quadratische Karten, harte Wipes
  soft	Ein Pastellton des Akzents, abgerundete Schrift, die Akzentphrase auf einer Pille, hüpfende Pops, runde Enthüllungen
  terminal	Mono alles, Überschriften mit Cursor getippt, Scanlines, Glitch-Schnitte
  cinema	Ein Trailer: fast schwarz, eine große ruhige Serife, Filmkorn, langsame Überblendungen in Schwarz
  paper	Zeichnen mit Code: Papierkarten auf einer sanften lavendelfarbenen Seite, eine helle Serife mit einem fetten Akzent, Kartenflips

• Der eine Satz, den der Zuschauer sich merken soll, der echte Moment im Produkt, der ihn beweist, und die Aufforderung für die Endkarte (eine URL, ein Download, eine Warteliste).

• Wo das Filmmaterial herkommt. Ein Produkt mit einer Benutzeroberfläche bekommt echtes Filmmaterial, das jedes Mock übertrifft: Du nimmst es auf, der Nutzer nimmt es auf, oder der Nutzer hat es bereits (die obige Tabelle sagt, was zu lesen ist). Ohne Zugang zum Produkt, oder für einen Teaser oder Erklärfilm, baue es aus der Bibliothek.

Dann schreibe die Szenen in Reihenfolge: das Problem (der Aufhänger, nie das Logo), das Produkt (das Logo auf einem Beat), der Beweis (der echte Moment, oder Funktionen, eine Kennzahl, ein Vorher/Nachher), die Aufforderung (die Endkarte). Andere Agenden behalten die Form mit ihrer eigenen Mitte (references/agendas.md). Maximal 7 Wörter gleichzeitig auf dem Bildschirm, gehalten 1 s + 0,3 s pro Wort. Setze die Zusammenfassung in einen Kommentar am Anfang von Video.tsx.

3. Filmmaterial

Wie auch immer es kommt, die gleichen Dinge machen es brauchbar: Halte (4–5 s eines Zustands vor und nach jeder Aktion: Aufnahmen werden daraus geschnitten), das echte Produkt (niemals die Dummy-Ergebnisse eines Demomodus, niemals private Daten) und Zeiten, die du davon abgelesen hast. npm run scan liest jede Aufnahme: ihre Halte, ihre Änderungen und ihren Ton, mit einem Bogen ihrer Frames, damit du aus Filmmaterial planen kannst, das dir niemand beschrieben hat. Diese Zeiten sind die at-Werte, die Skizzen abspielen.

4. Szenen bauen

Eine Szene ist eine Komponente, die den Rahmen füllt. SCENES in Video.tsx (oder Promo.tsx) listet sie mit ihren Längen; der Stil-Übergang verbindet sie, und eine Szene kann ihren eigenen benennen (transition: 'iris', den, der in sie führt). Ein Whoosh spielt unter jedem Übergang, der den gesamten Rahmen bewegt (ein Rutscher, eine Peitsche, ein Zoom).

Die Bibliothek (src/library/) enthält jedes fertige Stück, ein Ordner pro Element: Vorlagen (ganze Szenen), Texteffekte, Grafiken, Zeichnungen, Sprachteile, Hintergründe und Übergänge. Lies src/library/CATALOG.md bevor du baust: die Zusammenfassung jedes Elements, eine Verwendungszeile, die wie geschrieben funktioniert, und seine Props. Importiere aus der Bibliothek (import {Stat, Statement} from './library'). Jedes Element liest den Stil durch useLook(), nimmt start (den Frame, an dem es beginnt, ab dem Beginn seiner Szene) und, wo es gehen kann, exit. npm run gallery rendert die Beispielausgabe jedes Elements, beschriftet mit seinem Code (--props='{"only":"graphics","style":"bold","format":"vertical"}' schränkt ein).

Eine Vorlage ist eine ganze Szene, also kommt sie direkt in SCENES:

{name: 'Features', seconds: 4.5, component: () => (
  <Features title="Alles in" accent="einem Fenster." items={[{icon: Columns3, title: 'Geteilte Fenster', text: '…'}]} />
)},

Eine Szene aus einer Aufnahme schwebt das Fenster, den Bereich oder das Telefon in 3D unter einer Caption, wobei die Kamera sich darüber bewegt: references/camera.md.

Die Bibliothek gut nutzen.

• Metric, Stat und Quote verwenden nur echte Zahlen und echte Zitate, mit Erlaubnis.
• Zeichnungen färben sich in Richtung der Markenfarbe: für ein handwerkliches, menschliches Gefühl und in paper.
• Sprache: npm run voice -- skript.txt name spricht ein Skript mit den integrierten Stimmen des Macs oder Windows (oder verwende aufgenommene WAVs) in public/voice/name/ und src/voice/name.ts. Voiceover spielt es ab, voiceTiming/voiceEnd timen Szenen darauf, und Captions und Waveform folgen ihm. Feeds spielen stumm: Ein erzähltes Video braucht trotzdem seine Untertitel. Integrierte Stimmen sind für Entwürfe; für ein veröffentlichtes Video nimm eine Person auf oder verwende eine Stimme, für die der Nutzer die Rechte hat.
• Übergänge, die der Katalog als WebGL-Shader bezeichnet, sind nur Akzente: Überprüfe jeden Frame des endgültigen Renders um einen herum.
• Gib zurück, was ein Video erfindet. Ein Layout, ein Chip oder eine Bewegung, die ein anderes Video verwenden könnte, wird zu einem Element in der Bibliothek des Projekts (ein Ordner mit der Komponente, ihrem Beispiel in <Name>.demo.tsx und item.json, dann npm run library), und biete dem Nutzer an, es auch zu Dollys eigener Bibliothek hinzuzufügen.

Mehrere Marken in einem Projekt (Varianten für Kunden oder ein Video pro Produkt): <LookProvider style="soft" brand={{name, url, logo, accent}}> setzt sie für alles darin, und useBrand() liest die Marke.

Jedes Format. Szenen lesen den Rahmen von useLook(): look.safe (Einsätze, die Plattformen mit eigenen Schaltflächen abdecken: Text innen lassen), look.band (das Caption-Band oben), look.aim (an focusOn übergeben), look.size (die Überschriftsgröße), look.tall und byShape(look, {wide, tall, square}) um ein Layout auszuwählen.

5. Geschmack

Was es in jedem Stil teuer aussehen lässt:

• Der eigene Look des Produkts. Sein Akzent, seine Schriftarten (brand.fonts), sein Logo, ein Stil, der dazu passt.
• Eine Überschrift auf jedem Shot, im Band oben, die Akzentphrase auf die Art des Stils gesetzt.
• Echte Dinge, nah geschnitten. Ganze Fenster, einzelne Bereiche als schwebende Karten, das Telefon neben dem Mac. Eine Szene besteht oft aus zwei oder drei Schnitten, und die Caption ändert sich mit dem Schnitt. Beschneide eng um das, worauf ein Push-In geht.
• Zeige die Eingabe. Tap wo etwas angetippt wird, Callout oder Spotlight um das, was wichtig ist, ein Cursor über einer Vorlage, ein Speed-Chip immer wenn Filmmaterial beschleunigt ist.
• Sound bei jeder Wendung und wenig sonst. public/sfx/ting.wav bei jedem Moment, an dem die Geschichte eine Wendung nimmt, auf dem Frame, an dem es lesbar wird (nicht nach dem Taktstrich); click.wav bei einem Tippen; whoosh.wav nur unter Bewegungen des gesamten Rahmens (das Video spielt einen unter einem Übergang, der reist: slide, whip, zoom, flip, höchstens einen alle 8 s), etwa zwei pro Video. Halte Effekte auf etwa 5 pro 10 s und lass die Musik die anderen Schnitte tragen: den lizenzierten Track des Nutzers oder npm run music -- <Sekunden>.
• Vermeide die Anzeichen von generiertem Design: Farbverlaufstext, Lila-zu-Blau-Verläufe, Cyan auf Dunkel, jede Karte gleich, ein Effekt auf jedem Wort, fünf Übergänge in einem Video. Ein Effekt pro Idee, ein Übergangsstil pro Video (plus ein Akzent), zuerst die Standardeinstellungen des Stils.

Bewegungsregeln. Überprüfe jeden Shot gegen sie.

1. Bewege die Kamera, nicht die Objekte. Ein Kamerapfad pro Shot; Tiefe gibt den Parallax-Effekt.
2. Eine Bewegung pro Shot, mit einem Grund: enthüllen, folgen oder auf das hinschieben, was wichtig ist.
3. Flach zum Lesen. Während Text zu lesen ist, zeigt er zur Kamera und bewegt sich langsam.
4. Alles weich machen. Ankommen mit ease.out, gehen mit ease.in (schneller), ease.inOut zwischen Halten. Überschwang nur, wo der Stil hüpfend ist, oder bei einem Logo.
5. Nie tot anhalten. Gib jedem Shot eine langsame Drift (useShots zweites Argument).
6. Lange genug halten, um zu lesen, dann schneiden. Im Zweifel länger halten und die nächste Szene verkürzen.
7. Auf den Beat schneiden (0,5 s bei 120 BPM) und die Bewegungsrichtung über den Schnitt beibehalten: eine Szene verlässt in der Richtung, in der die nächste ankommt.
8. Zurückhaltung. Das Produkt ist der Star: höchstens eine auffällige Bewegung oder ein Effekt pro 10 s.

Die Zahlen, die Top-Launch-Videos erreichen (Bild für Bild gemessen): Das Bild bewegt sich innerhalb von 0,1 s und das erste Wort ist nach 0,4 s lesbar; das Produkt ist nach einem Viertel der Zeit auf dem Bildschirm; etwas ändert sich etwa alle 0,7 s, sogar innerhalb eines langen Shots; Text, der gelesen wird, bewegt sich unter etwa 3 Pixeln pro Frame; ein gestalteter Halt von 1–1,6 s auf der Kernaussage, keine andere Ruhe über 0,8 s; der größte Moment bei etwa 80 % der Laufzeit, dann eine ruhige Endkarte von etwa 2 s.

references/gotchas.md enthält die Fallen: was 3D abflacht, was die Bild-für-Bild-Wiedergabe unterbricht, die Grenzen des gebündelten ffmpeg.

6. Überprüfen

npx remotion still Sheet out/sheet.png                                          # das Video, 1 Frame/s
npx remotion still Sheet out/focus.png --props='{"scene":"NeedsYou","every":6}' # eine Szene, 5 Frames/s
npx remotion still Sheet out/v.png --props='{"format":"vertical","guides":true}' # ein weiteres Format, mit eingezeichnetem Sicherheitsbereich
npx remotion still Vertical out/f140.png --frame=140                            # ein Frame, volle Größe
npm run styles && npm run formats                                               # ein Frame in jedem Stil / Format

Lies jedes PNG. Überprüfe, dass:

• die ersten 2 s ohne Ton und ohne Kontext Sinn ergeben;
• alles Lesbare im rechten Winkel zur Kamera steht und gehalten wird (mehrere fast identische Zellen hintereinander);
• Text innerhalb des gestrichelten Sicherheitsbereichs in jedem Format liegt und das Motiv zwischen den gepunkteten Linien;
• nichts Wichtiges vom Rahmen abgeschnitten, hinter einer näheren Ebene versteckt oder unter einer Caption verdeckt wird;
• kein Frame leer oder gespiegelt ist (die Kamera in oder hinter etwas);
• benachbarte Zelle …

[gekürzt zur Übersetzung]