/ Verzeichnis / Playground / Motion.dev Animations Skill
← Alle Server ↗ GitHub
● Community 199-biotechnologies ⚡ Sofort

Motion.dev Animations Skill

von 199-biotechnologies · 199-biotechnologies/motion-dev-animations-skill

Beschreiben Sie den gewünschten Antrag. Holen Sie sich Motion.dev-Code, der mit mehr als 60 Bildern pro Sekunde mit Federphysik, reduzierter Bewegungsunterstützung und ohne Layoutverschiebung läuft.

Motion-Dev-Animations-Skill ist ein Claude-Code-Skill, der Animationen in Produktionsqualität mit Motion.dev (ehemals Framer Motion) schreibt. Es wird bei Erwähnungen von Animationen, Bildlaufeffekten, Motion.dev, Federphysik usw. automatisch aktiviert und gibt Code aus, der auf 60 fps+, <50 KB Bundle-Auswirkungen, vollständige Zugänglichkeit (bevorzugt reduzierte Bewegung) und null CLS abzielt. Behandelt Eingangsanimationen, Scrolleffekte, Gesteninteraktionen, Mikrointeraktionen und Layoutanimationen.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

motion-dev-animations-skill.replay ▶ bereit
0/0

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

Anwendungsfälle

Praxisnahe Nutzung: Motion.dev Animations Skill

Fügen Sie einen Helden-Einblend-Eingang mit Staffelung hinzu

👤 Frontend-Entwickler optimieren Landingpages ⏱ ~15 min beginner

Wann einsetzen: Ihr Held fühlt sich statisch an und Sie möchten eine ausgefeilte Ladeanimation.

Ablauf
  1. Beschreiben Sie den Effekt
    Fügen Sie dem H1, der Unterüberschrift und dem CTA des Helden einen gestaffelten Einblend-Eingang hinzu. 60 ms Staffelung.✓ Kopiert
    → Motion.dev-Code mit motion.div, Übergangsfeder, Verzögerung über Staffelung
  2. Fallback mit reduzierter Bewegung
    Stellen Sie sicher, dass Preferred-Reduced-Motion die Animation sauber überspringt.✓ Kopiert
    → useReducedMotion-Hook oder CSS-Medienabfrage angewendet

Ergebnis: Ein Held, der sich lebendig anfühlt, ohne auf Zugänglichkeit zu verzichten.

Fallstricke
  • Animierende Eigenschaften, die das Layout auslösen (Breite, oben) — Verwenden Sie stattdessen transform (übersetzen/skalieren) – GPU-beschleunigt, kein CLS
Kombinieren mit: magic-ui-mcp

Erstellen Sie durch Scrollen ausgelöste Enthüllungen und Parallaxe

👤 Designorientierte Frontend-Entwickler ⏱ ~25 min intermediate

Wann einsetzen: Ihre lange Zielseite benötigt Abschnitte, die sich beim Scrollen entfalten.

Ablauf
  1. Auf der Schriftrolle enthüllen
    Animieren Sie jeden Abschnitt, wenn er in das Ansichtsfenster eintritt (einmal, 30 %-Schwellenwert).✓ Kopiert
    → useInView mit einmal + Betrag
  2. Parallaxe im Vordergrund
    Fügen Sie einen subtilen Parallaxenversatz für die dekorative Vordergrund-SVG hinzu.✓ Kopiert
    → useScroll + useTransform ordnen scrollYProgress zu y zu

Ergebnis: Scroll-Erlebnis, das ohne Ablenkung Tiefe verleiht.

Fallstricke
  • Parallaxe, die Reisekrankheit verursacht — Halten Sie die Versätze klein und überspringen Sie sie vollständig unter „Preferred-Reduced-Motion“.

Bauen Sie eine ziehbare Magnetkarte mit Schwebelift

👤 Interaktionsdesigner / Frontend-Entwickler ⏱ ~20 min intermediate

Wann einsetzen: Die Produktkarte benötigt Mikrointeraktionspolitur.

Ablauf
  1. Schwebelift
    Beim Schweben: 4 Pixel anheben, subtile Schattenskala; Zurück in den Urlaub.✓ Kopiert
    → whileHover mit Frühling; GPU-freundliche Transformationen
  2. Magnetischer Widerstand
    Machen Sie es mit elastischen Grenzen ziehbar, DragElastic 0,15.✓ Kopiert
    → Drag + DragConstraints + DragElastic richtig eingestellt

Ergebnis: Eine entzückende Karteninteraktion ohne die Perf-Kosten.

Animieren Sie die Neuordnung der Liste mit dem Layout

👤 Frontend-Entwickler erstellen Taskboards/Galerien ⏱ ~25 min intermediate

Wann einsetzen: Die Neuordnung Ihrer Liste wirkt irritierend. Sie wollen reibungslose Übergänge.

Ablauf
  1. Aktivieren Sie das Layout für Elemente
    Fügen Sie den Listenelementen Layoutanimationen hinzu. animieren Sie auch den Ein-/Ausstieg.✓ Kopiert
    → <motion.li-Layout> + AnimatePresence
  2. Reduzierte Bewegung
    Deaktivieren Sie Layout-Animationen unter Preferred-Reduced-Motion.✓ Kopiert
    → Bedingt angewendet; sofortige Nachbestellung für Benutzer, die danach gefragt haben

Ergebnis: Nachbestellungen, die sich körperlich anfühlen, aber die Vorlieben der Benutzer respektieren.

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

motion-dev-animations-skill + magic-ui-mcp

Magic UI für vorgefertigte Komponenten, motion.dev für die benutzerdefinierten Teile

Benutzen Sie das Laufschriftfeld von Magic UI für Logos; motion.dev für eine benutzerdefinierte Scroll-Parallaxe unten.✓ Kopiert
motion-dev-animations-skill + claude-design-auditor-skill

Prüfen Sie den Antrag auf Unterstützung bei reduzierter Bewegung

Führen Sie nach dem Hinzufügen von Animationen eine Prüfung mit „scope=motion“ durch, um Regressionen mit reduzierter Bewegung zu erkennen.✓ Kopiert
motion-dev-animations-skill + claude-code-design-skills

Figma-to-Code + Animationen in einem Fluss

Konvertieren Sie den Figma-Rahmen. Fügen Sie dann die angegebenen Hover- und Eintrittsanimationen hinzu.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
motion-dev (SKILL) describe the animation (element + intent + constraints) Wann immer Sie Animationscode benötigen, insb. mit Zugänglichkeits- und Leistungseinschränkungen 0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
Keiner
Tokens pro Aufruf
Klein für Code; groß nur, wenn Sie komplexe Komponenten entsorgen
Kosten in €
Frei
Tipp
Beschreiben Sie die Animationsabsicht genau – „Einblenden mit 60 ms Staffelung, 200 ms Dauer“ anstelle von „schön machen“.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Keiner
Datenabfluss: Keine aus der Fertigkeit; Netzwerk nicht beteiligt

Fehlerbehebung

Häufige Fehler und Lösungen

Jank an der Schriftrolle

Überprüfen Sie, ob Sie Transformationen und keine Layout-Requisiten (Breite/Oben) animieren. Verwenden Sie Will-Change sparsam.

Prüfen: Chrome DevTools → Performance → layout shift count
Animation wird bei reduzierter Bewegung ignoriert

Mit useReducedMotion umschließen und die Animationsvarianten kurzschließen.

Prüfen: System → Motion preferences → reduce motion; reload
Großes Bündel nach dem Hinzufügen von Bewegung

Importieren Sie nur das, was Sie aus „Bewegung/Reaktion“ benötigen; Vermeiden Sie es, alles erneut zu exportieren.

Prüfen: Bundle analyzer on the chunks

Alternativen

Motion.dev Animations Skill vs. andere

AlternativeWann stattdessenKompromiss
magic-ui-mcpSie möchten vorgefertigte animierte Komponenten, keine benutzerdefinierten BewegungenWeniger kundenspezifisch, schneller umsetzbar
cc-frontend-skillSie möchten eine allgemeine Frontend-Anleitung, nicht speziell Motion.devNicht auf Animation ausgerichtet
excalidraw-skillSie möchten Diagramme, keine WebanimationenAnderes Problem

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen