motion-reel

Was macht motion-reel?

Erzeugt ein MP4-Video mit 1920×1080 Pixeln, 30 fps im redaktionellen Motion-Reel-Stil. Eine fertige Engine befindet sich im Verzeichnis template/. Du kopierst sie, schreibst eine Konfigurationsdatei (src/reel.config.ts), renderst, überprüfst die Einzelbilder und sendest das Video.

Argumente: $ARGUMENTS

1. Anfrage verstehen

Aus den Argumenten und dem Gespräch leitest du Folgendes ab:

• Gegenstand: Welches Produkt oder Feature. Wenn du dich im Codebase des Produkts befindest, lies die echten Texte (i18n-Dateien, Seitenkomponenten, README), sodass das Video zeigt, was das Produkt tatsächlich tut.
• Farben:
  • Ein Palettenname: lime (der Referenz-Look), coral, ocean, sunset, violet, night (dunkel).
  • Oder Hex-Werte, zugeordnet zu accent (Marker, die auffallende Farbe), dann secondary (zweite Markenfarbe), optional paper (Hintergrund) und ink (Text).
  • Nur eine Farbe bedeutet, dass sie als Akzent dient.
  • Hat das Projekt Marken-Tokens (z. B. globals.css), biete diese als secondary an.
  • Nichts angegeben: Verwende lime und teile dies in der abschließenden Nachricht mit.
• Sprache der Texte: Anpassung an den Benutzer (standardmäßig Indonesisch, wenn der Benutzer auf Indonesisch schreibt).
• Ausgabeordner: Der Sitzungs-Scratchpad, es sei denn, der Benutzer nennt einen Ordner. Lege es niemals innerhalb des Produkt-Repositorys ab, es sei denn, der Benutzer bittet darum.

Frage nur nach, wenn der Gegenstand selbst unklar ist. Farben und Dauer haben Standardwerte.

2. Gerüst erstellen

cp -r "<this skill dir>/template" "<out>/reel"
cd "<out>/reel" && npm install && npm run sfx

• npm install dauert etwa 2 Minuten. Führe es im Hintergrund aus, falls es andere Aufgaben zu erledigen gibt.
• Wenn das Produkt ein Logo hat, kopiere es in das Verzeichnis public/ und setze brand.logo auf den Dateinamen. Andernfalls setze brand.initials.

3. src/reel.config.ts schreiben

• Setze theme: makeTheme(presets.coral) oder makeTheme({ accent, secondary, paper, ink }). Jeder andere Token wird automatisch abgeleitet.
• Wähle die Szenen aus. Die Feldliste, Standarddauern und Längenbeschränkungen für Texte stehen in references/config.md; lies sie, bevor du Texte schreibst.
• Empfohlener Ablauf (ca. 45 s): spark → word → tagline → bento → checklist → steps → formula → showcase → stats → kinetic → logo. Lass die Szenen weg, die nicht zum Produkt passen. Ein kurzer Ablauf (ca. 20 s) ist spark → word → tagline → kinetic → logo.
• Fakten: Zeige nur Behauptungen, die das Produkt tatsächlich aufstellt. Erfinde niemals Metriken wie „10.000 Nutzer“ oder „99 % Verfügbarkeit“. Beispielinhalte (Kontonamen, Beispielposts) sollten erfunden und eindeutig allgemein gehalten sein, niemals echte Kundendaten.
• Überschriften: title.sans ist die Aussage und title.serif ist die kursive Pointe. mark ist ein Wort aus dem Serifen-Teil, das mit dem Marker hervorgehoben wird.

4. Überprüfen und rendern

npx tsc --noEmit
npm run render        # → out/reel.mp4, verwendet --port=3917
npm run frames        # → out/frames/sheet*.jpg, ein Bild alle 1,5 s

Lies jedes Kontaktblatt. Achte auf:

• Text, der über eine Karte oder den Rahmen überläuft
• sich überlappende Elemente
• eine leere Szene
• einen Marker am falschen Wort
• geringen Kontrast bei benutzerdefinierten Farben (z. B. heller Akzent auf hellem Papier)

Korrigiere die Konfiguration oder, falls nötig, die Engine, und rendere dann ein weiteres Mal. Wiederhole Renders nicht.

5. Ausliefern

• Sende out/reel.mp4 mit SendUserFile (display: "render").
• Berichte Dauer, Größe, eine einzeilige Zusammenfassung pro Szene, die verwendeten Farben und den Konfigurationspfad für spätere Bearbeitungen.
• Sage deutlich, dass das Audio nicht angehört wurde. Es wurden nur Timing und Pegel überprüft.

Gestaltungsregeln (bei Erweiterung der Engine)

• Palettenrollen: paper Hintergrund, ink Text und dunkle Pillen, accent nur für Hervorhebungen und Live-Zustände (niemals großer Text auf Papier), secondary für Farbblöcke und das Logo-Akzentwort.
• Typografie:
  • Inter Tight 800 für Aussagen.
  • Instrument Serif kursiv für die Pointe.
  • Archivo Black nur für kinetische Wörter.
  • JetBrains Mono 13–20 px mit Buchstabenabstand für Beschriftungen und HUD.
• Bewegung:
  • Expo-out bezier(0.16,1,0.3,1) für Eintritte, in-out bezier(0.65,0,0.35,1) für Bewegungen.
  • Austritte beschleunigen auswärts mit gerichteter Bewegungsunschärfe (Smear).
  • Text steigt aus einer Maske auf (overflow: hidden + translateY).
  • Zahlen rollen mit vertikaler Unschärfe (Roll).
• Übergänge: Unschärfe in/aus, Dunkeltauchgang nach einer Tagline, Zoom-Unschärfe durch, eine sich ausdehnende Akzentkarte vor dem kinetischen Block, und harte Schnitte zwischen kinetischen Wörtern. Kein Wackeln, keine weißen Blitze.
• HUD: Beschriftung oben links, Timecode oben rechts, Bereichsbeschriftung plus Fortschrittsstrich unten links, Auflösung unten rechts, Eckklammern. Sie wechselt zu hellem Text auf dunklen Farbblöcken.
• Jede Szene hält lesbaren Text für mindestens 1,5 s.

Remotion-Fallstricke (auf die harte Tour gelernt)

• Jede Bewegung erfolgt über useCurrentFrame(). CSS-Übergänge und Animationen werden nicht gerendert.
• Port 3000 ist oft von einem Entwicklungsserver belegt. Übergebe immer --port.
• Remotions gebündeltes ffmpeg hat die Filter fps und tile nicht. Einzelbilder mit -ss einzeln holen (scripts/frames.mjs macht das).
• React.useId() enthält Doppelpunkte. Bereinige es, bevor du es in url(#id) verwendest.
• Gerichtete Unschärfe: SVG feGaussianBlur stdDeviation="x y". CSS blur() ist nur gleichmäßig.
• Audio: ein <Sequence from> + <Html5Audio> pro Cue, mit durationInFrames auf die Clip-Länge gesetzt.
• color-mix() und clip-path: circle() funktionieren in Remotions Chrome.