Communitygithub.com

smasikurr/RemotionMaster

Erstelle ein originelles, unkonventionelles animiertes MP4-Video mit eigenem synthetisiertem Soundtrack: jedes Bild in Code gezeichnet, taktsynchron. Verwende dies, wenn ein kreatives, einzigartiges oder „verrücktes“ Video zu einem beliebigen Thema gewünscht wird.

Was ist RemotionMaster?

Dieses Skill ist ein fortschrittliches Toolkit zur Erstellung generativer Filme, bei denen jedes Bild programmatisch mit pycairo und Pillow gezeichnet und jeder Ton mit numpy/scipy synthetisiert wird – ganz ohne Stockmaterial, KI-Bilder oder lizenzierte Musik. Es richtet sich an Entwickler und KI-Agenten, die kreative, unkonventionelle animierte MP4-Videos mit einer starken, spezifischen Kunstrichtung und taktsynchronem Soundtrack erstellen möchten. Das Skill zwingt zu einem Workflow, der zuerst das musikalische Konzept, dann die visuelle Erzählung und schließlich die Code-Implementierung behandelt. Es unterstützt eine breite Palette von Schriftsystemen (Devanagari, Arabisch, Tamil, CJK, Brahmi) und bietet eine umfangreiche Bibliothek an visuellen Effekten (Riso-Fehlregister, Halbtöne, Glitch-Stottern, Filmkörnung) sowie Musikproduktionswerkzeugen (verschiedene Tonleitern, Instrumente, Drum-Patterns). Die Referenzimplementierung SŪTRA demonstriert einen 87-sekündigen Film über die indische Zivilisation. Der Prozess umfasst Konzeptentwicklung, Musikproduktion, Szenencode, Test-Frames, paralleles Rendern und Qualitätssicherung, wobei die endgültige Ausgabe auf unter 29 MB für den Chat-Upload optimiert wird.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/smasikurr/RemotionMaster/tree/HEAD/.agents/skills/generative-film

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

Dokumentation

Generativer Film

Produziert ein 45–120 s, 1920×1080, 30 fps MP4, bei dem jedes Bild in Code gezeichnet (pycairo + Pillow) und jede Note synthetisiert (numpy/scipy) wird. Es gibt kein Stockmaterial, keine KI-Bilder und keine lizenzierte Musik. Der Referenzfilm ist SŪTRA (indische Zivilisation, 87 s). Er ist im Stil eines Risographie-Druckproofs gestaltet, und ein roter Faden zieht sich durch zehn Kapitel auf einem 96 BPM-Taktraster.

Die Qualität ergibt sich aus drei Dingen. Befolge alle drei:

  1. Eine Idee pro Kapitel, kein Bild pro Kapitel. Jede Szene zeigt einen Mechanismus (ein Stadtplan, der abgelaufen wird, ein Rezitationsgeflecht, ein wachsendes Fraktal, eine Flugbahn). Veranschauliche kein Substantiv.
  2. Ein Raster für Bild und Ton. Alles ist in Beats getaktet. Musik wird zuerst geschrieben, und jeder Schnitt, Pop und Blitz landet auf einem musikalischen Ereignis.
  3. Eine starke, spezifische Kunstrichtung, die nicht „Corporate Erklärvideo“ ist: Print-Chrom, falsch registrierte Farben, indigene Schriften und Ziffern, Schreibmaschinen-Untertitel und gestufte Wipes.

0 · Einrichtung (einmal pro Sitzung)

pip install --break-system-packages pycairo fonttools   # numpy, scipy, Pillow sind normalerweise vorhanden
which ffmpeg && python3 -c "from PIL import features; print('raqm', features.check('raqm'))"

Raqm muss True sein, da es die komplexe Schriftformung für Devanagari, Arabisch, Tamil und ähnliche Schriften bereitstellt. Erstelle ein Arbeitsverzeichnis. Wenn der Ordner dieses Skills scripts/ enthält, kopiere engine.py und audio_kit.py in das Arbeitsverzeichnis. Andernfalls schreibe sie wörtlich aus Anhang A und B aus. Sie sind getestet, also schreibe sie nicht neu. Schriftarten werden bei erster Verwendung aus dem google/fonts GitHub-Repository heruntergeladen, was die Sandbox erlaubt.

Richte eine Aufgabenliste ein: Konzept → Musik → Szenen → Testbilder → Rendern → Qualitätssicherung → Auslieferung.

1 · Konzept (vor jeglichem Code)

Recherche. Suche jedes Datum, jede Zahl, jeden Namen und jede Behauptung, die auf dem Bildschirm erscheinen werden, im Web. Stelle unsicheren Daten ein „c." voran. Beschrifte Diagramme mit „schematisch" oder „nicht maßstabsgetreu". Halte die Fakten wenige und präzise, mit Bildunterschriften von höchstens 12 Wörtern.

Klammerobjekt. Finde ein visuelles Element, das in jedem Kapitel vorkommt und dem Film seinen Namen gibt. In SŪTRA war es ein roter Faden, der durch die Straßen geht, zu einer Schallwelle wird, die Kolam zeichnet und dann die Mondflugbahn fliegt. Andere Beispiele:

  • Ozeangeschichte: ein einzelner Wellenkamm.
  • Kaffee: ein Tropfen.
  • Informatik: ein einzelnes Bit.
  • Ein Unternehmen: die Kernbewegung seines Produkts.

Titel. Wähle ein Wort, idealerweise in der Sprache des Themas, und gib ihm eine wörterbuchartige Erläuterung auf dem Bildschirm: sūtra (n.) 1. ein Faden 2. eine Regel 3. das, was Dinge zusammenhält.

Kapitel. Verwende 6–10 Kapitel, jedes um eine eigenständige visuelle Idee herum aufgebaut. Greife auf dieses Repertoire zurück:

  • Ein Diagramm, das sich selbst aufbaut: ein Stadtplan, eine Routenkarte, eine Umlaufbahn oder ein Stammbaum von Schriften.
  • Zahlen als Kunst: ein Pascal/Sierpiński-Dreieck, eine sich ausbreitende π-Spirale, Binärzähler oder Objekte in einer Verdopplungsreihe.
  • Rekursion oder Fraktale: ein Tempel der Tempel oder ein Baum der Bäume.
  • Ein Oszilloskop des tatsächlichen Soundtracks (wave_at(f)), hervorragend für Kapitel über Sprache oder Musik.
  • Eine ununterbrochene Linienzeichnung: eine Kolam- oder Spiegelkurve, eine durchgehende Porträtlinie oder eine Unterschrift.
  • Eine kinetische Wortcollage, z. B. Lehnwörter, Slogans oder Ortsnamen, die im Takt gestempelt werden.
  • Ein Countdown in einheimischen Ziffern, dann ein Start oder Ereignis, dann ein Treffer.
  • Ein Rahmen: Das Outro reiht alle Kapitel wie Perlen auf den roten Faden und kehrt dann zum Anfangsbild zurück.

Teste jedes Kapitel: Wenn es durch ein Stockfoto ersetzt werden könnte, überdenke es.

Palette. Verwende eine Papierfarbe, eine Nachtfarbe und 5 Farben, die nach den eigenen Materialien der Kultur benannt sind. SŪTRA verwendete Indigo, Sindoor, Haldi, Rani und Mor (Pfau). Andere Beispiele:

  • Japan: Sumi, Shu-Vermilion, Ai-Indigo, Kincha-Gold, Matcha.
  • Mexiko: Cochenille, Mais, Talavera-Blau, Jade, Ringelblume.
  • Weltraum: Vantablack, Natriumorange, Wasserstoff-Alpha-Rot, Sauerstoff-Türkis.

Wechsle zwischen hellen und dunklen Kapiteln ab und lass das Drop-Kapitel die Farben mit jedem Takt wechseln.

Schriftsystem. Verwende 4–5 Familien. Wähle eine schmale Display-Schrift für Hauptwörter, native Schrift(en) für das Thema, eine Monospace-Schrift für Bildunterschriften und Beschriftungen und eine weiche kursive Serifenschrift für poetische Zeilen. Verwende native Ziffern für die laufende Jahreszahl oder den Zähler. Nützliche google/fonts-Pfade (get_font(name, path, axes)):

RollePfadAchsen
Displayofl/anton/Anton-Regular.ttf–
Monoofl/spacemono/SpaceMono-Regular.ttf, …-Bold.ttf–
Kursive Serifeofl/fraunces/Fraunces-Italic[SOFT,WONK,opsz,wght].ttf[144,380,100,1]
Fette Serifeofl/fraunces/Fraunces[SOFT,WONK,opsz,wght].ttf[144,900,100,1]
Devanagariofl/tirodevanagarisanskrit/TiroDevanagariSanskrit-Regular.ttf–
Arabischofl/notonaskharabic/NotoNaskhArabic[wght].ttf[700]
Tamil / Bengalisch / Thaiofl/notosanstamil/NotoSansTamil[wdth,wght].ttf (gleiches Muster)[700,100] (wght, wdth-Reihenfolge = Schriftart)
CJKofl/notoserifjp/NotoSerifJP[wght].ttf[700]
Brahmiofl/notosansbrahmi/NotoSansBrahmi-Regular.ttf–

Überprüfe die Achsenreihenfolge mit font_axes(name). Wenn ein Pfad 404 ist, durchsuche https://github.com/google/fonts/tree/main/ofl/<family> mit WebFetch.

Unkonventionelle Mittel. Wähle mehrere aus:

  • Print-Proof-HUD: Registriermarken, Farbmuster, ein „PLATE 03 / 08 · NAME"-Label, eine Kapitelnummer in einem alten Zahlensystem, eine laufende Jahreszahl in nativen Ziffern und ein Fortschrittsfaden mit Kapitelperlen.
  • Riso-Fehlregister bei Hauptschrift (riso()).
  • Halbtonflächen.
  • Vertikale Riesenwörter.
  • Text auf einem Kreis (ein Stempel oder Siegel).
  • Schreibmaschinen-Untertitel.
  • Gestufte oder Iris-Wipes in zwei Farben.
  • Glitch-Stottern an Nahtstellen, untermalt von Audio-Stottern.
  • Ein weißer Blitz beim Drop.
  • Filmkörnung.

Niemals:

  • Eine zentrierte Titelcard, die ausblendet.
  • Farbverläufe, Leuchteffekte oder Linsenflecken als Dekoration.
  • Emojis oder Clipart.
  • Zeichnungen urheberrechtlich geschützter Figuren, Logos oder Gesichter realer Personen.
  • Nationalflaggen, die als Dekoration verwendet werden.
  • Klischeebilder.

2 · Zeitachse in Beats

Verwende 90–110 BPM. Ein Kapitel ist 8–16 Beats. 96 BPM × 136 Beats ≈ 87 s. Schreibe zuerst eine Tabelle, wie die von SŪTRA:

BeatsKapitelBildMusik
0–12IntroEin Punkt pulsiert, dehnt sich zu einer Linie aus, Titelbuchstaben erscheinen einer pro BeatDrohnen-Schwell, Glocke bei jedem Buchstaben, Riser
12–281Stadtplan baut sich zusammen; Faden wandert durch die StraßenHandtrommel-Groove + gezupfte Melodie
28–402 (Atem)Oszilloskop des Audios + WortgeflechtDrohne, Gesang, spärlich
40–523Spinnendes Rad, Buchstaben werden gestempelt, StammbaumGeschäftigere Drums, Riser, Stottern bei 51.5
52–644Sternspuren beschleunigen, Ziffern spiralenPad + Glocken-Arpeggio, großer Riser, Blitz
64–80DROPRiesige Hero-Glyphe, Fraktal wächst 4 Reihen/Takt, Palette wechselt pro TaktKick, Clap, Sub-Bass, Hook, Boom
80–925Rekursive Struktur wächst in der TiefeHalbzeit; Tihai landet auf 92 = Schnitt
92–1086Einlinienzeichnung, dann WortcollageSanfter Groove, dann voller Groove
108–120FinaleCountdown in nativen Ziffern → Flugbahn → LandetrefferGlocken, Rumpeln, Riser, Boom
120–136OutroPerlen auf dem Faden, Titel kehrt zurück, PunktGesang + Pad + Melodie, Ausblendung

Die Energiekurve geht: leises Intro → Aufbau → Atem → Aufbau → Drop auf der überraschendsten Idee → Halbzeit → Finaltreffer → leiser Rahmen.

3 · Musik zuerst — audio.py

from audio_kit import *
T = Track(bpm=96, beats=136, root=138.59, scale="raga_bhairavi")  # root Hz; SCALES hat viele Kulturen
T.drone_bed(0, 132, level=lambda b: 0.16 if 12 <= b < 120 else 0.3)
T.hand_drum(12, 28)                                   # Keherwa-ähnliches Standardmuster
T.melody(12, [(2, 4, 1), (3, 5, 1.2, 6), (4, 7, 2.2)])  # (Beat, Stufe, Dauer, Gleiten-zu-Stufe)
T.riser_into(64, 4); T.at("fx", boom(), 64, 0.55)     # in den Drop
T.groove(64, 80); T.stutter(51.5)
T.tihai(92)                                           # 3× Phrase landet genau auf Beat 92
T.mixdown("music.wav", fade_beats=(133, 136))          # schreibt auch env.npy / wave.npy
  • Busse sind drone, perc, kick, bass, mel, fx und pad. Verwende T.at(bus, signal, beat, gain, pan) für jeden One-Shot.
  • Instrumente: drone, pluck (buzz=0 für sauber), bell, voice, pad, sub, kick, clap, hat, drum_tone, drum_bass, drum_slap, drum_muted, riser, boom, rumble.
  • Passe die Tonleiter und die Instrumente an die Kultur an. Z. B. Hijaz + Rahmentrommel + oud-artiger Pluck (buzz=0.8); in_sen + koto-artiger Pluck (buzz=0) + Glocken; dorisch + Drohne + saubere Plucks.
  • Jedes visuelle Ereignis bekommt einen Sound. Wipes bekommen Riser, Drops bekommen einen Boom plus Blitz, Schnitte landen auf Tihai- oder Kick-Treffern, und erscheinende Buchstaben bekommen Glocken.
  • Überprüfe das Ergebnis:
    • Lautstärke: ffmpeg -i music.wav -af ebur128=framelog=quiet -f null - sollte etwa −16 bis −14 LUFS anzeigen.
    • Spektrogramm: ffmpeg -i music.wav -lavfi showspectrumpic=s=1600x500:scale=log:fscale=log spec.png, dann lies das Bild und überprüfe die Abschnittsformen.

4 · Szenen — film.py

from engine import *
PAPER, NIGHT, INK = hx("F1E6CF"), hx("0A0D26"), hx("14121C")
INK1, INK2, INK3 = hx("1B2A6B"), hx("EE3B1E"), hx("FFB21A")
get_font("anton", "ofl/anton/Anton-Regular.ttf")
get_font("mono", "ofl/spacemono/SpaceMono-Regular.ttf")
# Berechne Geometrie auf Modulebene mit einem gesetzten rng (deterministisch über Worker-Prozesse hinweg)

def s_intro(ctx, b, f):              # b = Beat (float), f = Frame
    bg(ctx, NIGHT)
    riso(ctx, lambda c: text(ctx, "TITEL", "anton", 400, c, W/2, 700, ax=.5, sc=back(ph(b, 4, .5))),
         PAPER, INK2, dark=True)
    return PAPER                      # Vordergrundfarbe für das HUD

def hud(ctx, b, fg): reg_marks(ctx, fg, (INK1, INK2, INK3))

SCENES = [(0, s_intro), (12, s_ch1)]                 # (Start-Beat, fn)
run(SCENES, 136, bpm=96, name="meinfilm", hud=hud,
    wipes=[(12, INK2, INK3)],                        # (Beat, c1, c2[, iris_wipe])
    glitches=[(51.5, 52.15)], flashes=[(64, WHITE, .5)], fade_out=134.6)

Szenenregeln:

  • Zustandslos. Jeder Wert ist eine Funktion von b, sodass Frames in beliebiger Reihenfolge über Prozesse hinweg gerendert werden können.
  • Eingänge verwenden back(ph(b, start, 0.4)) für Pop-Effekte, eo() für Folien und eio() für Kamerafahrten und Linienzeichnungen. Staffele Elemente um 0.2–1 Beat.
  • Beat-Leben kommt von pulse(b) (1→0 jeder Beat) für Bounce- und Ringgröße, env_at(f) für Lautstärke und wave_at(f) für das Oszilloskop.
  • Linien live zeichnen. Verwende path_partial(ctx, pts, cumlen(pts), frac) und platziere eine leuchtende Perle an der zurückgegebenen Spitze.
  • Komposition.
    • Behalte ein Heldenelement, ein unterstützendes Diagramm und eine Bildunterschrift pro Szene.
    • Halte 110 px Ränder ein. Die HUD-Ecken und das untere Band (y ≈ 960–1040) sind reserviert. Bildunterschriften stehen bei y ≈ 975, beginnend bei x ≈ 560 oder in der leeren Zone der Szene.
    • Große Schrift ist groß: 300–800 px Hero-Glyphen. Bildunterschriften sind 18–22 px Mono.
  • Kontrast. Wechsle zwischen Papier- und Nachtszenen ab. Verwende riso(..., dark=True) auf dunklen Hintergründen.
  • Verwende fit_size() für lange Wörter in Collagen und text_circle() für Siegel.
  • Das HUD kann Kapitelname, Plattensatznummer, native Ziffern über eine digital map und einen Fortschrittsfaden anzeigen. Wenn der Skill-Ordner examples/sutra/film.py enthält, sind dessen hud() und Szenen die vollständige Referenz; sein examples/sutra/contact_sheet.png zeigt das fertige Aussehen.

5 · Test-Frames → Kontaktbogen → Korrektur (nicht überspringen)

python3 film.py test 2 6 10 17 25 34 45 58 66 75 86 96 104 110 114 118 125 134

Lies sheet.png und überprüfe:

  • Überlappender oder abgeschnittener Text.
  • Tofu-Boxen oder fehlende Glyphen. Führe missing_glyphs(font, string) für jede Schriftart × Zeichenkette aus. Zum Beispiel fehlen Fraunces → π ∞ ṅ, und Tiro Devanagari fehlt → ≈ π.
  • Unleserliche Bildunterschriften in Miniaturansicht.
  • Leere Frames am Kapitelanfang.
  • Falsche Fakten oder Tippfehler.
  • Beats, an denen sich nichts bewegt.

Wiederhole den Vorgang, bis jedes Bild ein Poster sein könnte. Normalerweise dauert es 2–3 Runden.

6 · Rendern, QA, ausliefern

  • nohup python3 film.py render > render.log 2>&1 &, dann mit Bash-sleep-Schleifen abfragen (Timeout ≤ 590 s pro Stück). Es rendert parallel auf allen Kernen. Die grobe Geschwindigkeit beträgt je nach Szenenkomplexität 2–10 fps insgesamt; SŪTRA dauerte etwa 20 min auf 2 Kernen.
  • Ausgaben sind name_full.mp4 (CRF 18, volle Qualität) und name.mp4, eine Zwei-Durchlauf-Neucodierung, die unter 29 MB bleibt, damit sie in das 30 MB Chat-Upload-Limit passt.
  • QA:
    • ffprobe -count_frames zur Bestätigung der Bildanzahl und Dauer.
    • ffmpeg -i name_full.mp4 -vf "fps=1/3.5,scale=384:216,tile=5x5" -frames:v 1 final.png, dann lies es.
    • Stichprobenartige Überprüfung von 2–3 Bildern in Originalgröße, einschließlich eines nach der Komprimierung.
  • Download: Sende name.mp4 mit sendUserFile (display: "render"); die Karte ermöglicht dem Benutzer das Abspielen und Herunterladen. Erwähne auch die Datei in voller Qualität. Wenn die Sitzung mit dem Computer des Benutzers verbunden ist, biete an, name_full.mp4 über device_commit_files in einem seiner Ordner zu speichern, oder sende es, wenn es unter 30 MB ist.
  • Um nur einen korrigierten Abschnitt neu zu rendern, führe python3 film.py chunk <f0> <f1> part.mp4 für die betroffenen Frames aus, verknüpfe und multiplexe die Teile dann mit ffmpeg, wie es run() tut.

Abschließende Nachricht an den Benutzer

Gib den Titel des Films und eine Zeile zu seinem Konzept an, die Kapitel als kompakte Liste, was die Musik ist, und etwaige Annäherungen („c."-Daten, Schemata). Fasse die Schritte nicht zusammen.


Anhang A — engine.py

"""engine.py — generatives Print-Film-Toolkit (pycairo + Pillow/raqm + ffmpeg).

Ein Filmskript macht:   from engine import *
dann definiert es Szenen als Funktionen  scene(ctx, b, f) -> fg_color   (b = Beat, f = Frame)
und ruft  run(SCENES, TOTAL_BEATS, bpm=..., wipes=..., hud=...)  am Ende auf.
CLI des Filmskripts:
    python film.py test 4 12.5 30      # Rendert PNGs bei diesen Beats + Kontaktbogen (sheet.png)
    python film.py render              # Vollständiges paralleles Rendern -> film_full.mp4 + film.mp4 (<29 MB)
"""
import math, os, sys, subprocess, shutil
import numpy

…

[truncated for translation – gekürzt für die Übersetzung]

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

smasikurr/RemotionMaster

Captions living in 3D space around a talking head: a camera flies between the speaker and the words (whip-in, parallax truck, push), caption groups sit at different depths so camera moves pull them apart, hero words hide BEHIND the speaker through an alpha matte, a ring of words wraps round the speaker and turns in front of them, focus racks between depths, and text steps at 15 fps with ghost motion blur. Works in any type style (editorial serif, bold sans) or hand-drawn (p5.brush write-on). Trigger on: "3D text", "3D camera captions", "text around / behind the speaker", "camera moves through the text", "depth captions on my avatar video". Covers prep (portion, padded plate, matte, word clock, font metrics), the shot grammar, depth rules, QC, and limits.

smasikurr/RemotionMaster

Direct, build and render premium cinematic motion design from code — launch films, product and feature videos, looping feature animations for landing pages and social, logo stings and reveals, UI walkthroughs, app demos, kinetic type, teasers, trailers, intros and promo clips. Use this whenever the user wants any video, animation, motion graphic or animated demo made with Remotion, HyperFrames, HTML/GSAP or React, or asks to storyboard, time, score, render, polish or critique one — even if they only say "make a video about X", "animate this feature" or "we need a launch clip". It supplies concept and copy discipline, type and colour taste that defers to a supplied brand, a beat-locked timeline that drives both picture and a code-made soundtrack, choreography and transition craft, real product UI in motion, film-grade finishing (true motion blur, no banding, BT.709, sync-checked mux) and a measured self-critique loop on contact sheets and renders.

smasikurr/RemotionMaster

Product Launch: turn a product (a URL, an app the user can record, screenshots or a brief) into the kind of 20–60 s launch video SaaS teams post on X: kinetic headlines and the real product UI in floating windows, cut to a music grid, ending on the name and a call to action. Real UI only, never mocked. Works with whatever video tool the project uses (Hyperframes, Remotion, Motion Canvas, an editor); Hyperframes when starting fresh. A free local script makes a music bed authored to the cut. Every version is reviewed in FrameJam. Use for a product launch, feature announcement, "introducing X" video, promo for a website or app, or a landing-page hero video. Not for a founder talking to camera (founder-launch) or a short mystery teaser (launch-teaser).

Verwandte Skills