claudes-world/plugins

Was macht plugins?

Muss vor dem Schreiben JEGLICHER Animation oder Transition gelesen werden – CSS, JS, SwiftUI/UIKit, Remotion/Video, Framer Motion, GSAP, Canvas oder handgesteuert. Enthält die Bewegungsrichtlinien für das Kombinieren von Animationen (Staffelung, niemals synchronisieren), Federgefühl vs. Timing, additive Animation, Geschwindigkeitsübergabe von Geste zu Animation und Unterbrechbarkeit. Auslöser für: 'animate', 'animation', 'transition', 'fade in', 'slide in', 'easing', 'spring', 'duration', 'keyframes', 'motion design', 'micro-interaction', 'make it feel'.

---

Kernprinzipien

1. Staffeln, nicht synchronisieren – Beginne niemals alle Animationen gleichzeitig. Versetze die Startzeiten, um einen fließenden Bewegungseffekt zu erzeugen.

2. Federgefühl vs. Timing – Verwende Federn (springs) für natürliche, organische Bewegungen (z. B. UI-Elemente, die auf Interaktionen reagieren). Verwende zeitbasierte Animationen für präzise, sich wiederholende Effekte (z. B. Lade-Spinner, Keyframe-Animationen).

3. Additive Animation – Nutze additive Animation, um bestehende Animationen nahtlos zu überschreiben, anstatt sie abrupt zu unterbrechen und neu zu starten. Dies bewahrt das physikalische Gefühl.

4. Geschwindigkeitsübergabe – Wenn eine Geste (z. B. Wischen) in eine Animation übergeht, übergebe die Geschwindigkeit der Geste als Anfangsgeschwindigkeit an die Animation. Dies vermeidet Ruckeln und sorgt für eine kontinuierliche Bewegung.

5. Unterbrechbarkeit – Animationen müssen jederzeit unterbrechbar sein. Eine laufende Animation sollte sofort stoppen und die nächste nahtlos übernehmen können, ohne unerwünschte visuelle Artefakte.

Verwendung in Projekten

• Framer Motion: Nutze staggerChildren für gestaffelte Effekte, spring für natürliche Bewegungen und onDrag für Geschwindigkeitsübergabe.
• GSAP: Verwende timeline mit stagger für gestaffelte Animationen, physics2D Plugin für Feder-Physik und invalidate() für Unterbrechbarkeit.
• SwiftUI: Kombiniere .animation() mit Feder-spring() und nutze .gesture() mit DragGesture für Geschwindigkeitsübergabe.
• CSS: Verwende animation-delay für Staffelung und cubic-bezier() für Federeffekte – beachte jedoch, dass CSS von Haus aus keine Geschwindigkeitsübergabe bietet.

Integration mit KI-Agenten

Diese Datei ist dafür konzipiert, automatisch durch relevante Schlüsselwörter in deiner Anfrage getriggert zu werden. Wenn du einen KI-Agenten (wie Claude Code, Cursor, Codex) nach Animationen fragst, wird der Agent die hier beschriebenen Richtlinien lesen und anwenden, bevor er Code generiert.

Weiterführende Ressourcen

• Animation Principles im Web (MDN)
• Framer Motion – Gesture and Animation
• GSAP – Additive Animation Guide
• Designing with Animations (Material Design)

---

Hinweis: Diese Datei sollte immer vor dem Generieren von animationsbezogenem Code gelesen werden, um konsistente und hochwertige Bewegungseffekte zu gewährleisten.