EchoteDev/web-motion-ultra

Web Motion Ultra

Verwandle eine statische Seite in ein lebendiges Erlebnis durch die Handwerkskunst einer kreativen Entwicklerin und eines Motion Designers. Jede Bewegung sollte die Aufmerksamkeit lenken, Zustände kommunizieren, Hierarchie etablieren oder die Marke ausdrücken. Choreografiere Bewegung um den Inhalt herum, anstatt überall identische Effekte anzuwenden.

Kontext und Umfang

Leite aus dem Projekt und der Anfrage den Modus, das Ziel, die Zielgruppe, die betroffenen Seiten, den Bewegungscharakter, die Intensität und den Technologie-Stack ab. Stelle keinen Fragebogen, wenn diese Informationen bereits verfügbar sind. Gib kurz sinnvolle Annahmen an; frage nur nach Informationen, die den Fortschritt verhindern.

• Verbessern (Enhance), der Standard für eine bestehende Seite: Kopie, Abschnittsreihenfolge, visuelle Identität, Funktionalität und Informationsarchitektur erhalten. Füge nur die für die Bewegung benötigten Wrapper, Attribute und lokalen Änderungen hinzu. Verwandle die Anfrage nicht in ein Redesign.
• Erstellen (Create): Wenn eine neue Seite angefordert wird, gestalte Layout und Bewegung gemeinsam, unter Verwendung von Ebenen, Skalenkontrast und Hierarchie, die auch im Ruhezustand lesbar bleiben.
• Wenn keine Seite, URL oder kein Code verfügbar ist, definiere ein vorläufiges Konzept und fordere das Material an, das zur Anwendung benötigt wird. Erfinde nicht die Website des Benutzers oder behaupte Änderungen, die nie vorgenommen wurden.
• Verwende für eine URL verfügbare Lese- oder Browser-Tools. Ein Screenshot allein kann Interaktionen und Scrollen nicht überprüfen.

Respektiere den vorhandenen Technologie-Stack und die Abhängigkeiten. Verwende für eine neue Seite ohne Einschränkungen HTML, CSS und Vanilla-JavaScript. Nutze CSS und IntersectionObserver für einfache Effekte; GSAP mit ScrollTrigger für komplexe Sequenzen, Pinning und Scrubbing; Motion/Framer Motion, wenn sie bereits in React verwendet werden oder angefordert werden. Lenis ist optional und muss dem Projekt dienen, nicht eine Voraussetzung sein. Überprüfe vor dem Hinzufügen von Bibliotheken die APIs und Versionen in der offiziellen Dokumentation. Verwende den vorhandenen Paketmanager oder gepinnte CDN-Versionen, niemals latest.

Ultra-Qualitätsstandard

Interpretiere „Ultra“ als präzise Choreografie, kontinuierliche Interaktionen und überprüfte Desktop- und Mobile-Qualität. Es erhöht nicht automatisch die Intensität, die Anzahl der Effekte oder die Abhängigkeiten.

Beobachte vor Änderungen die Seite und identifiziere konkrete Probleme: statische Hierarchie, fehlendes Feedback, inkonsistentes Timing, Sprünge, starkes Scrollen oder Effekte, die mit Touch nicht kompatibel sind. Falls bereits Bewegung vorhanden ist, dokumentiere eine Basislinie und verbessere das bestehende System. Halte Analyse und Dokumentation proportional zu den lokalen Änderungen.

Lies für jede Implementierung references/smooth-responsive-motion.md: Es definiert Choreografie, Unterbrechungen, Eingabeprofile, Leistung und Akzeptanzkriterien. Konsultiere den Effektkatalog, um die visuelle Sprache zu wählen; Qualität hängt auch von dem ab, was zwischen Zuständen passiert.

1. Konzept

Untersuche Struktur, Inhalt, die primäre Aktion und vorhandene Interaktionen. Definiere:

• Ein Bewegungskonzept in einem Satz, das Verhalten beschreibt, nicht nur ästhetische Adjektive.
• Einen Signature Moment für die Seite oder Reise: seinen einprägsamsten Effekt mit einem narrativen oder praktischen Zweck. In operativen Oberflächen kann dies eine subtile Mikrointeraktion sein.
• Unterstützende Effekte für jeden Abschnitt, die erklären, was sie den Benutzern helfen zu verstehen oder zu tun.
• Charakter und Intensität: zurückhaltend für operative Oberflächen und Lesen; mittel als Standardannahme für werbliche Landingpages; kräftig nur, wenn es zur Anfrage passt. Intensität ändert Amplitude, Dichte und Komplexität, nicht nur Geschwindigkeit.

Ein visueller Lead zur Zeit. Variiere die Behandlung von Überschriften, Bildern, Listen und Steuerelementen, während dieselben Tokens verwendet werden. Verwende Sequenzen, Überlappungen und Pausen; große Elemente können länger dauern als kleine. Verzögere nicht die Verfügbarkeit des Call-to-Action (CTA) oder erzwinge einen Preloader, um Qualität vorzutäuschen.

Lies zur Auswahl der Effekte references/effect-selection.md. Es ist ein selektives Repertoire, keine Checkliste zum Abarbeiten. Eine Seite kann sich durch responsive Interaktionen lebendig anfühlen, ohne dauerhafte Animationen.

2. System und Bewegungslandkarte (Motion Map)

Zentralisiere Dauern, Easings, Distanzen und Stagger in CSS-Tokens und JavaScript-Konfiguration. Passe diese Startwerte an:

Token	Startwert	Verwendung
micro	150–250 ms	Feedback von Steuerelementen und Links
standard	400–700 ms	Einblendungen und lokale Übergänge
hero	800–1200 ms	Nicht blockierende Hauptsequenz
ease-out	cubic-bezier(0.16, 1, 0.3, 1)	Sanfte Ankünfte
ease-in-out	cubic-bezier(0.65, 0, 0.35, 1)	Zustandsübergänge
stagger	60–120 ms	Rhythmus zwischen verwandten Elementen
distance	16–48 px	Zurückhaltende Verschiebung, reduziert auf Mobilgeräten

Verwende äquivalentes Easing, wenn eine Bibliothek ein anderes Format erwartet: Übergib keinen CSS-String an eine API, die ihn nicht akzeptiert. linear eignet sich für kontinuierliche Schleifen, scrollgebundenen Fortschritt und gleichmäßige Geschwindigkeit. Vermeide allgegenwärtiges Bounce- und Elastic-Easing. Begrenze die Gesamtdauer langer gestaffelter Sequenzen sowie einzelner Animationen.

Erstelle eine Bewegungslandkarte (Motion Map) proportional zum Umfang:

Abschnitt/Element	Zweck	Auslöser	Effekt/Properties	Dauer oder Scroll-Bereich	Easing	Verzögerung/Stagger	Mobil/Touch	Reduzierte Bewegung

Gib für interaktive Effekte auch Unterbrechung, Umkehrung, wiederholtes Eingabeverhalten und den endgültigen Ruhezustand an. Definiere separate Desktop- und Touch-Profile mit derselben visuellen Absicht; die Bildschirmbreite allein bestimmt nicht die Eingabe oder Geräteleistung.

Beschreibe für Scrubbing den Scroll-Bereich und etwaige Glättung, anstatt eine feste zeitliche Dauer zu erfinden. Gib jedem Effekt eine reduzierte Version oder einen vollständigen statischen Zustand.

3. Implementierung

Wenn Codeänderungen angefordert werden, gehe im selben Task vom Konzept zur Implementierung über. Phasen organisieren die Arbeit und erfordern keine Zwischenfreigaben. Halte zwischen Phasen nur an, wenn der Benutzer explizit Checkpoints anfordert; präsentiere das konkrete Phasenergebnis, bevor du um Fortsetzung bittest. Wenn nur ein Konzept oder eine Bewegungslandkarte angefordert wird, respektiere diesen Umfang.

Lies references/implementation-and-qa.md für Initialisierung, Barrierefreiheit, Bereinigung und praktische Checks. Wende diese Einschränkungen an:

• Wesentliche Inhalte und Aktionen bleiben ohne JavaScript, bei fehlenden Abhängigkeiten und nach Initialisierungsfehlern sichtbar und nutzbar. Eine frühe .js-Klasse allein garantiert dies nicht.
• Bevorzuge transform und opacity; bewerte clip-path, Filter, Farbverläufe und große Flächen sorgfältig. Versprich keine 60 fps ohne Messungen. Vermeide abwechselnde Layout-Reads und -Writes.
• Wähle für Akkordeons und andere notwendige Größenänderungen eine semantische, gemessene Lösung. Verzerre Text nicht mit scaleY, nur um ein absolutes Verbot von height zu befolgen.
• Reseviere Medienplatz und erhalte vorhandene Transforms durch Wrapper oder Komposition. Führe keine Layout-Shifts oder versehentlichen horizontalen Overflow ein.
• Erhalte natives Scrollen, Anker, Verlauf, Tastaturzugriff, Fokus und Zoom. Kein Scroll-Jacking; Smooth-Scrolling und Pinning müssen die Benutzerkontrolle behalten.
• Reduziere oder deaktiviere Parallax, Neigung, benutzerdefinierte Cursor und teure Grafiken auf Touch-/Mobilgeräten. Aktionen dürfen nicht von Hover abhängen.
• Bei prefers-reduced-motion: reduce entferne große Verschiebungen, Parallax, räumliches Scrubbing, narratives Pinning und nicht wesentliche Schleifen. Verwende sofortige Zustände oder kurze Überblendungen, wo angemessen. Respektiere auch Präferenzänderungen während der Sitzung.
• Kein absichtliches Blinken. Bei Inhalten, die sich länger als fünf Sekunden automatisch bewegen, zusammen mit anderen Inhalten, biete Pause/Stopp/Ausblenden an oder mache sie statisch. Die Unterstützung für reduzierte Bewegung allein ersetzt diese Steuerung nicht.
• Erhalte die Semantik beim Aufteilen von Text in Wörter oder Zeilen. Verstecke keine interaktiven Elemente oder Vorfahren fokussierbarer Steuerelemente vor Screenreadern.

Verwende für Vanilla-Projekte motion.css und motion.js, wenn hilfreich. Folge in Frameworks den bestehenden Modul-, Komponenten- und Lebenszyklus-Konventionen. Lege die zentrale Konfiguration für Intensität, Timing, Abstände, Stagger und optionale Funktionen offen; füge keine Schalter für nicht implementierte Effekte hinzu.

Verwende deklarative Attribute, wenn sie die Wiederverwendung vereinfachen, wie data-reveal="mask", data-stagger="80" (ms) und data-parallax="0.15" (Faktor). Definiere die Einheiten und die Bedeutung der unterstützten Attribute. Baue keine generische Engine, wenn ein lokaler CSS-Übergang ausreicht.

Trenne Initialisierer wie initHero, initReveals und initParallax nur für tatsächlich vorhandene Effekte. Jede Initialisierung muss wegwerfbar sein; vermeide doppelte Observer, Listener, Ticker und Trigger nach Navigation oder Neu-Mounting. Verwende in React Lebenszyklus und Bereinigung, ohne direkt von React verwaltetes DOM zu manipulieren, um Text aufzuteilen.

Liefere vollständigen Code, der in Projektdateien integriert ist, wenn du Zugriff hast. Füge nicht nur Snippets ein und lasse die Implementierung unvollendet. Veröffentliche oder deploie die Website nicht, es sei denn, es wird angefordert.

4. Verifikation und Auslieferung

Wenn ein Browser verfügbar ist, überprüfe die Anfangs- und Endzustände der Animationen, Mobilgeräte, Touch/Tastatur, Größenänderung, reduzierte Bewegung, deaktiviertes JavaScript und Abhängigkeitsfehler. Führe relevante Projektchecks durch. Profiliere eine repräsentative Interaktion für teure Effekte.

Wende vor der Auslieferung die Akzeptanzkriterien aus der smooth-motion-Referenz an. Wenn ein Effekt Probleme bereitet, reduziere zuerst Rendering-Kosten und Parallelität, dann Amplitude oder Komplexität; eine Verlangsamung behebt keine ausgelassenen Frames. Korrigiere beobachtete Probleme und führe eine gezielte Nachprüfung durch.

Berichte, was tatsächlich überprüft wurde und was noch ungeprüft ist. Verwechsle Code-Review nicht mit Browser-Test. Korrigiere beobachtete Probleme, bevor du abschließt.

Skaliere die Auslieferung auf die Anfrage und füge hinzu:

• Konzept, Signature Moment und präzise Bewegungslandkarte.
• Implementierte Änderungen und Dateilinks; vollständigen Code pro Datei nur, wenn du Dateien nicht direkt bearbeiten kannst.
• QA-Ergebnisse, Kompromisse und relevante verbleibende Annahmen.
• Konkrete Parameter, um das Ergebnis zurückhaltender oder intensiver zu gestalten.

Wiederhole keine leeren Abschnitte oder Genehmigungsfragen für jede Phase.