motion-design
Bewegung, die sich richtig anfühlt: Grundregeln für Tempo, Auslauf und Choreografie.
- Erst das Gefühl: Bevor die KI Zahlen wählt, legt sie fest, was die Bewegung auslösen soll: Freude, Ruhe, Dringlichkeit oder Eleganz.
- Vier Charaktere: Verspielt, hochwertig, sachlich oder kraftvoll. Jeder bringt passende Dauer, Beschleunigung und Überschwingen mit.
- Für jede Technik: Gilt für CSS, Framer Motion, GSAP, Lottie und andere. Es sind Regeln, keine Bibliothek.
Ein Skill von LottieFiles, nicht von uns. Wir haben ihn gelesen und listen ihn mit Verweis auf die Quelle.
Kostenfrei. Wir haben den Skill nicht in Claude Code, ChatGPT oder Grok ausgeführt und übernehmen dafür keine Gewähr. Urheber und Lizenz stehen in der Quelle.
Das Problem
Warum es diesen Skill gibt.
- Animationen von KI wirken oft gleichförmig: alles gleich lang, alles gleich weich, alles gleichzeitig. Das fühlt sich billig an, ohne dass man sofort sagen kann, warum.
- Der Skill gibt der KI die Handwerksregeln mit, die Gestalter im Kopf haben, etwa dass Eingänge abbremsen und Ausgänge anziehen.
Was er macht
So arbeitet er.
- Entscheidungsrahmen: Acht Fragen vor jeder Animation: Gefühl, Charakter, Eigenschaft, Dauer, Beschleunigung, Hauptelement, Nebenebenen, Drittelregeln.
- Nachschlagetabellen: Dauer und Beschleunigung nach Anwendungsfall, dazu Muster für Ein- und Ausblenden, Rückmeldung und Dauerbewegung.
- Prüfliste: Eine Qualitätsliste und Fehlersuche für Animationen, die nicht stimmen.
Ehrlich gesagt
Was er kann und was nicht.
- Grenze: Er liefert Regeln und Tabellen, keinen fertigen Code und keine Bibliothek.
- Grenze: Überschneidet sich teilweise mit Bewegungs-Wissen, das manche Werkzeuge schon mitbringen, etwa Hyperframes.
- Getestet: Wir haben die Hauptdatei und alle Unterdateien gelesen und nach unsichtbaren Zeichen, kodierten Blöcken und Aufforderungen zum Nachladen gesucht. Gefunden wurde nichts.
- Herkunft: Entwickelt von LottieFiles, veröffentlicht unter der MIT-Lizenz. Wir haben nichts daran verändert.
Prüf-Protokoll
Das Ergebnis, offen gelegt.
Ein Siegel ist Sorgfalt, keine Garantie. Wir zeigen das Ergebnis als Ampel, nicht die Prüfmechanik dahinter. Die Verantwortung für den Einsatz bleibt bei Ihnen.
So laden Sie ihn ein
In vier Schritten einsatzbereit.
Quelle öffnen
Die Quellseite auf GitHub aufrufen und den Ordner mit der SKILL.md herunterladen.
Einlegen
Den Skill-Ordner in den Skills-Ordner Ihres Werkzeugs legen, z. B. .claude/skills/. Der Unterordner bleibt dabei.
Benutzen
Die Aufgabe so beschreiben, wie im Beispiel unten. Der Skill springt von selbst an.
Aktuell bleiben
Fragen Sie Ihre KI hin und wieder, ob der Skill noch zur Quelle passt. Wir verlinken auf die Quelle, damit der Stand dort der aktuelle bleibt.
Beispiel
So sieht das aus.
„Die Erfolgsmeldung soll nach einer Bestätigung wirken, aber nicht verspielt.“
Charakter „hochwertig“, etwa 350 bis 600 Millisekunden, ruhige Beschleunigung ohne Überschwingen, Haupteffekt zuerst, Nebeneffekte leicht versetzt.
Passt dazu
Gut zusammen mit.
- handschrift gibt der Seite eine eigene Gestaltung, motion-design der Bewegung dazu den Ton.
- gsap-skills setzt die Regeln mit GSAP technisch um.