Skill: Motion Video 3D (Remotion + Three.js + PiP)

Wann verwenden

„Mach ein 3D-Video mit meinem sprechenden Video in der Ecke“
„TikTok-kinematografisches Video zu [Thema]“
„Video mit 3D-Hintergrund und animierten Untertiteln“
„Video mit [meinem Audio/meinem Video], in dem X gesagt wird“

Philosophie (GOLDENE REGEL)

Das Video muss KREATIV und KONTEXTBEZOGEN zum Thema sein. Es reicht nicht, generisches 3D zu haben. Jeder Satz des Skripts muss ein einzigartiges visuelles Element inspirieren, das das Konzept übersetzt. Beispiel:

Satz „8 Minuten und 20 Sekunden“ → digitaler Kilometerzähler, der bis 8:20 läuft
Satz „300.000 km/s“ → HUD-Tacho aus der Science-Fiction mit Zeiger
Satz „ein Flugzeug würde 3 Runden drehen“ → Flugzeug, das die Erde umkreist, mit Spur
Satz „Licht reist von der Sonne zur Erde“ → Photon mit Lens Flare, das reist

Der Benutzer erwartet dieses Maß an kontextueller Kreativität. NIEMALS nur statischen Text mit Fade-In machen.

Voraussetzungen (vor Beginn prüfen)

Node.js + npm installiert
FFmpeg installiert (brew install ffmpeg)
Whisper-cpp installiert (brew install whisper-cpp) — für die Wortsynchronisation
FREESOUND_API_KEY in ~/.zshrc (API für SFX zwingend erforderlich)
Sprechervideo/-audio in public/eu.mp4 oder public/audio/*.mp3

Wenn etwas fehlt, ANHALTEN und den Benutzer informieren.

1. Projektstruktur

~/Documents/[projektname]/ ├── public/ │ ├── eu.mp4 # Sprechervideo (falls PiP vorhanden) │ ├── audio/*.mp3 # reines Audio (falls kein Video vorhanden) │ ├── images/[thema]/ # heruntergeladene Bilder (mit credits.json) │ └── sfx/ # von Freesound heruntergeladene SFX ├── src/ │ ├── three/ # 3D-Szene (Three.js) │ ├── components/ # Untertitel, HUDs, Überlagerungen │ ├── timeline.json # ALLE Timings (Quelle der Wahrheit) │ └── Root.tsx ├── scripts/ │ ├── align-words.py # Whisper → Wort-Zeitstempel │ ├── gen-sfx.mjs # lokale Synthese (Pads, Drones) │ ├── fetch-freesound.mjs # OBLIGATORISCH: lädt SFX von der API herunter │ ├── finalize.sh # -14 LUFS + faststart │ └── contact-sheet.sh # Kontaktblatt mit sicheren Zonen ├── out/ │ ├── final_[thema].mp4 │ ├── thumbnail.png # Cover 1080×1920 │ └── contact_sheet.png └── timeline.json

2. Obligatorischer Workflow (in Reihenfolge)

Phase 0: Briefing

Mit dem Benutzer bestätigen:

Thema des Videos
Tatsächliche Dauer des Audios (niemals die Pointe abschneiden)
Farbpalette (Standard: tiefes Schwarz + Akzentfarbe passend zum Thema)
Stil des 3D-Hintergrunds (siehe Abschnitt 3)
PiP (falls Video vorhanden): Position unten rechts, x ≤ 940
Untertitel: kinetisch (siehe Abschnitt 5)

Phase 1: Setup + Whisper

Remotion + @remotion/three + @react-three/fiber + three initialisieren/überprüfen
scripts/align-words.py ausführen, um das Audio zu transkribieren
timeline.json mit EXAKTEN Zeitangaben für jedes Wort erstellen
ANHALTEN UND AUF GENEHMIGUNG WARTEN, bevor Szenen codiert werden

Phase 2: Thematischer 3D-Hintergrund (siehe Abschnitt 3)

Phase 3: PiP (falls vorhanden) + Untertitel + HUDs (siehe Abschnitte 4 und 5)

Phase 4: SFX über Freesound (siehe Abschnitt 6) — OBLIGATORISCH

Phase 5: Rendern + Mischen + Kontaktblatt + Vorschaubild

3. Dynamischer 3D-Hintergrund (KREATIVITÄT OBLIGATORISCH)

Regel: Der Hintergrund darf NICHT statisch sein. Er muss kontinuierliche Bewegung und schwebende Elemente aufweisen. Verwende das Thema, um den Stil zu bestimmen:

Thema	3D-Hintergrund
Weltraum / Universum	3 Sternschichten mit Parallaxe, dezenter Nebel, Planeten am Horizont
Programmierung / Tech	Schwebende Code-Matrix, „Bit“-Partikel, Drahtgitter-Schaltkreise, animiertes Gitter
iPhone / Minimalistisch	Schwebende Staubpartikel (langsam, unterschiedliche Größen), weiches volumetrisches Licht, Stranger-Things-Upside-Down-Stil
Natur	Schwebende organische Blätter/Partikel, gefiltertes Sonnenlicht, Tiefe mit Parallaxe
Stadt / Urban	Entfernte Neonlichter, Regenpartikel, Skyline mit Parallaxe
Wissenschaft / Labor	Schwebende Moleküle, Drahtgitter-Reagenzgläser, leuchtende Partikel

Immer enthalten:

Parallaxe (mindestens 3 Ebenen mit unterschiedlichen Geschwindigkeiten)
Kamerabewegung (dezenter Drift über das gesamte Video)
Volumetrische Beleuchtung (weiches Licht, nicht flach)
Nachbearbeitung (Bloom, dezente Vignette)
Farben passend zum Thema (keine generische Palette verwenden)

4. PiP (Talking-Head) — falls Video vorhanden

<OffthreadVideo> von Remotion verwenden
Exaktes Seitenverhältnis (Gesicht nicht verzerren)
Position: unten rechts, ABER Sicherheitszone beachten (x ≤ 940)
Stil: abgerundete Ecken 24px, weicher Schatten, dünner Rand
Niemals Farben, Hintergrund, Seitenverhältnis oder Audio des Originalvideos ändern
Skalieren nur in Payoff-Momenten (z. B. 1,12x)
Wenn nur Audio: einen „Audio Visualizer HUD“ hinzufügen, der mit der Stimme pulsiert, anstelle des PiP

5. Untertitel (KINETISCH + ohne „Rechteck“)

Animationsregeln:

Wort für Wort (nicht Satz für Satz) — jedes Wort im exakten Frame des Sprechens
Ease-Out mit Overshoot (~0,15s pro Wort)
Schlüsselwörter: weißer Blitz + Einfärben in Akzentfarbe + Glühen + kurzes Skalieren
Vorab angeordnete Zeilen (Wörter nicht „springen“ lassen)

⚠️ KRITISCHE REGEL: KEINE RECHTECKE

KEINE solide Hintergrundfarbe hinter dem Text verwenden. Für Lesbarkeit NUR verwenden:

text-shadow: 4px 4px 8px rgba(0,0,0,0.9)
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.8))
Optional: radialer Gradient ≤ 15 % Deckkraft hinter einzelnen Wörtern
NIEMALS: <div style="background: rgba(0,0,0,0.7)"> um den Satz herum

Der Text sollte über dem Hintergrund schweben, nicht wie eine Karte aussehen.

Positionierung:

Horizontal zentriert
Y zwischen 1400-1550
Mindestgröße: 72px (auf dem Handy lesbar)

6. SFX über Freesound API (OBLIGATORISCH)

Der Benutzer verlangt, dass die Sounds über die Freesound API heruntergeladen werden. Verwende nicht nur lokale Synthese.

Ablauf:

FREESOUND_API_KEY in ~/.zshrc überprüfen
scripts/fetch-freesound.mjs erstellen/verwenden, um zu suchen und herunterzuladen
Mindestkarte der SFX (an das Thema anpassen):

Moment	Typ	Query bei Freesound
Eröffnung	sanfter digitaler Boot	„soft digital boot“
Text-Impacts	kinematischer Hit	„cinematic impact hit“
Zähler	Clock Tick	„digital counter tick“
Tacho	Tachogeräusch	„engine whine pitch up“
Fliegendes Objekt	Jet Whoosh	„jet flyby whoosh“
3D-Enthüllung	anschwellender Anstieg	„cinematic riser“
Ankunft / Höhepunkt	Boom + Chime	„cinematic boom chime“
Finaler CTA	sanftes Chime	„soft notification chime“

Zuerst nach CC0 filtern; Fallback CC-BY (in public/sfx/CREDITS.json vermerken)
In public/sfx/ speichern
Nur kontinuierliche Sounds (Space Pad, Drohne, langer Riser) LOKAL synthetisieren über scripts/gen-sfx.mjs

Mischung:

Sprache: NIEMALS bearbeiten (nur +Gain, um -14 LUFS zu erreichen, mit Limiter -1 dBTP)
SFX: Ducking -3dB (Whooshes), -8dB (Booms) — bedeutet, SFX unter der Sprache absenken, nicht die Sprache
Space Pad: -24dB kontinuierlich, Fade-In 1s, Fade-Out 2s
Endlautstärke: -14 LUFS, maximaler Peak -1 dBTP

7. TikTok-Sicherheitszonen (OBLIGATORISCH)

Leinwand: 1080×1920, 60fps
Sicherer Bereich: x ∈ [60, 1020], y ∈ [120, 1670]
Aktionsleiste (rechts): nicht in x > 960 eindringen
Obere Leiste: y < 120
Unten (Untertitel): y > 1670
PiP: niemals x > 940 überlappen
Immer mit Kontaktblatt und Überlagerung der Sicherheitszonen validieren

8. Abschließende Checkliste

9. Umgang mit macOS-Sperren (Sandbox)

Wenn Claude Code den Zugriff auf den Ordner aufgrund von „Operation not permitted“ verliert:

Alle Dateien im Scratchpad vorbereiten
Ein einzelnes Skript finish-v2.sh generieren, das installiert und rendert
Der Benutzer führt es manuell im Terminal aus
Claude Code liest dann die ffprobe-Ausgabe, die der Benutzer zurückkopiert

Immer manuellen Fallback am Ende einfügen.

10. Über Bildlizenzen (falls Download)

BEVORZUGEN von Wikimedia Commons (CC0/CC-BY/CC-BY-SA) — immer Lizenz prüfen
BEVORZUGEN von offiziellen Apple-/Unternehmensseiten (redaktionelle Fair Use)
VERMEIDEN von zufälligen Websites / Pinterest / Stock
credits.json speichern mit {filename, source_url, author, license}
LICENSE_CHECK.md vor dem Herunterladen erstellen und jede Lizenz prüfen
Wenn keine klare Lizenz vorhanden, prozedurale Alternative mit Three.js generieren

Zusammenfassung: Diese Fähigkeit verwandelt jedes Skript in ein TikTok-kinematografisches Video mit thematischem 3D, Kinetic Typography, kreativen HUDs, PiP (optional) und professionellem Sounddesign über Freesound. Kontextuelle Kreativität ist OBLIGATORISCH — jeder Satz des Skripts muss ein einzigartiges visuelles Element inspirieren.

igoharaujo/remotion-sun-video

Was ist remotion-sun-video?

In Ihrer bevorzugten KI fragen

Dokumentation