Craft Frontend Motion

Was macht Craft Frontend Motion?

Entwickle Motion als Teil der Produktinteraktion, nicht als Dekoration, die darauf aufgeklebt wird. Ermittle den tatsächlichen Render-Eigentümer, wähle die kleinste geeignete Technik, bewahre die Zustandssemantik und überprüfe das Ergebnis in einem Live-Browser.

Workflow

1. Überprüfe das Ziel, bevor du eine Implementierung vorschlägst.
   • Finde die tatsächliche Route, Komponente, Styles, Zustands-Eigentümer, Ereignis-Eigentümer und den vorhandenen Animations-Stack.
   • Lies die Projektanweisungen und bewahre nicht zusammenhängende Änderungen.
   • Wenn der Benutzer um eine vorherige Diskussion bittet, halte bei einem konkreten Motion-Pflichtenheft an, bis die Zustimmung erfolgt.
2. Definiere den Motion-Vertrag.
   • Gib den Auslöser, Start- und Endzustände, Dauer, Easing oder Spring, Unterbrechungsverhalten, Wiederholungsverhalten, Schichtung und das Ergebnis bei reduzierter Bewegung an.
   • Trenne den Geschäftszustand vom visuellen Feedback. Eine Löschaktion, Navigation oder Formularübermittlung darf nicht von einem ornamentalen Zeitstrahl abhängen, es sei denn, das Produkt verlangt dies ausdrücklich.
3. Wähle das Quellmaterial aus.
   • Führe python3 scripts/query_catalog.py --need "<Effektbeschreibung>" --top 4 aus.
   • Lies references/motion-routing.md für die Technikauswahl.
   • Überprüfe die aktuelle offizielle README des ausgewählten Repositories, den relevanten Quellcode, die Abhängigkeits-/API-Version und die Lizenz, bevor du Code kopierst oder eine Abhängigkeit hinzufügst. Behandle die Metadaten des Katalogs als eine datierte Routing-Momentaufnahme, nicht als dauerhafte Wahrheit.
4. Wähle einen Einführungsmodus.
   • Bevorzuge den installierten Animations-Stack des Zielprojekts, wenn er den Vertrag sauber erfüllen kann.
   • Kopiere und passe eine kleine Komponente nur an, wenn ihr Code und ihre Lizenz dies erlauben; entferne Demo-Shell-Annahmen und nicht benötigte Abhängigkeiten.
   • Füge eine Bibliothek hinzu, wenn ihr Laufzeitmodell die Komplexität oder das Risiko wesentlich reduziert.
   • Extrahiere die Technik und nicht das Paket, wenn ein Repository alt, Framework-unpassend oder zu schwer ist.
5. Implementiere das kleinste kohärente Motion-System.
   • Halte Timing und Easing zentralisiert.
   • Räume RAF-Schleifen, Beobachter, Ereignishandler, Leinwände, Zeitachsen, Texturen und GPU-Ressourcen auf.
   • Behandle Neu-Montagen, schnelle wiederholte Eingaben, Unterbrechungen, Routenwechsel, Größenänderungen, versteckte Tabs und React Strict Mode.
   • Trenne Browser-only-Code in SSR-Anwendungen korrekt und lade schwere visuelle Engines nach Möglichkeit lazy.
6. Überprüfe mit references/quality-gates.md.
   • Führe gezielte statische Prüfungen und Tests durch.
   • Teste die reale Laufzeit in breiten Desktop-, mittleren/Tablet- und mobilen Größen.
   • Überprüfe die Kontinuität von Übergängen, die endgültige Geometrie, Konsolenfehler, horizontalen Überlauf, Eingabeverhalten, reduzierte Bewegung und realistische Leistung.
7. Berichte das Ergebnis.
   • Beginne damit, was jetzt funktioniert.
   • Nenne die ausgewählte Technik oder das Quellrepository und warum es gepasst hat.
   • Gib an, was überprüft wurde und verbleibende Einschränkungen ehrlich an.

Auswahlregeln

• Verwende CSS-Transitionen/Keyframes für eine kleine Anzahl von zusammengesetzten Eigenschaften und einfachen deterministischen Zuständen.
• Verwende Motion für React-Präsenz, gemeinsames Layout, Gesten, Werte und koordinierte Komponentenübergänge.
• Verwende React Spring für unterbrechbare Physik, bei der Geschwindigkeitskontinuität und natürliche Reaktion wichtiger sind als ein fester Zeitstrahl.
• Verwende GSAP für explizite mehrstufige Zeitachsen, dichte Orchestrierung, SVG/Pfad-Arbeit, Scroll-Choreografie oder imperative Integration.
• Verwende Anime.js für kompaktes DOM/SVG/Objekt/Canvas-Tweening und abgestufte generative Effekte außerhalb einer React-spezifischen Abstraktion.
• Verwende Disintegrate nur als Technik/Referenz für DOM-Schnappschuss-Partikulierung; erwarte html2canvas-Genauigkeitsgrenzen und modernisiere seinen Lebenszyklus.
• Verwende tsParticles für konfigurierbare Umgebungspartikel, Konfetti, Feuerwerk und Hintergründe; bezeichne es nicht fälschlicherweise als präzise DOM-Zerlegung.
• Verwende PixiJS für große 2D-Partikelanzahlen, Filter, Sprite-Felder, shader-getriebene 2D-Effekte und explizite GPU-Ressourcenkontrolle.
• Verwende React Bits, Magic UI oder Motion Primitives als Quellsammlungen. Überprüfe die einzelne Komponente, da Abhängigkeiten, Rendering-Kosten und Qualität variieren.

Produktleitplanken

• Bewahre räumliche Kausalität: Motion sollte erklären, woher ein Objekt kam, wohin es ging oder was sich geändert hat.
• Bevorzuge transform und opacity; animiere Layouteigenschaften nur, wenn nachgewiesen ist, dass die Kosten akzeptabel sind.
• Verstecke niemals ein kaputtes Layout hinter Motion.
• Vermeide gleichzeitige Umgebungs-, Scroll-, Hover- und Eintrittsanimationen, die um Aufmerksamkeit konkurrieren.
• Sorge für gleichwertiges Tastaturverhalten und erhalte die Fokus-Semantik.
• Respektiere prefers-reduced-motion; ersetze Bewegung durch eine sofortige Zustandsänderung oder eine zurückhaltende Überblendung.
• Behaupte keine Glätte allein durch Code-Inspektion. Überprüfe auf dem gerenderten Pfad und berichte den getesteten Umfang.
• Ändere keine Proxy-/Routing-Regeln oder nicht zusammenhängende lokale Umgebungskonfigurationen, es sei denn, der Benutzer autorisiert dies ausdrücklich im aktuellen Durchgang.

Ressourcen

• references/repositories.json: datierte Katalog der zehn Quell-Repositories, Lizenzen, Stärken, Risiken und Quell-Einstiegspunkte.
• references/motion-routing.md: Entscheidungsleitfaden und produktreife Architekturmuster.
• references/quality-gates.md: Checkliste für Implementierung und Live-Visual-Verifizierung.
• scripts/query_catalog.py: Validiere und durchsuche den Repository-Katalog anhand von natürlichsprachlichen Anforderungen oder Tags.