Cinemagraph
Aus Standbild wird Blickfang
Ein kostenloser Claude-Code-Skill, der aus einem Produktfoto in ein paar Minuten einen waschechten Scroll-Stopper macht. Perfekt für Online-Shops und Landingpages, die mehr wollen als ein müdes Standbild, aber keine Lust auf schwere Video-Hintergründe haben. Scrollt rein, spielt ab, scrollt raus, wird wieder zum Foto. Beispiele unten, einfach durchscrollen.
Orbit Case
Fiktives Produkt, fiktive Marke, zu hundert Prozent mit KI. Case und Untergrund stehen stocksteif, nur der Deckel klappt einmal auf und drinnen glimmt kurz ein sattes Cyan auf.
Bomber Energy
Marke und Etikett von mir erfunden, fertig generiert bevor überhaupt ein Frame animiert wurde. Die Lasche knackt, ein Frost-Schwall schießt hoch und verpufft wieder, der Rest der Dose rührt sich keinen Millimeter. Der klassische Werbe-Moment, nur eben in 4 Sekunden statt 30.
Hold my Bomber!
Hier steckt der eigentliche Trick drin: mein Gesicht kommt aus einem echten Foto, die Dose aus dem KI-Produktbild, beides in eine Szene verschmolzen.
Cipher Mechanical Keyboard
Bestes Keyboard ever. Wenn echt wäre. Fiktive Marke, komplett KI-generiert. Tastatur liegt regungslos auf dem Schreibtisch, bis eine Taste aufleuchtet und ein RGB-Lichtstrom über die restlichen Tasten und die Kantenbeleuchtung läuft
Was mitgeliefert wird
Nicht nur ein Prompt.
Ein Claude-Code-Skill ist eine ausgeschriebene Anleitung, keine Blackbox mit Wow-Effekt auf Zuruf. Hier ist, was wirklich drinsteckt, und warum sich das lohnt.
Astro, Vue, React oder WordPress
Framework-fertigFertige Beispiele für alle vier liegen bei, gleiche Logik, jeweils astrein in die Sprache des jeweiligen Frameworks übersetzt. WordPress kriegt sogar einen eigenen [cinemagraph]-Shortcode obendrauf, landet direkt in jeder WooCommerce-Produktbeschreibung, Produktfotos im Shop wirken sofort lebendig. Kein mühsames Vanilla-JS-Übersetzen von Hand.
Barrierefrei by default
A11y eingebautVideo ist aria-hidden, das Foto zieht den kompletten Alt-Text. Reduced-Motion wird gecheckt, bevor auch nur ein Byte geladen wird. Unter 5 Sekunden Laufzeit, damit WCAG 2.2.2 gar nicht erst anklopfen muss.
SEO mitgedacht
Kein AfterthoughtLazy-Loading, feste Bildmaße gegen Layout-Shift-Panik, echte Alt-Texte Pflicht. Das Foto schuftet für dein Ranking, das Video ist einfach die Kirsche obendrauf.
Kein Foto? Kein Problem
KI-BildgenerierungDie Beispiele oben kommen zu hundert Prozent aus der KI, inklusive frei erfundener Marke und Etikett. Kein Foto zur Hand? Der Skill zaubert sich selbst eins, bevor er's zum Leben erweckt.
Vier gelöste Fallstricke
Production-readyIntersectionObserver auf ein verstecktes Element angesetzt, ein Rücksetzer, der mitten im Scrollen flackert, eine Race Condition bei langsamen Clips, und deren wahrer Übeltäter: Laden startet erst, wenn eigentlich schon Showtime sein sollte. Alle vier haben uns selbst erwischt, alle vier stecken schon gefixt drin, bevor sie dich erwischen.
MIT-Lizenz, quelloffen
Volle KontrolleKompletter Code offen einsehbar, änderbar, forkbar, direkt auf GitHub. Keine versteckte Abhängigkeit von mir oder sonst wem, du bist komplett Herr der Lage.
Häufige Fragen zum Skill
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, egal ob Produktfoto im WooCommerce-Shop oder Portrait auf der About-Seite, sag mir einfach, was lebendig werden soll.
Kein Formular, keine Wartezeit, einfach schreiben oder klonen.