Ein Video ohne Videoprogramm: Motion Graphics mit Claude

Ein Video für meine Startseite, ohne ein einziges Mal ein Videoprogramm zu öffnen. Das habe ich an einem Sonntagabend ausprobiert. Herausgekommen sind 21 Sekunden Motion Graphics in den Farben von pfeisinger.com, zwei Soundtracks und ein Renderlauf, der knapp über eine Minute dauert.

Den Anstoß hat ein YouTube-Video gegeben. Darin lässt jemand Claude Opus 5.5 Motion Graphics bauen: einen Short aus einer Rohaufnahme, Werbespots für Software und ein Erklärvideo zu Phishing-Mails. Der Trick dahinter: Claude schreibt eine Webseite, auf der sich alles bewegt, und ein Programm nimmt diese Seite Bild für Bild auf. Jedes Bild im Video ist damit Code, und Code kann man gezielt ändern.

Mein Auftrag an Claude

Ich habe Claude in Cowork zwei Dinge gegeben: die Adresse meiner Webseite und den Link zum Video, mit dem Hinweis, die Tricks daraus zu verwenden, wenn es Sinn macht. Als Modell lief Opus 5.5 auf mittlerem Aufwand. Im Video war es der hohe.

Die YouTube-Seite konnte Claude nicht öffnen, der Abruf wurde abgelehnt. Also habe ich das Transkript in den Chat kopiert. Danach hat Claude meine Startseite ausgelesen: Navy #0B1826 als Fläche, Orange #FF6B1A als Akzent, der blaue Versatzschatten meiner Buttons, Aptos und Cascadia Code als Schriften. Nur das Logo ließ sich nicht herunterladen. Die Endkarte arbeitet deshalb mit meinem Namen und einer kleinen Bildmarke aus vier Quadraten.

Sechs Szenen, harte Schnitte

Aus dem Video übernommen hat Claude die harten Schnitte zwischen den Szenen und die Regel, dass die Grafik zeigt, was der Text sagt. Die Texte stammen direkt von meiner Startseite:

1. Terminal-Intro „Technik · KI · Transformation“
2. „Technik verstehen. KI praktisch machen.“
3. die drei Fokus-Karten, die ein orangefarbener Punkt nacheinander aktiviert
4. Werkzeuge laufen über „Prozess + Mensch“ zur „Wirkung“
5. ein Zähler bis 20+ für die Jahre zwischen Technologie, Menschen und Prozessen
6. Endkarte mit Name, Rolle und pfeisinger.com

An jedem Schnitt blitzt die Fläche für zwei Bilder orange auf. Am Ende räumt sich die Endkarte selbst ab, bis nur das leere Navy übrig bleibt. Damit beginnt der Loop wieder genau dort, wo er aufgehört hat.

Jedes Bild ist eine Funktion der Zeit

Technisch ist das Ganze eine einzige HTML-Datei mit einer Bühne von 1920 × 1080 Pixeln. Es gibt keine CSS-Animationen und keine Zeitleiste im Browser. Eine Funktion render(t) setzt für jeden Zeitpunkt t alle Positionen, Deckkräfte und Texte selbst.

// Auszug: Wort-Reveal aus einer Maske
function words(list, t, inAt, outAt, stagger = .09, dur = .75) {
  list.forEach((el, i) => {
    const a = p(t, inAt + i * stagger, dur);
    const b = outAt == null ? 0 : p(t, outAt + i * stagger * .5, .45, E.inExpo);
    el.style.transform = `translateY(${(1 - a) * 115 - b * 115}%)`;
  });
}

Zweck: Jedes Wort steckt in einem Element mit overflow: hidden und gleitet von unten herein. Wirkung: Weil nur t zählt, sieht Bild 147 bei jedem Durchlauf exakt gleich aus. Genau das braucht die Aufnahme.

Aufgenommen wird mit Playwright und dem Chromium im Container. Ein kleines Node-Skript setzt die Zeit, macht einen Screenshot und schiebt ihn direkt in ffmpeg:

// Auszug aus capture.js
const FPS = 30, N = Math.round(DUR * FPS);
for (let i = 0; i < N; i++) {
  await pg.evaluate(t => window.__render(t), i / FPS);
  const buf = await pg.screenshot({ type: 'png' });
  if (!ff.stdin.write(buf)) await new Promise(r => ff.stdin.once('drain', r));
}

630 Bilder, 1080p, rund eine Minute Renderzeit. Das MP4 hat 1,8 MB. Das im Video erwähnte Framework HyperFrames hat Claude gar nicht gebraucht, die eigene Zeitfunktion reicht für diesen Umfang.

Vor dem Rendern hat Claude acht Standbilder zu einem Kontaktbogen zusammengesetzt und sich angesehen. Dabei sind zwei Fehler aufgefallen: Die große Überschrift lief unter das orange Quadrat, und die Verbindungslinien in Szene 4 trafen die Kästchen nicht. Claude hat die Schrift verkleinert, das Quadrat verschoben und die Linien aus den echten Positionen der Kästchen berechnet. Beim zweiten Kontaktbogen hat alles gepasst.

Der erste Soundtrack: Techno aus Code

Dann wollte ich Musik. Claude hat sie ebenfalls aus Code erzeugt, mit numpy und scipy: 120 BPM, weil dann ein Schlag alle 0,5 Sekunden kommt und fast alle Schnitte schon auf diesem Raster liegen. Nur den letzten Schnitt hat Claude von 17,6 auf 17,5 Sekunden gezogen. Seitdem sitzt jeder Szenenwechsel auf dem Beat, mit einem Impact darauf. Dazu kommen ein Tick pro getipptem Zeichen und einer pro Zahl im Zähler.

Claude kann den eigenen Track übrigens nicht hören. Geprüft hat es über Pegel und Spektrogramm: Beim Schnitt springt die Lautstärke auf das Drei- bis Zehnfache, also sitzen die Impacts auf dem Bild.

Gepasst hat er mir trotzdem nicht so recht. Statt eigene Musik zu suchen, habe ich nur einen Stil genannt: Minimal Dub Techno.

Version zwei: Minimal Dub Techno

Der zweite Track arbeitet mit gedämpften Akkord-Stabs in Dm9 und Gm9, einem Filter, der über acht Sekunden auf- und zugeht, einer weichen Kick, Sidechain-Pumpen und Vinyl-Knistern. Das Herzstück ist das Echo:

# Auszug aus sound_dub.py: Ping-Pong-Tape-Delay im 3/16-Abstand
def tape_delay(x, D=3*S16, fb=.58, taps=12, cut=2200):
    Lo = np.zeros(N); Ro = np.zeros(N); y = x.copy(); d = int(D*SR)
    for k in range(1, taps+1):
        y = lp(y, cut*(.93**k)); y = hp(y, 180)
        sh = np.zeros(N); sh[d*k:] = y[:N-d*k]*fb**k
        (Lo if k%2 else Ro)[:] += sh
    return Lo, Ro

Zweck: Jede Wiederholung springt zwischen links und rechts und wird dabei dunkler, wie bei einem alten Bandecho. Wirkung: Die kurzen Akkorde ziehen lange Fahnen hinter sich her, und genau dort entsteht der Dub-Raum. Der ganze Track rechnet in etwa fünf Sekunden.

Die Animations-Sounds sind in dieser Version leiser: Klicks und kleine Glockentöne, auf den Schnitten ein tiefer, runder Bass-Schlag.

Beide Fassungen zum Vergleich

Zuerst die Techno-Version:

Und die Dub-Techno-Version:

Als Nächstes: ab auf die Startseite

Im Hero läuft das Video ohne Ton. Browser spielen automatisch startende Videos nur stumm ab. Claude hat deshalb einen kleinen orangen Ton-Button im Stil der Seite gebaut. In der HTML-Variante folgt die Animation nach dem Klick sogar der Uhr der Audiodatei, Bild und Ton bleiben also synchron.

Ob der Loop dort auf Dauer nervt oder angenehm im Hintergrund läuft, sehe ich erst, wenn er ein paar Tage auf der Startseite läuft.