Cinemagraph
Lebendige Fotos in Minuten
Ein kostenloser Claude-Code-Skill: aus einem Foto wird per KI ein kurzer Loop, eine Blüte öffnet sich, Dampf steigt auf, ein Neon-Schild flackert an. Eingebaut in eine Sektion, die beim Reinscrollen animiert und beim Rausscrollen wieder zum Standbild zurückspringt. Sieben Beispiele unten, scroll einfach durch.
Eine Blüte, die sich öffnet
Das Ausgangsfoto ist komplett KI-generiert, ich hatte keine echte Pfingstrose parat. Der Skill nimmt das Bild und lässt daraus einen vier Sekunden langen Loop entstehen, in dem sich die Knospe langsam öffnet. Scroll die Sektion aus dem Blickfeld und wieder rein, sie spielt jedes Mal neu ab.
Dampf über der Tasse
Gleiches Prinzip, anderes Motiv. Tasse und Schreibtisch bleiben komplett still, nur der Dampf bewegt sich. Passt ganz gut zu einer Website, die von Kaffee in Code lebt.
Wolken über der Skyline
Funktioniert auch bei größeren Szenen: die Skyline steht, nur die Wolken driften weiter. Gut geeignet für Hero-Bilder, die nicht komplett statisch wirken sollen, aber auch nicht wie ein Video-Hintergrund die Ladezeit ruinieren.
Ein Roboter, der winkt
Funktioniert auch außerhalb von Fotorealismus. Gleicher Skill, komplett anderer Stil: 3D-Look wie aus einem Animationsfilm. Sitzpose, Gesicht und Hintergrund bleiben unverändert, nur der Arm hebt sich kurz zum Winken.
Eine Schatztruhe öffnet sich
16-Bit-Pixel-Art im Stil klassischer 90er-Dungeon-Crawler. Steinboden und Fackel bleiben still, nur die Truhe springt auf und goldenes Licht pulsiert heraus. Bewusst ohne Gesicht im Bild, das umgeht ein Muster, das uns bei den ersten Versuchen aufgefallen ist: Sobald ein Gesicht im Bild ist, animiert die KI am liebsten die Augen, komplett unabhängig vom Prompt.
Ein Gemälde, das zurückblinzelt
Der unheimlichste im Bunde. Ein klassisches Ölporträt, komplett still, bis die gemalten Augen sich schließen und wieder öffnen. Zeigt, dass der Effekt nicht auf Fotos beschränkt ist, sondern auf jedes stillstehende Bild passt.
Ein Neon-Schild geht an
Auch das eigene Logo oder ein fiktives wie hier funktioniert als Motiv, nicht nur Fotos. Die Wand und die nasse Straße bleiben still, das Schild flackert ein paarmal unruhig, bevor es dauerhaft leuchtet, klassisches Neon-Anschalten.
Was mitgeliefert wird
Nicht nur ein Prompt.
Ein Claude-Code-Skill ist eine dokumentierte Anleitung, kein Blackbox-Tool. Das steckt drin.
Astro, Vue, React oder WordPress
Framework-fertigFertige Beispiele für alle vier liegen im Skill, dieselbe Logik, jeweils idiomatisch übersetzt. Für WordPress ein fertiger [cinemagraph]-Shortcode. Kein eigenes Übersetzen von Vanilla-JS nötig.
Barrierefrei by default
A11y eingebautVideo ist aria-hidden, das Foto trägt den Alt-Text. Reduced-Motion wird geprüft, bevor überhaupt etwas geladen wird. Laufzeit unter 5s hält die Sektion WCAG-2.2.2-konform.
SEO mitgedacht
Kein AfterthoughtLazy-Loading, explizite Bildmaße gegen Layout-Shift, echte Alt-Texte Pflicht. Das Foto trägt die komplette SEO-Last, das Video ist reine Zugabe obendrauf.
Kein Foto? Kein Problem
KI-BildgenerierungAlle sieben Beispiele oben sind komplett KI-generiert. Der Skill generiert bei Bedarf selbst ein passendes Ausgangsbild, bevor er es animiert.
Vier gelöste Fallstricke
Production-readyIntersectionObserver auf ein verstecktes Element beobachten, der Rücksetzer, der mitten im Scrollen flackert, eine Race Condition bei langsam ladenden Clips, und deren eigentliche Ursache: Laden startet erst genau dann, wenn eigentlich schon abgespielt werden soll. Alle vier haben uns beim Bauen selbst erwischt, alle vier schon gefixt drin.
MIT-Lizenz, quelloffen
Volle KontrolleKompletter Quellcode einsehbar, änderbar, forkbar auf GitHub. Keine versteckte Abhängigkeit von mir oder einem Service.
Willst du sowas
auf deiner Seite?
Der Skill ist komplett offen auf GitHub, MIT-Lizenz, einfach klonen und in Claude Code loslegen. Oder ich bau dir direkt sowas ein, wenn du lieber schreibst, welches Foto lebendig werden soll.
Kein Formular, keine Wartezeit, einfach schreiben oder klonen.