vmitsaras/apply-kinetic-continuity-motion

Kinetic Continuity Motion anwenden

Zweck

Eine zurückhaltende Bewegungssprache anwenden, die einem Layout ein physisches Gedächtnis verleiht: Elemente bleiben identifizierbar, reagieren auf die Energie des Benutzers und beruhigen sich an einem Punkt, an dem die nächste Entscheidung getroffen werden kann.

Behandeln Sie bereitgestellte Referenzvideos als Belege für eine Designsprache, nicht als Vorlagen, die es zu reproduzieren gilt. Bewahren Sie das vom Benutzer angeforderte Konzept, die Technologie, den Umfang und die Autorisierungsgrenze. Wenden Sie Dateiänderungen nur an, wenn der Benutzer nach einer Implementierung fragt; geben Sie bei Planungs- oder Überprüfungsanfragen Anleitungen zurück, ohne Dateien zu bearbeiten.

Wann diese Fähigkeit angewendet werden sollte

Wenden Sie diese Fähigkeit an, wenn:

• Eine GSAP-Demo oder Weboberfläche Kontinuität über räumliche oder Layout-Zustände hinweg benötigt.
• Die Aufgabe ein Bildfeld, eine Galerie, ein Karussell, einen Kontaktbogen, eine verankerte Vorschau, eine pfadbasierte Sequenz, eine geroutete Gruppe oder zurückhaltende kinetische Typografie umfasst.
• Vorhandene Bewegung sich zusammenhangslos, bei schneller Eingabe abgestanden, übermäßig dekorativ oder unklar in Bezug auf die Objektidentität anfühlt.
• Der Benutzer bereitgestellte Bewegungsreferenzen in eine originelle, barrierefreie und implementierbare Interaktionssprache übersetzen möchte.

Wenden Sie diese Fähigkeit nicht an, wenn:

• Ein einfacher Hover, Fokus, Druck oder eine einfache Deckkraftänderung mit einem gewöhnlichen CSS-Übergang behandelt werden kann.
• Die Anfrage eine nicht zusammenhängende Animationsaufgabe ohne Kontinuitäts- oder räumliches Zustandsproblem ist.
• Die Aufgabe Film, Videobearbeitung oder Charakteranimation betrifft und kein Schnittstellenverhalten.
• Der Benutzer ein umfassendes Barrierefreiheits-Audit benötigt und keine bewegungsspezifische Planung, Implementierung oder Überprüfung.

Zu überprüfende Eingaben

Überprüfen Sie die kleinste relevante Menge verfügbarer Eingaben:

• Die angeforderte Benutzeraufgabe, der Auslöser, das Subjekt, der Startzustand und der Zielzustand.
• Relevante Komponenten, Vorlagen, Stile, Bewegungsdienstprogramme, Tests, Demos und Dokumentation.
• Vorhandene Animationsabhängigkeiten, insbesondere bereits verwendete GSAP-Plugins.
• Vom Benutzer bereitgestellte Videos, Prototypen, Screenshots, Storyboards oder Bewegungsanalysenotizen.
• Responsives Verhalten, Zeiger- und Berührungsverhalten, Tastaturpfade, Fokusverhalten und Anforderungen an reduzierte Bewegung.
• Leistungseinschränkungen wie wiederholte Elemente, Bildgewicht, Geometriemessung und hochfrequente Eingaben.

Gehen Sie nicht davon aus, dass Referenzmedien, GSAP-Plugins oder Projektkonventionen vorhanden sind, wenn sie nicht vorliegen.

Referenzweiterleitung

Lesen Sie references/pattern-catalog.md, wenn Sie ein Bewegungsprimitiv auswählen, Timing und Beschleunigung abstimmen, das Verhalten bei reduzierter Bewegung definieren oder die Natürlichkeit überprüfen.

Der Katalog ist in sich geschlossen. Wenn eine Aufgabe eine herkunftsbezogene Zuordnung oder einen Vergleich mit einem benannten Clip erfordert, überprüfen Sie die in diesem Aufgabenarbeitsbereich bereitgestellten Referenzmedien oder das Bewegungsanalysedokument und übernehmen Sie keine Details aus dieser Fähigkeit.

Kern-Bewegungsvertrag

• Bewahren Sie die Objektidentität durch Positions-, Maßstabs- und Layoutänderungen hindurch.
• Geben Sie jedem Bewegungsbeat eine dominante Richtung.
• Lassen Sie benachbarte Elemente als ein räumliches Feld reagieren, mit zusammenhängender Geschwindigkeit und entfernungsbasiertem Staffeln.
• Reagieren Sie auf direkte Eingaben im nächsten gerenderten Frame. Wenden Sie die Beschleunigung auf die Beruhigung an, nicht auf den Greifpunkt.
• Beschleunigen Sie kurz und verbringen Sie mehr Zeit der Dauer mit dem Abbremsen.
• Überlappen Sie ausgehende und eingehende Zustände genug, um einen toten Frame zu vermeiden.
• Verwenden Sie Maßstab konsistent, um Fokus, Tiefe oder Priorität zu kommunizieren.
• Lösen Sie aktive Passagen in stabile, lesbare Ruhezustände auf.
• Halten Sie ausdrucksstarke Verzerrungen kurz, lokal, reversibel und nicht essentiell.

Bevorzugen Sie Kontinuität gegenüber Effekthascherei. Entfernen Sie Bewegung, die nicht Zustand, Hierarchie, Orientierung oder Rückmeldung erklärt.

Ein primäres Primitiv auswählen

Wählen Sie das Primitiv, das die Zustandsänderung am besten erklärt. Kombinieren Sie mehrere nicht, nur um die visuelle Neuheit zu erhöhen.

• Trägheitsfeld: Eine schwenkbare oder driftende Konstellation, die sich als ein System bewegt.
• Parallele Schienen: Wiederholte Medienspuren mit zurückhaltender Geschwindigkeitsvariation.
• Geroutete Gruppen: Cluster, die sich zwischen sichtbaren Bahnen oder Kategorien bewegen.
• Verankerter Vorschauaustausch: Ein stabiler Index steuert einen begrenzten Vorschaubereich.
• Gekrümmter Zug: Karten leiten Position, Maßstab und Stapelung von einem Pfadfortschrittswert ab.
• Konvergierende Kette: Eine Übersicht biegt sich und skaliert in eine fokussierte Komposition.
• Kontaktbogenauflösung: Behaltene Elemente überbrücken dichte und kuratierte Layouts.
• Begrenzte Textstörung: Anzeigetext wird kurz versetzt und dann sauber wiederhergestellt.

Verwenden Sie gewöhnliche CSS-Übergänge, wenn die Interaktion nur einen einfachen Hover, Fokus, Druck oder eine einfache Deckkraftänderung benötigt.

Arbeitsablauf

1. Bestätigen Sie, ob die Anfrage Planung, Implementierung oder Überprüfung ist, und bewahren Sie diese Grenze.
2. Identifizieren Sie den Auslöser, das Subjekt, den Startzustand, den Zielzustand und die Benutzeraufgabe.
3. Schreiben Sie eine einleitende Bewegungsthese, die erklärt, warum Bewegung existiert.
4. Wählen Sie ein primäres Primitiv aus und definieren Sie seine stabilen Start- und Endkompositionen.
5. Definieren Sie den Zustand der reduzierten Bewegung, bevor Sie die vollständige Choreografie hinzufügen.
6. Legen Sie eine Mikro-, Meso- und Makro-Hierarchie fest. Nicht jedes Element benötigt auf jeder Ebene Bewegung.
7. Implementieren oder spezifizieren Sie direkte Reaktion, koordinierte Reise und eine ruhige Beruhigung.
8. Lassen Sie schnelle Eingaben den aktuell gerenderten Zustand neu ausrichten, anstatt Animationen in die Warteschlange zu stellen.
9. Überprüfen Sie Zeiger, Berührung, Tastatur, Fokus, reduzierte Bewegung, Unterbrechungs- und Fehlerpfade.
10. Überprüfen Sie bei normaler Geschwindigkeit und mit Frame-Schritt oder 0.25x Geschwindigkeit, um Diskontinuitäten und Stapelfehler zu finden.
11. Wenn eine Implementierung angefordert wurde, führen Sie die relevanten Tests oder Überprüfungen des Repositorys durch und melden Sie manuelle Validierungen, die noch ausstehen.

Timing-Signatur

Verwenden Sie die Referenztoken als Ausgangspunkte, passen Sie sie dann moderat an die Reisedistanz und Interaktionshäufigkeit an:

• Sofortige Bestätigung: etwa 90ms.
• Hover oder Fokus: etwa 180ms.
• Kompakte Zustandsänderung: etwa 320ms.
• Layout-Neukonfiguration: etwa 520ms.
• Große räumliche Szene: etwa 780ms, normalerweise auf unter 1000ms begrenzt.
• Räumliches Staffeln: 35–60ms, geordnet nach Entfernung von der Bewegungsquelle.

Bevorzugen Sie power3.out für standardmäßige Beruhigung, power4.out für einen stärkeren editorialen Auftritt und power2.inOut für die Neukonfiguration bekannter Zustände. Verwenden Sie lineare Bewegung nur, wenn der Fortschritt Scrollen, Ziehen oder einer anderen kontinuierlichen Eingabe folgt.

Machen Sie elastische oder Überschwing-Beschleunigung nicht zur Systemsignatur. Wenn ein Loslass-Schnappen ein Überschwingen benötigt, halten Sie es unter etwa 3%.

Implementierungsinvarianten

• Verwenden Sie CSS für einfache Zustandsübergänge und GSAP-Zeitachsen für koordinierte Sequenzen.
• Verwenden Sie GSAP Flip für echte Layoutänderungen, wenn die Kontinuität gemeinsam genutzter Elemente wertvoll ist.
• Verwenden Sie Draggable nur, wenn Ziehen eine echte Interaktion ist und gleichwertige sichtbare Steuerelemente vorhanden sind.
• Verwenden Sie ScrollTrigger nur für eine echte Scroll-Erzählung; führen Sie kein Scroll-Jacking ein.
• Leiten Sie gekrümmte Bewegungseigenschaften von einem normalisierten Fortschrittswert ab, sodass x, y, Maßstab, Deckkraft und Stapelung nicht auseinanderdriften.
• Verwenden Sie overwrite: "auto", quickTo() oder eine fortschrittsgesteuerte Zeitachse für unterbrechbare Bewegung.
• Animieren Sie zuerst transform und opacity.
• Stapeln Sie DOM-Lesevorgänge, cachen Sie Geometrie und vermeiden Sie Messungen innerhalb von hochfrequenten Updates.
• Wenden Sie will-change nur während aktiver Bewegung an und entfernen Sie es nach großen einmaligen Sequenzen, wo praktikabel.
• Halten Sie endgültige Inhalte verfügbar, wenn JavaScript fehlschlägt. Erfordern Sie keine Auftrittszeitachse, um wesentliche Inhalte zu enthüllen.

Befolgen Sie die bestehenden HTML-, CSS-, JavaScript-, Asset- und Demo-Dokumentationskonventionen des Repositorys. Fügen Sie keine Animationsabhängigkeit hinzu oder ersetzen Sie sie ohne Autorisierung des Benutzers.

Interaktions- und Barrierefreiheitsinvarianten

• Gleichen Sie Hover mit Fokus und Klick- oder Tippverhalten ab.
• Halten Sie die Fokusgestaltung sichtbar und mindestens so deutlich wie Hover.
• Bewahren Sie die semantische Quellreihenfolge, wenn visuelle Elemente räumlich werden.
• Halten Sie eine intakte lesbare Textquelle für geteilte oder gestörte Typografie.
• Machen Sie Ziehen, Wischen und Rad zu optionalen Eingabemethoden; stellen Sie Vorher- und Nächst-Steuerelemente oder einen anderen Tastaturpfad bereit.
• Brechen Sie den Impuls ab, wenn eine neue Geste beginnt.
• Halten Sie kontinuierliche Bewegung während sinnvoller Interaktion und wenn die Seite nicht sichtbar ist, an.
• Für prefers-reduced-motion: reduce: Entfernen Sie Trägheit, Orbiting, Autoplay, Zoom-Reise und Textstörungen. Bewahren Sie Inhalte und Auswahl mit sofortigen Änderungen oder einem kurzen Deckkraft-Übergang.
• Beanspruchen Sie keine Barrierefreiheitskonformität ohne Tests.

Überprüfungsstandard

Markieren Sie Bewegung, wenn sie:

• Objekte teleportiert oder ersetzt, die identifizierbar bleiben sollten;
• zufälliges Staffeln ohne räumliche Quelle verwendet;
• abgestandene Hover-Zustände in die Warteschlange stellt;
• in ständiger Bewegung neben Lesestoff bleibt;
• Maßstab dekorativ statt bedeutungsvoll macht;
• auf Ziehen, Hover oder Animation angewiesen ist, um wesentliche Inhalte zu enthüllen;
• bei jedem Animationsframe Layout-Arbeit erzeugt;
• einen sticky Besitzer statt einer inneren Szenenebene transformiert;
• länger oder aufwändiger ist, als die Zustandsänderung rechtfertigt.

Ausgabeformat

Geben Sie das modusgerechte Ergebnis zurück:

Planung

• Bewegungsthese und ausgewähltes Primitiv.
• Start-, Übergangs- und beruhigte Zustände.
• Bewegungshierarchie, Timing, Unterbrechung und Verhalten bei reduzierter Bewegung.
• Hinweise zu Barrierefreiheit, Leistung, Implementierung und Validierung.

Implementierung

• Zusammenfassung des angewendeten Bewegungsverhaltens.
• Geänderte Dateien und die Rolle jeder Änderung.
• Ausgewähltes Primitiv, Bewegungshierarchie, Ergebnis bei reduzierter Bewegung, Barrierefreiheitsverhalten und Leistungsstrategie.
• Durchgeführte Tests oder Überprüfungen und etwaige manuelle Überprüfungen, die noch ausstehen.

Überprüfung

Priorität	Problem	Nachweis	Empfehlung

Melden Sie auch das abgeleitete Primitiv, die Bewegungshierarchie, das Ergebnis bei reduzierter Bewegung, das Barrierefreiheitsverhalten, die Leistungsstrategie und etwaige Nachweisgrenzen.

Qualitätsmaßstab

Die Aufgabe ist nur abgeschlossen, wenn:

• Das gewählte Primitiv die Zustandsänderung klarer erklärt, als ein einfacherer Übergang es tun würde.
• Objektidentität, Richtung, Reaktion, Unterbrechung, Beruhigung und Ruhe kohärent sind.
• Zustände mit voller Bewegung und reduzierter Bewegung denselben Inhalt und dasselbe Aufgabenergebnis bewahren.
• Zeiger-, Berührungs-, Tastatur- und Fokusverhalten, wo zutreffend, gleichwertige nutzbare Pfade haben.
• Hochfrequente Bewegung wiederholte Layoutmessungen und abgestandene Warteschlangenzustände vermeidet.
• Überprüfungsergebnisse konkrete Schnittstellenzustände, Code oder beobachtbares Verhalten anführen.
• Implementierungsarbeiten den Projektkonventionen folgen und eine angemessene Validierung beinhalten.

Randfälle

• Wenn das Projekt GSAP nicht verwendet, bewahren Sie seinen vorhandenen Stack, es sei denn, der Benutzer bittet um das Hinzufügen von GSAP; drücken Sie dieselben Prinzipien mit den verfügbaren Plattform-APIs aus oder erstellen Sie einen Plan.
• Wenn Referenzmedien nicht verfügbar sind, verwenden Sie den gebündelten Musterkatalog und legen Sie offen, dass kein Clipspezifischer Vergleich durchgeführt wurde.
• Wenn mehrere Zustandsänderungen unterschiedliche Primitive benötigen, wählen Sie ein primäres Primitiv pro Zustandsänderung und halten Sie gemeinsame Timing- und physikalische Regeln konsistent.
• Wenn Animation fehlschlägt oder JavaScript nicht verfügbar ist, müssen wesentliche Inhalte und Steuerelemente nutzbar bleiben.
• Wenn ein sticky- oder scrollbesessenes Element scheinbar transformiert werden muss, animieren Sie eine innere Szenenebene anstelle des sticky-Besitzers.
• Wenn ein Konzept mit reduzierter Bewegung, Tastatur- oder Inhaltszugriffsanforderungen kollidiert, bewahren Sie das Aufgabenergebnis und die Zustandsbeziehung, während Sie die Choreografie vereinfachen.

Verwandte Fähigkeiten

• motion-behavior-planner für einen bibliotheksneutralen Bewegungsplan ohne Implementierung.
• motion-experience-director für ein breiteres, seitenweites Bewegungssystem.
• motion-animation-accessibility-audit für ein umfassendes Bewegungs-Barrierefreiheits-Audit.
• creative-technologist für breitere Frontend-Machbarkeit und progressive-Enhancement-Planung.