Ich wollte eigentlich nur, dass mein Profilfoto auf meiner eigenen Seite kurz zwinkert, wenn man zu meiner About-Me-Sektion scrollt. Eine Spielerei, kein großes Projekt. Am Ende stand da eine komplette Pipeline, die aus jedem beliebigen Foto in wenigen Minuten einen Cinemagraph macht, und ein offener Claude-Code-Skill, den jeder nutzen kann.
Was ein Cinemagraph überhaupt ist
Ein Cinemagraph ist ein Standbild, in dem sich ein kleiner, klar abgegrenzter Bereich in einer Schleife bewegt, während der Rest komplett still bleibt. Dampf, der über einer Kaffeetasse aufsteigt. Wolken, die über einer Skyline weiterziehen. Ein Blatt, das im Wind zittert, während die restliche Szene wie eingefroren wirkt. Der Begriff kommt von den Fotografen Kevin Burg und Jamie Beck, die das Format Ende der 2000er für Modefotografie populär gemacht haben.
Das Wirkungsprinzip ist psychologisch interessant: Weil fast das ganze Bild still steht, liest das Auge es zunächst als Foto, nicht als Video. Die eine Bewegung wirkt dadurch stärker, als würde ein Foto kurz zum Leben erwachen, statt als gewöhnlicher Clip wahrgenommen zu werden.
Warum das bisher aufwendig war
Ein klassischer Cinemagraph entsteht, indem man ein Video aufnimmt, ein Standbild als Basis wählt, und dann in Photoshop oder After Effects Ebene für Ebene maskiert, welcher Bildbereich sich bewegen darf und welcher eingefroren bleibt. Rotoscoping, Masken, Loop-Punkte von Hand suchen. Für ein einzelnes gutes Ergebnis schnell ein, zwei Stunden Arbeit, für jemanden, der die Tools schon kennt.
Ich hatte weder die Zeit noch ehrlich gesagt die Lust dafür. Aber ich hatte Zugriff auf Seedance, ein Bild-zu-Video-Modell, das aus einem einzelnen Foto direkt einen kurzen Clip generiert, wenn man ihm sagt, was sich bewegen soll und was nicht.
Funktioniert nicht nur bei Naturmotiven. Ein fiktives Tech-Produkt mit erfundener Marke, komplett KI-generiert, eignet sich genauso gut, der Deckel klappt auf, drinnen glimmt kurz ein Licht auf.
Die Pipeline, die daraus wurde
Der Workflow, den ich am Ende gebaut habe, läuft in drei Schritten:
1. Foto besorgen oder generieren. Wenn kein passendes Foto da ist, generiere ich eins mit einem Bildmodell. Für die Demo-Seite habe ich zum Beispiel eine Pfingstrosen-Knospe, eine Kaffeetasse und eine Skyline bei Dämmerung komplett KI-generiert, keine echten Fotos im Haus gehabt.
2. Animieren per API. Ein Prompt beschreibt genau eine Bewegung, alles andere soll unverändert bleiben. “Statische Kamera, identischer Bildausschnitt, nur die Blütenknospe öffnet sich langsam, der Rest des Bildes bleibt komplett still.” Die API generiert daraus ein paar Sekunden Video, ich lade es herunter und wandle es zusätzlich in WebM um, für kleinere Dateigröße.
3. Einbauen in die Website. Ein Foto liegt als Standbild da, ein Video liegt unsichtbar darüber. Ein IntersectionObserver beobachtet, wann die Sektion in den Viewport scrollt, lädt dann erst das Video nach, spielt es einmal ab, und springt zurück zum Standbild, sobald man weiterscrollt.
Zwei Bugs, die mich einiges Kopfzerbrechen gekostet haben
Bug 1: Ein verstecktes Element wird nie “sichtbar”. Mein erster Ansatz hat das Video-Element beobachtet, um zu wissen, wann es abspielen soll. Das Video startet aber mit display: none, und ein Element ohne Layout-Box meldet einem IntersectionObserver niemals, dass es sichtbar ist, egal wie weit man scrollt. Die Lösung: das immer sichtbare Foto beobachten, nicht das versteckte Video.
Bug 2: Der Rücksetzer flackert. Sobald ich das Video-zu-Foto-Zurückspringen ans Verlassen des Sichtbereichs koppelte, flackerte es beim Scrollen kurz sichtbar auf. Der Grund: Der Reset feuerte beim selben Schwellwert, bei dem auch das Video startet, mitten im Scrollen, während die Sektion noch halb im Bild war. Fix: zwei Schwellwerte statt einem. Das Video startet ab 40 % Sichtbarkeit, der Rücksetzer feuert aber erst bei 0 %, wenn die Sektion komplett aus dem Bildschirm verschwunden ist. Der Wechsel passiert dann unsichtbar für den Nutzer.
Die Sache mit den Gesichtern
Beim Testen mit mehreren Motiven ist mir ein Muster aufgefallen, das ich vorher nicht erwartet hatte: Sobald ein Gesicht prominent im Bild ist, will das Videomodell am liebsten die Augen animieren, komplett unabhängig davon, was im Prompt steht. Ich habe explizit “der Arm hebt sich zum Winken, das Gesicht bleibt unverändert” gefordert, bekam aber wieder ein Blinzeln. Erst ein sehr explizites Gegenteil-Framing im Prompt (“die Augen bleiben exakt wie im Referenzbild, keine Augenbewegung”) hat das zuverlässig verhindert. Bei Motiven ganz ohne Gesicht, einer Schatztruhe zum Beispiel, trat das Problem gar nicht erst auf.
Draus einen Skill gemacht
Weil die ganze Pipeline inzwischen sauber funktioniert, habe ich sie als Claude-Code-Skill verpackt: eine dokumentierte Anleitung plus ein Script, das API-Aufruf, Download und WebM-Konvertierung in einem Schritt erledigt. Wer Claude Code nutzt, kann damit aus einem eigenen Foto in wenigen Minuten das Gleiche bauen, ohne die Fallstricke von oben selbst durchzuspielen.
Live-Beispiele, von der eigenen Craft-Bier-Marke bis zum Produktfoto, das im Shop lebendig wird, gibt’s auf der Cinemagraph-Section-Skill-Seite zum Anschauen. Der Skill selbst ist komplett offen auf GitHub, MIT-Lizenz, einfach klonen.
Kommentare