reels-motion

Was macht reels-motion?

Erstelle ein vertikales Reel (1080×1920, 30 fps, ~40–50 s) im Stil "Terminal Pop": dunkler Hintergrund mit Raster, eine einzelne Akzentfarbe, großer Text Wort für Wort mit einem Schlüsselwort in einer farbigen Box, ein Pixel-Maskottchen, das eine Aktion ausführt, ein Zähler 01 / 04 und ein Call-to-Action mit dem Schlüsselwort am Ende.

Dateien dieser Skill (relative Pfade zu diesem Ordner):

• references/motion_system.md: Palette, Typografie, Bewegung, Übergänge, Komposition und Rhythmus. Lies diese Datei vor dem Entwurf.
• template/: Vollständiges und funktionierendes Remotion-Projekt (das Reel "Cartuchos" über das Wesen einer Skill). Verwende dies als Grundlage; starte nicht von Null.
• template/README.md: Projektstruktur, Befehle und Anpassungen.

Ablauf

1. Auftrag verstehen

Frage nur, was fehlt: Thema, Zielgruppe, @ des Kontos, Schlüsselwort des CTA und was bei Kommentar geliefert wird, ob es ein Voice-Over gibt (und welche ElevenLabs-Stimme) und die ungefähre Dauer.

2. Skript und Storyboard (zeigen und vor der Animation OK einholen)

• Struktur: Hook (≤ 2 s) → 4 Abschnitte mit HUD 01–04 → CTA (~4 s).
• Hook: 3 Textblöcke, der letzte mit dem Schlüsselwort in einer Box und einer Aktion des Maskottchens in diesem Block.
• Sprachsätze: ≤ 14 Wörter, gesprochen und nicht vom Text auf dem Bildschirm abgelesen. Auf dem Bildschirm ≤ 6 Wörter pro Satz.
• Maskottchen: Jeder Abschnitt benötigt eine Aktion, die das Konzept erklärt (einstecken, wählen, scannen…), keine Dekoration.
• CTA: "Schreib SCHLÜSSELWORT und ich schicke dir X", mit dem Wort in der Akzent-Box.

3. Projekt erstellen

cp -r <pfad-zu-dieser-skill>/template <benutzer-ordner>/<reel-name>
cd <benutzer-ordner>/<reel-name>
npm install

Bitte den Nutzer um einen kurzen Pfad. Unter Windows verhindern lange Pfade (> ~200 Zeichen) das Starten des Chrome, den Remotion zum Rendern verwendet.

4. An das Thema anpassen

• src/config/texts.ts: Alle Bildschirmtexte und BRAND.handle. [wörter] = Akzent-Box.
• src/config/voiceover.ts: Skript nach Szene, aufgeteilt in blocks (jeweils ein Satz).
• src/config/theme.ts: Akzentfarbe und Positionen.
• src/scenes/S2…S5: Sind das Beispiel "Cartuchos". Für ein anderes Thema schreibe die Aktion jedes Abschnitts neu, indem du components/ (Headline, Appear, Bit, Cartridge, Terminal, Pill, CommentBar, Transitions, Sfx) und lib/anim.ts wiederverwendest. Behalte das Muster bei: Jede Phase beginnt mit cue('szene', n, fallback), das den Anfang des Satzes n der Stimme darstellt.
• Bit: Die Matrix MAP in src/components/Bit.tsx (16×16) definiert seine Form; ändere sie, wenn der Account ein anderes Maskottchen hat.

5. Soundeffekte

npm run sfx synthetisiert die .wav-Dateien in public/sfx/. platziere sie mit <Sfx name="…" at={frame} /> unter Verwendung derselben Konstanten wie bei der Animation. Lautstärke und Ein/Aus in src/config/audio.ts.

6. Voice-Over (wähle einen Weg)

• Eigener API-Key: ELEVENLABS_API_KEY in .env, Voice-ID in VOICE.voiceId und npm run voiceover. Generiert ein MP3 pro Szene und schreibt src/config/voiceover.generated.ts mit dem genauen Start jedes Satzes.
• ElevenLabs Connector in Claude: Generiere jede Szene mit dem exakten Text seiner blocks verbunden und lade die MP3s nach public/voiceover/<reel>/ herunter. Der Connector liefert keine Zeitstempel, also:
  1. Dekodiere jedes MP3 zu WAV (npx remotion ffmpeg -i x.mp3 -ac 1 -ar 16000 x.wav).
  2. Miss in Node die Energie in Fenstern von 10 ms und erkenne Pausen von 80 ms oder mehr.
  3. Weise jeden Satz der Pause zu, die seiner erwarteten Position (proportional zu den Zeichen) am nächsten kommt.
  4. Schreibe manuell voiceover.generated.ts mit duration = Ende der Sprache (ohne das letzte Schweigen) und blockStarts.
• Ohne Stimme: Lasse VOICE_TIMINGS = {} und die Szenen verwenden die fallback jedes cue.

7. Rhythmus

Jede Szene dauert so lange wie ihr Satz + 0,2–0,4 s Atempause bis zur nächsten Stimme: SCENES.x ≈ (Ende der Sprache + 0,3 s) × 30. Hook ≤ 2 s. Der CTA lässt ~1,5 s nach der Stimme zum Lesen. Die Stimme wird nie abgeschnitten: Jedes MP3 beginnt mit seiner Szene und sein nachfolgendes Schweigen kann unter der nächsten Szene klingen. Wenn eine Animation zu knapp wird, vereinfache sie; beschleunige sie nicht.

8. Vor der Auslieferung überprüfen

1. npx tsc --noEmit.
2. Rendere Schlüsselbilder (Hook, jeder Abschnitt und CTA) und überprüfe sie: Texte, die gebrochen werden, Überlappungen, Sicherheitszone (120 px oben, 340 px unten, 64 px seitlich) und dass das @ in eine Zeile passt.
3. Mischung: Rendere zwei WAV-Spuren separat (--codec=wav), eine mit sfxEnabled = false und eine mit voiceEnabled = false, und vergleiche ihre Lautstärke alle 0,1 s. Während es Sprache gibt, müssen die Effekte ≥ 10 dB leiser sein; wenn nicht, senke die Verstärkung dieses Effekts in audio.ts. Der ffmpeg von Remotion hat kein volumedetect: Dekodiere zu WAV und messe in Node.
4. Finales Rendern: npx remotion render ReelCartuchos out/<name>.mp4.

9. Vorschaubild und Veröffentlichung

• Vorschaubild: npm run thumbnail (Komposition Miniatura, Frame 29). Der Inhalt muss in den 4:5-Beschnitt passen (und 285–1635).
• Texte: Liefere Beschreibung für TikTok (kurz, CTA, 3–5 Hashtags) und Instagram (Wert in Schritten, CTA, max. 5 Hashtags), Alternativtext und die automatische DM-Nachricht für das Schlüsselwort.

Bekannte Fehler

• Windows, Failed to launch the browser process … ENOENT: Pfad zu lang. Verwende einen kurzen Ordner oder --browser-executable=<kurzer pfad>/chrome-headless-shell.exe.
• Unsichtbare Titel in einem Standbild von Frame 0: Die Einträge beginnen mit Deckkraft 0. Rendere das Vorschaubild bei Frame 29.
• generate-*.ts: Benötigen Node 22.18+ (natives TypeScript).