Was macht Empro Labs Animation Skill?
Web-Motion-Design-Skill. Zwei Schritte: zuerst das Bewegungsspezifikation (ANIMATION.md) schreiben, dann den Code.
ANIMATION.md ist eine Datei, die im Projekt gespeichert wird. Sie kann von Hand bearbeitet, in anderen Projekten wiederverwendet und von anderen Tools gelesen werden.
Pfade in dieser Datei sind relativ zum Skill-Ordner (~/.claude/skills/empro-labs-animation-skill/). Verwende absolute Pfade, wenn du die Skripte ausführst.
Anfrage
Die Anfrage des Benutzers aus dem Slash-Befehl:
$ARGUMENTS
Wenn die obige Anfrage leer ist, stelle eine Frage: Was soll sich bewegen, und wohin? Dann starte Phase A.
Kernablauf
Phase A Eingabe verstehen ──→ Phase B ANIMATION.md schreiben (Benutzer genehmigt) ──→ Phase C Implementieren ──→ Phase D Audit
Startprüfungen (in dieser Reihenfolge)
- Hat das Projekt
ANIMATION.md? → Wiederverwenden, bearbeiten oder neu erstellen, wie der Benutzer es wünscht. - Hat es
DESIGN.md(vom Web-Design-Skill)? → Farben, Schriftarten und Stilrichtung übernehmen. Die Bewegung konsistent dazu halten. - Hat es Motion-Tokens (
--motion-*Variablen oder eine Motion-Datei)? → Wiederverwenden. Keine neuen Werte erfinden. - Hat es bereits Animationscode? → Zuerst
python scripts/analyze_motion.py <projekt> --inventoryausführen, damit du weißt, was existiert, bevor du Änderungen vorschlägst. - Nichts davon → Phase A.
Phase A: Verstehen
Eingaben können kombiniert werden:
| Eingabe | Was zu tun ist |
|---|---|
| Referenz-URL | Führe python scripts/capture_motion.py --url [URL] --output ./motion-capture aus. Lies capture.json für reale Dauern, Easings, animierte Eigenschaften und scroll-verknüpfte Effekte. Verwende top.png für die Stimmung. |
| Video oder Screenshot der Bewegung | Beschreibe den Auslöser, die ungefähre Dauer und das Easing-Gefühl. Bestätige die Zahlen mit dem Benutzer. |
| Schlüsselwörter („snappy“, „cinematic“) | Ordne sie einer Persönlichkeit in references/motion-personalities.md zu. |
| Markenname („wie Linear“) | Erfasse die Live-Website, wenn sie erreichbar ist. Wenn nicht, frage nach einer Referenz-URL. Rate die Bewegung nicht aus dem Gedächtnis einer Marke. |
| Vorhandener Code | Führe das Inventarskript aus und behalte, was funktioniert. |
A1. Persönlichkeit (höchstens zwei Fragen stellen)
- Gefühl: ruhig, schnell, verspielt oder filmisch?
- Seitentyp: inhaltslastig (Bewegung bleibt dezent) oder Präsentationsseite (Bewegung kann führen)?
Zeige ein oder zwei Kandidaten aus references/motion-personalities.md, jeweils mit einer einzeiligen Begründung. Der Benutzer bestätigt.
A2. Interaktionsstufe (erforderlich, nicht überspringen)
Siehe references/interaction-tiers.md.
| Stufe | Erlebnis | Werkzeuge |
|---|---|---|
| L1 Micro | Hover, Fokus, Drücken, Umschalter, kleine Zustandsänderungen | Nur CSS-Übergänge |
| L2 Choreografiert | Ein- und Ausblenden, gestaffelte Listen, Modale, Drawer, Routenwechsel, Ladeanimationen | CSS-Keyframes, Web Animations API oder GSAP-Timeline |
| L3 Scroll-Geschichte | Scroll-verknüpfte Enthüllungen, Pin-Effekte, Parallax, Abschnitte gesteuert von einer Timeline | GSAP + ScrollTrigger, oder CSS-Scroll-gesteuerte Animationen mit einem Fallback |
L3 ist auf zwei fixierte Abschnitte pro Seite begrenzt. Jeder Seitenabschnitt gibt seine Stufe in der Spezifikation an.
A3. Stack
Überprüfe package.json und das Framework (plain HTML, React, Vue, Svelte, Next.js). Wähle Werkzeuge mit references/tooling.md. Standard: CSS und die Web Animations API. Füge GSAP nur für L3 oder komplexe Timelines hinzu.
Phase B: ANIMATION.md schreiben
Folge references/animation-md-template.md. Zehn Abschnitte:
- Bewegungspersönlichkeit & Prinzipien
- Motion-Tokens (Dauern, Easings, Distanzen)
- Choreografie-Inventar (Tabelle: Element, Auslöser, Eigenschaft, Dauer, Easing, Verzögerung, Reduced-Motion-Fallback)
- Komponenten-Animation (Standard, Hover, focus-visible, aktiv, deaktiviert, Ein, Aus)
- Scroll-Verhalten
- Seiten- & Routenübergänge
- Performance-Budget
- Barrierefreiheit
- Dos und Don'ts (mindestens 8 Einträge, davon mindestens 5 Don'ts)
- Abhängigkeiten
Zeige eine Zusammenfassung an und warte auf die Genehmigung des Benutzers. Speichere dann ANIMATION.md im Projektstammverzeichnis.
Phase C: Implementieren
- Tokens überall. Jede Dauer und jedes Easing ist eine Variable, wie
var(--motion-duration-base). Keine magischen Zahlen in Komponenten. - Nur günstige Eigenschaften animieren.
transformundopacityzuerst.clip-pathundfiltersind bei kleinen Elementen erlaubt. Niemalswidth,height,top,left,marginoderpaddinganimieren, es sei denn, ANIMATION.md hält eine Ausnahme mit Begründung fest. - Reduzierte Bewegung ist Teil der ersten Version, nicht ein späterer Patch. Bewegung wird entfernt, Zustandsänderungen bleiben. Die Distanz-Tokens gehen unter reduzierter Bewegung auf Null, und der
prefers-reduced-motion-Block intemplates/motion-tokens.csszeigt das Muster. - Verwende die Startdateien, wenn das Projekt noch keine Bewegungsschicht hat:
templates/motion-tokens.cssundtemplates/reveal.js. - Schleifen brauchen einen Ausweg. Jede
infinite-Animation stoppt oder vereinfacht sich unter reduzierter Bewegung. Jede Schleife, die länger als fünf Sekunden läuft, erhält eine Pausensteuerung. - JavaScript aufräumen. GSAP-Timelines und ScrollTrigger beim Unmounten entfernen (
gsap.context()oderuseGSAPverwenden). Observer trennen und Listener entfernen. - Bewegung an einem Ort halten. Tokens in eine Datei und Rezepte in kleine Module. Timing-Werte nicht über Komponenten verstreuen.
Phase D: Audit
- Führe das statische Audit durch:
python scripts/analyze_motion.py <projekt> --strict. Korrigiere jeden Fehler. Überprüfe jede Warnung und behebe sie oder begründe sie in ANIMATION.md. - Führe die Browser-Checks durch:
- Aktiviere reduzierte Bewegung (DevTools → Rendering →
prefers-reduced-motion: reduce). Bestätige, dass keine Bewegung mehr vorhanden ist und der Inhalt noch sichtbar ist. - Drossele die CPU (4×) und zeichne das Performance-Panel auf, während die Animation läuft. Suche nach langen Frames.
- Überprüfe eine Telefonbreite (390 px). Suche nach horizontalem Überlauf von animierten Elementen.
- Aktiviere reduzierte Bewegung (DevTools → Rendering →
- Arbeite
references/quality-checklist.mddurch. - Berichte, was bestanden hat, was fehlgeschlagen ist und was du behoben hast.
Rote Linien (jeder Punkt muss bestehen)
- Jede Animation in ANIMATION.md hat einen Reduced-Motion-Fallback.
- Es werden nur
transform,opacityund dokumentierte Ausnahmen animiert. - Alle Dauern und Easings stammen aus Tokens.
- Jede
infinite-Schleife respektiert reduzierte Bewegung, und jede Schleife länger als fünf Sekunden hat eine Pausensteuerung. - Nichts blinkt mehr als dreimal pro Sekunde.
- Interaktives Feedback erscheint innerhalb von 100 ms. Mikro-Animationen dauern 250 ms oder weniger. Ein- und Routenübergänge dauern 500 ms oder weniger.
- Hover-Only-Feedback hat einen Tastaturfokus-Zustand und ein Touch-Äquivalent.
- Bei Breiten von 600 px oder weniger verursacht kein animiertes Element horizontales Scrollen, und fixierte Abschnitte sind deaktiviert oder vereinfacht.
- JavaScript-Animationen werden beim Unmounten aufgeräumt.
Referenzindex
Lies nur die Dateien, die die aktuelle Phase benötigt. Lade nicht alle.
| Datei | Inhalt | Lesen bei |
|---|---|---|
references/animation-md-template.md | ANIMATION.md-Ausgabevorlage (10 Abschnitte) | Phase B |
references/motion-principles.md | Warum und wann animieren, Timing- und Easing-Regeln | Phase A und B |
references/interaction-tiers.md | L1-, L2- und L3-Stufendefinitionen mit Code-Mustern | Phase A2 und B |
references/motion-personalities.md | Vier Persönlichkeitsvoreinstellungen mit Token-Werten | Phase A1 und B |
references/tooling.md | CSS vs. WAAPI vs. GSAP vs. Motion vs. View Transitions vs. Lottie | Phase A3 |
references/component-recipes.md | Button, Card, Accordion, Modal, Drawer, Toast, Tabs, Loader | Phase C |
references/gsap-recipes.md | GSAP-Timelines, ScrollTrigger, matchMedia, React-Bereinigung | Phase C (nur GSAP) |
references/scroll-patterns.md | Enthüllung, Fortschrittsbalken, Sticky-Stack, Parallax, horizontales Scrollen | Phase B (Scroll) und C |
references/performance.md | Frame-Budget, compositor-freundliche Regeln, Mobile-Downgrade | Phase B und D |
references/accessibility.md | Reduzierte Bewegung, WCAG-Bewegungskriterien, vestibuläre Auslöser | Phase B und D |
references/quality-checklist.md | 100-Punkte-Audit-Checkliste | Phase D |
Skripte
| Skript | Verwendung | Benötigt |
|---|---|---|
scripts/analyze_motion.py | Statisches Audit von CSS und JS eines Projekts. Findet Layout-Animation, transition: all, Endlosschleifen, lange Dauern und fehlende Reduced-Motion-Behandlung. --inventory listet die vorhandenen Timing-Werte auf. | Python 3 (nur Standardbibliothek) |
scripts/capture_motion.py | Zeichnet deklarierte und laufende Animationen auf einer Live-URL auf, scrollt die Seite und prüft, was mit reduzierter Bewegung noch läuft. Schreibt capture.json und top.png. | Python 3, pip install playwright, python -m playwright install chromium |
Beide Skripte akzeptieren --help.
Vorlagen
| Datei | Verwendung |
|---|---|
templates/motion-tokens.css | Token-Variablen, Basis-Keyframes, Enthüllungsregeln und der Reduced-Motion-Block. In das Projekt kopieren. |
templates/reveal.js | Abhängigkeitsfreie Scroll-Enthüllung mit IntersectionObserver, die reduzierte Bewegung respektiert. |
Sprache
Schreibe ANIMATION.md und die Zusammenfassungen in der Sprache des Benutzers. Behalte CSS, JavaScript und Token-Namen auf Englisch.
Fallback-Kette
- Erfassungsskript schlägt fehl (kein Playwright oder die Website blockiert den Browser) → frage nach einem Screenshot oder einer kurzen Bildschirmaufnahme und baue daraus die Beschreibung.
- Die Referenz verwendet eine Animationsbibliothek, die du nicht identifizieren kannst → sage dies und frage, ob das Gefühl oder die exakte Bewegung nachgebildet werden soll.
- Gar keine Eingabe → stelle eine Frage zum Gefühl, verwende dann die ruhige Persönlichkeit.