youtube/remotion

Remotion – Szenen aus Figuren-Grafiken

Animiert die freigestellten Figuren (Pino, Noa, Lulu) per Code, ohne Higgsfield-Clips. Erster Test: LaterneTest (14 s, Abendspaziergang mit Noas Laterne, ohne Ton).

Aufbau

Pfad	Inhalt
public/figuren/	freigestellte PNGs der Figuren
src/figuren.ts	Bildmaße, Augenpositionen (fürs Blinzeln), Noas Hand
src/teile/Figur.tsx	Figur an den Füßen verankert: verschieben, drehen, stauchen, blinzeln
src/teile/Laterne.tsx	Laternenstab mit pendelnder Papierlaterne
src/teile/Abendhuegel.tsx	Hintergrund in Aquarell-Optik (SVG), Vordergrund, Papierstruktur
src/szenen/LaterneTest.tsx	die Testszene mit Zeitplan

Benutzen

npm install
npx remotion studio              # Vorschau im Browser
npx remotion render src/index.ts LaterneTest /shared/youtube/tests/laterne-test.mp4

Fertige Videos gehören nach /shared/youtube/, nicht ins Git.

Im VPS-Container fehlen Chrome einige Systembibliotheken. Sie liegen ohne Root-Rechte unter ~/.local/chrome-libs (Debian-Pakete, nur entpackt) und werden so eingebunden:

export LD_LIBRARY_PATH=$HOME/.local/chrome-libs/root/usr/lib/x86_64-linux-gnu

Figuren freistellen

Mit rembg (Modell isnet-general-use), danach Maske härten, nur die größte Fläche behalten, Rand um 2 px einziehen (sonst heller Saum vor dunklem Hintergrund). Am besten funktionieren Einzelbilder vor hellem Papier.

Körperteil-Masken (Rig)

werkzeuge/rig.py zerlegt jede Figur in Körperteile und erzeugt:

Pfad	Inhalt
public/figuren/<figur>/teile/<teil>.png	harte Maske, genau an der Kontur
public/figuren/<figur>/einfluss/<teil>.png	weiche Maske für die Verformung: Teil + alles, was daran hängt, weicher Übergang am Gelenk, reicht über die Kontur hinaus
public/figuren/<figur>/uebersicht.png	alle Teile farbig, zum Prüfen
src/rigs.ts	Gelenkpunkte und Hierarchie (automatisch erzeugt)

Teile: Lulu – kopf, hals, ohr_links/rechts, horn_links/rechts, rumpf, bein_vorne_links/rechts, bein_hinten_links/rechts, schwanz, schal_schlinge, schal_ende, schal_boden. Pino – koerper, kopf, ohr_links/rechts, bauch, arm_links/rechts, fuss_links/rechts, muetze, bommel. Noa – kopf, zopf_links/rechts, rumpf, arm_links/rechts, hand_links/rechts, bein_links/rechts, stiefel_links/rechts.

Zuordnung: Accessoires über ihre Farbe, alles andere über Kernflächen pro Teil, die bis zur Kontur wachsen – nur innerhalb der Figur, also nie über Lücken (Schwanz ↔ Bein). Neue Figur oder neues Bild: Skelett und Flächen in rig.py eintragen, dann

python3 werkzeuge/rig.py   # braucht numpy, scipy, pillow

und uebersicht.png prüfen. In einer Szene: gelenk('lulu', 'hals', grad) (siehe src/szenen/VerformTest.tsx).

Folge 2 „Pino ist müde“ (Folge02)

Komplette Folge (ca. 5:20) nur mit Code, Figuren-Bibliothek und ohne Ton: Untertitel ersetzen vorerst die Stimmen, Mitmach-Pausen zeigen ein „?“.

Pfad	Inhalt
src/folge02/Folge02.tsx	Reihenfolge der Szenen
src/folge02/szene2.tsx … szene7.tsx, lied.tsx, buch.tsx	die Szenen; jede hat oben ihre Sprechzeilen (plane([...]))
src/folge02/zeit.ts	Zeitplan aus den Zeilen; Dauer wird aus der Textlänge geschätzt
src/folge02/figur.tsx	Figur (Standbilder mit Posenwechsel), ClipFigur (freigestellte Clips), Kamera
src/folge02/orte.tsx	Orte als SVG; vorberechnet nach public/folge02/orte/
src/folge02/natur.tsx	Blätter, Nest, Vögel, Schnee, Zzz, Funkeln, große Rufe
src/folge02/posen.ts	automatisch erzeugt von werkzeuge/posen.py
public/folge02/figuren/	freigestellte Standbilder (WebP, im Git)
public/folge02/clips	Link auf /shared/youtube/folge02/clips_frei/ (WebM mit Alpha, nicht im Git)

Orte neu vorberechnen (nach Änderungen in orte.tsx):

npx remotion still src/index.ts F2Ort-garten public/folge02/orte/garten.webp --image-format=webp

Rendern:

npx remotion render src/index.ts Folge02 /shared/youtube/folge02/folge02-vorschau.mp4 --gl=swangle

Auf einem anderen Rechner fehlen die Clips: den Ordner /shared/youtube/folge02/clips_frei/ nach public/folge02/clips/ kopieren. Fehlt ein Clip, zeigt ClipFigur ein Standbild der Figur.

Ton nachrüsten (ElevenLabs): Je Zeile die Audiodatei erzeugen, ihre Länge als dauer in die Zeile eintragen und die Datei als <Audio> am start der Zeile einbinden. Alle Bewegungen hängen an den Zeilen und verschieben sich mit.

Neue Standbilder/Clips: Standbilder mit rembg freistellen, ohne Zuschneiden (gleiche Leinwand), dann python3 werkzeuge/posen.py <ordner_freigestellt> /shared/youtube/folge02/clips_frei.

Bekannte Grenzen

• Die Figuren haben nur die Pose ihres Bildes. Neue Posen brauchen ein neues Bild (z. B. aus Gemini).
• Die SVG-Filter im Hintergrund werden pro Frame neu berechnet und machen das Rendern langsam. Für lange Folgen die Hintergrund-Ebenen einmal als PNG vorberechnen.