Haseeburrahmann/3D-Animator

Was macht 3D-Animator?

Ein einfacher Prompt liefert ein Objekt, das mitten in einer grauen Leere rotiert: eine statische Kamera, flaches Licht, lineare Bewegung und kein Ton. Ein Animator denkt an vier Dinge, bevor er Code schreibt: Kamera, Licht, Bewegung und Ton. Dieser Skill bringt dich dazu, so zu denken und dann jeden Frame in Code zu schreiben.

Die Regeln stammen aus einer Produktionspipeline von WhatsNext AI (@whats.nextai), abgestimmt auf gemessene Top-Performer-Reels:

• unter 10 % statische Frames;
• etwa 0,7 harte Schnitte pro 10 s;
• Musik etwa 9 dB unter der Stimme.

0. Vor dem Code: Regie führen

Schreibe zuerst eine Shot-Liste. Jeder Beat bekommt eine Zeile:

beat | seconds | subject | CAMERA move | LIGHT change | MOTION event | SOUND cue

Regeln für die Shot-Liste:

• Frame 1 zeigt das Motiv. Nicht aus Schwarz einblenden, kein Logo, keine leere Bühne zu Beginn.
• Ändere etwa alle 1,5 s etwas Sichtbares: eine Kamerabewegung, eine Enthüllung oder einen Lichtwechsel.
• Jeder Beat ändert eine Sache: den Maßstab (Weit ↔ Makro), den Winkel, das Licht oder den Zustand des Objekts. Niemals alles auf einmal.
• Stelle dasselbe Objekt um, anstatt in unzusammenhängende Szenen zu schneiden. Der Schluss-Shot sollte sich auf den Eröffnungs-Shot reimen.
• Kein Motiv? Wähle eines mit einem versteckten Inneren, damit die Kamera einen Weg hat: eine Uhr, ein Telefon, ein Motor, ein Stadtblock, ein Kabel. Plane einen Cutaway oder eine Enthüllung.

1. Kamera (references/camera.md)

• Die Kamera ruht nie. Füge zu jedem Shot eine langsame Orbit- und Wackelbewegung aus zwei inkommensurablen Sinuswellen hinzu, damit kein Frame statisch ist. Startwerte: etwa 0,17 rad × sin(0,8t) + 0,09 rad × sin(1,9t + 0,7).
• Bewege zwischen Key-Kameras mit Ease-in-out (kubisch). Verwende niemals lineare Bewegungen und rucke nie.
• Dolly, nicht Zoomen. Bewege die Kameraposition und halte das Sichtfeld zwischen 30° und 40° für Objekte. Weitwinkel verzerrt Produkte.
• Push-in bei Enthüllungen. Pull-back für Kontext. Eine Bewegung pro Beat.
• Wenige harte Schnitte: etwa 0,7 pro 10 s. Bewegung kommt von der Kamera, nicht vom Schneiden.
• Vertikales 9:16-Framing:
  • Halte das Motiv in den mittleren 60 % der Bildhöhe.
  • Die oberen 15 % sind für einen Titel.
  • Die unteren 25 % sind für Untertitel und App-UI.
  • Halte die rechten 150 px auf Instagram und TikTok frei.
• Tiefe: platziere etwas im Vordergrund, das Motiv in der Mitte und einen weichen Hintergrund dahinter. Füge schwebende Staubpartikel in der Nähe des Blickpunkts hinzu, damit selbst eine langsame Bewegung als Bewegung erkennbar ist.

2. Licht (references/light.md)

• Dunkler Hintergrund, eine Akzentfarbe, ein Motiv. Zum Beispiel eine marineblaue #0B0F18-Szene mit einem orangefarbenen #FF914D-Akzent für „Informationen".
• Lichtaufbau:
  • Eine hemisphärische Füllung: Himmel #A9BDE0, Boden #0B0F18, Intensität etwa 0,8.
  • Ein kühles, gerichtetes Key-Licht von oben links: Intensität etwa 1,5, mit Schatten.
  • Ein warmes Punktlicht auf einer Seite und ein kühles Punktlicht auf der anderen, damit sich die Kanten vom Hintergrund abheben.
• Reflexionen: verwende eine Umgebungsmap (RoomEnvironment via PMREMGenerator) mit einer Intensität von 0,2–0,6. Ohne sie sehen Metall und Glas wie Plastik aus.
• Bloom nur gezielt:
  • Verwende UnrealBloomPass mit einem Schwellwert von 0,9 oder mehr, Stärke etwa 0,4 und Radius etwa 0,4.
  • Dinge, die leuchten sollen, verwenden emissive, und nichts anderes leuchtet.
  • Die Überbelichtungsfalle: reine weiße Materialien plus Bloom verwaschen das Bild. Verwende hellgrau (#C9CFD9) für „weiße" Kunststoffe.
• Verwende Nebel (<fog args={[bg, near, far]}/>), damit die Entfernung in die Hintergrundfarbe übergeht.
• Lichtwechsel sind Story-Beats: ein Teil leuchtet auf, wenn es genannt wird, der Raum verdunkelt sich für eine Enthüllung, ein Blitz trifft auf den Höhepunkt.

3. Bewegung (references/motion.md)

• Jede Animation ist eine reine Funktion des Frames: t = frame / fps.
  • Verwende niemals Date.now() oder Math.random(). Verwende random(seed) von Remotion.
  • Animiere niemals mit useFrame.
• Pops verwenden Federn (Dämpfung 12–14, Steifigkeit etwa 170). Bewegungen verwenden kubischen Ease-in-out. Linear nur für konstante Dinge wie Förderbänder und Partikeldrift.
• Staffel verwandte Elemente um 3–5 Frames. Bewege nie zehn Dinge im selben Frame.
• Füge sekundäre Bewegung hinzu: eine langsame Drehteller-Drehung des Heldenobjekts (±0,4 rad), driftende Partikel, eine atmende Skalierung (±1 %).
• Pausen sind eine Wahl. Ein Einfrieren von bis zu 2 s ist in Ordnung, wenn es ein bewusster dramatischer Beat ist. Ansonsten bewegt sich immer etwas.
• Labels: kurze, großgeschriebene Statuslabels erscheinen mit einem Pop auf dem Beat, den sie benennen. Markiere Nachbildungen als „3D RECREATION".

4. Ton (references/sound.md)

• Ein SFX pro Event:
  • ein Whoosh bei einer großen Kamerabewegung;
  • ein Hit bei einer Enthüllung;
  • ein Riser (etwa 2 s) vor einer Enthüllung;
  • ein Klick oder Pop bei Labels.
  • Synthetisiere sie (scripts/sfx_synth.py) oder verwende CC0-Pakete.
• Die Musik liegt 6–11 dB unter der Stimme, etwa 9 dB als Ziel. Seitenkettenducke sie unter die Erzählung.
• Stille ist ein Effekt. Setze die Musik für einen Beat vor der Schlüsselzeile aus, dann knall sie mit einem Hit wieder herein.
• Master auf −14 LUFS integriert, mit True Peak bei oder unter −1,5 dBTP. Pad den Voice-Key auf die volle Länge, damit der Musikausklang nicht abgeschnitten wird.

5. Code-Regeln (Remotion + three.js)

• Canvas: umschließe 3D mit <ThreeCanvas width={width} height={height}> von @remotion/three und füge immer Lichter hinzu.
• Sequences: jedes <Sequence> innerhalb des Canvas benötigt layout="none".
• Post-Processing: ein EffectComposer kann das Rendering mit einem useFrame(() => composer.render(), 1) mit Priorität 1 übernehmen. Das ist die einzige erlaubte Verwendung, weil Remotion die Szene einmal pro Frame weiterschaltet, sodass die Ausgabe deterministisch bleibt. Siehe templates/Fx3D.tsx.
• Zustand: steuere die Szene über eine einzige Zustandsfunktion worldAt(t), die Kamera, Bühne und Flags zurückgibt. Halte die Komponenten dumm.
• Rendering: rendere mit --gl=angle auf macOS, wenn die WebGL-Ausgabe schwarz oder instabil ist. Verwende H.264, yuv420p, 1080×1920, 30 fps.

Fertige Bausteine (kopieren, nicht importieren):

• templates/Fx3D.tsx: Umgebungsreflexionen und Bloom.
• templates/camera.ts: easeCam, orbit, ramp, pop.
• templates/Motes.tsx: deterministische Staubpartikel.

6. Wie ein Editor prüfen

1. Rendere 4–6 Standbilder: den Hook, jede Enthüllung und den letzten Frame. Achte auf Überbelichtung, das vom Untertitel oder Titel abgeschnittene Motiv, leere Frames und unleserlichen Text.
2. Rendere das Video und führe dann scripts/check_motion.sh out.mp4 aus. Ziel: unter 10 % statische Frames, Bewegung (YDIF) bei etwa 2 oder mehr und etwa 0,7 harte Schnitte pro 10 s. Wenn es statisch ist, vergrößere den Orbit oder das Wackeln, füge Partikel hinzu oder füge einen Push-in hinzu. Füge keine Schnitte hinzu.
3. Wenn es Audio gibt, überprüfe die Lautstärke (−14 LUFS) und dass die Musik etwa 9 dB unter der Stimme liegt.
4. Rendere nur das fehlgeschlagene neu.

Fertig bedeutet: eine Shot-Liste existiert, jeder Beat hat eine Kamerabewegung, eine Lichtrolle, ein Motion-Event und einen Sound-Cue, die Checks bestehen und du hast dir die Standbilder angesehen.