feitangyuan/motion-web

Was macht motion-web?

Motion-first kreative Webseite. Die Fertigkeit behandelt alle Phasen: Referenz → Konzept → Spezifikation → Bau → Prüfung.

Diese Fertigkeit baut ganze Webseiten. Motion ist das, was sie gut macht; es ist nicht die gesamte Arbeit. Eine Anfrage ohne jegliche Bewegung – „Erstelle eine Landingpage“, „Hilf mir, diese offizielle Website zu erstellen“ – ist trotzdem diese Fertigkeit, und das Ergebnis ist eine fertige Site: Stack, Tokens, Abschnitte, Kopie, Komponenten, Zustände, Meta, Deployment.

Prioritätsreihenfolge – 1 und 2 sind gleichrangig:

1. Bewegungskonzept und Interaktionschoreografie
2. Seitendesign – Struktur, Schriftskala, Palette, Rhythmus der Abstände, das, was es ausmacht, bevor sich etwas bewegt
3. Die Seite als gebautes Artefakt – Abschnitte und deren Kopie, das Komponentenvokabular, die Token-Ebene, die Zustände außerhalb des Happy Path (page-blueprints.md, components.md, project-setup.md, production-polish.md)
4. Leichtes 3D oder Canvas nur, wenn es die Seite verstärkt
5. Performance, Barrierefreiheit, Reduzierte-Bewegung-Fallbacks

Eine großartige Mechanik auf einer Standardseite ist eine fehlgeschlagene Seite. Bewegung ist der Vorteil, nicht die Ausrede. Der häufigste Fehler dieser Fertigkeit ist der Versand einer cleveren Interaktion, die auf ein Layout geklebt wird, das niemand entworfen hat – wenn die Seite dich in Verlegenheit bringen würde, wenn die Bewegung ausgeschaltet ist, ist sie nicht fertig, und keine noch so große Federabstimmung behebt das. Design ist nicht Schritt 2 in der Zeit; es ist eine zweite Sache, die am Ende auch wahr sein muss. → references/page-design.md, references/design-slop.md

Dies ist eine Design-und-Bau-Fertigkeit für eine Klasse von Websites: kreative und Marketing-Webseiten – Landingpages, Produktseiten, Portfolios, Studio-Seiten, Kampagnen, redaktionelle Seiten, leichte Dokumentationen. Sie baut sie von Anfang bis Ende. Sie ist keine Dashboard/Admin/datendichte App-UI-Fertigkeit und kein vollständiger 3D-Szenengenerator (diese leiten an 3d-scene-studio weiter). Eine kreative Seite mit app-ähnlichen Fragmenten – eine Preistabelle, ein Login, ein Konsolen-Screenshot – liegt im Rahmen; eine eingeloggte Produktoberfläche nicht.

---

Agentenbasierte Absichtserkennung (KRITISCH – Lies dies zuerst)

Der Benutzer wird oft sehr wenig sagen. Erkenne seine Absicht aus minimalen Eingaben und handle autonom.

Signal → Absichts-Tabelle

Was der Benutzer sendet	Erkannte Absicht	Was zu tun ist
„Erstelle eine Webseite“ / „Erstelle eine Landingpage/offizielle Website/Portfolio“ mit einem Thema, ohne Referenz	full-build	Die ganze Site, nicht nur eine Mechanik. page-blueprints.md → project-setup.md → page-design.md → bauen → components.md → production-polish.md
„Was soll auf diese Seite?“ / „Welche Abschnitte sollte es geben?“ / „Informationsarchitektur“ / „Wie schreibe ich den Text?“	blueprint	page-blueprints.md – wähle eine Struktur, schreibe echten Text, markiere jede erfundene Tatsache
„Navigation“ / „Button“ / „Formular“ / „Karte“ / „Footer“ / „FAQ“ / „Preistabelle“ / „Popup“ / „Komponente“	component	components.md – zuerst die Dialekttabelle, dann die Zustandsmatrix. Eine Komponente ohne ihre Zustände ist nicht fertig
„Welcher Technologie-Stack?“ / „Astro oder Next“ / „Wie starte ich das Projekt?“ / „Design-Token“ / „Schriftart“ / „Deployment“	setup	project-setup.md – Seitenleiter ≠ Bewegungsleiter; beginne auf Stufe 0 und steige auf
„Sieht aus wie ein Demo, nicht wie ein fertiges Produkt“ / „OG-Preview ist leer“ / „Kein Favicon“ / „404“ / „Leerzustand“ / „Dark Mode“ / „Formular nicht validiert“	polish	production-polish.md – alles ist überprüfbar; führe §9 aus, anstatt zu schätzen
Eine bloße URL (kein anderer Text)	url-drop	Öffne sie und zerlege sie (Replicate-Modus Schritte 1–2), frage dann: Baue das neu, oder verwende es als Referenz für etwas Eigenes?
Eine URL + „Erstelle eine Webseite“ oder „Referenziere dies“	replicate → build	Zerlege die URL zuerst (Replicate-Modus), schlage dann ein Bewegungskonzept für den eigenen Inhalt des Benutzers vor
Referenz + „Klone es und speichere es als Case“ / „Speichere es in Skill“ / „Mache es zu einem Case“	case-authoring	cases/AUTHORING.md – zuerst Phase 0 Gate: entferne die Bilder aus der Referenz; wenn nichts übrig bleibt, kläre die Assets bevor du baust, nicht danach
Eine URL + „Klone“ / „Mache etwas Ähnliches“ / „Referenziere dies und mache“	replicate	Zerlege → Ordne Mustern zu → Baue sofort.
Eine URL zu einem Paper/Artikel/Blog	doc-drop	Lies es, benenne die Techniken mit extrahierbaren Werten, baue daraus, wenn darum gebeten wird (Dokument/Artikel-Ablage unten)
Eine vage Anforderung („Erstelle eine coole Webseite“ / „Erstelle ein Portfolio“)	freeform-build	Orchestriere über composition-guide.md → wähle Stil+Bogen selbstständig
Nur ein Thema („Erstelle eine Landingpage über KI“)	spec → build	Orchestriere über composition-guide.md → schlage visuelle Richtung vor, baue sofort
Detaillierte Anforderung mit Referenzen	spec → build	Schreibe MOTION_SPEC.md → hole Genehmigung → baue
„Überprüfe“ / „Was sind die Probleme?“ / „Lücke“	audit	Untersuche bestehende Arbeit auf Bewegungs-/Perf-/Barrierefreiheitslücken – einschließlich des Standbilds, gemäß design-slop.md
„Es sieht nicht gut aus“ / „Zu hässlich“ / „Sieht aus wie von KI gemacht“ / „Kein Designgefühl“ / „Durchschnittlich“	design-audit	Screenshot mit ausgeschalteter Bewegung und führe die Gates in design-slop.md aus. Stimme die Federn nicht ab – die Beschwerde betrifft das Standbild
„Layout“ / „Typografie“ / „Schrift zu klein“ / „Weißraum“ / „Struktur“ / „Alle Abschnitte sehen gleich aus“	design	page-design.md – Makrostruktur, Schriftskala, Rhythmus der Abstände, gemessen an aktuellen Preisträgern
„Füge … hinzu“ auf bestehender Seite	incremental-build	Erweitere die aktuelle Implementierung mit neuer Bewegung
Eine Video-Referenz (Pinterest/Dribbble/X-Clip)	video-ref	STOPP – führe das Video-Referenz-Protokoll unten aus, bevor du Code schreibst
„Das Gefühl ist schlecht“ / „Zu steif“ / „Folgt nicht der Hand“ / „Zu ruhig“ bei bestehender Bewegung	handfeel-tune	Prüfe gegen handfeel.md – Federn, Geschwindigkeitskopplung, sekundäre Bewegung
„Folgt der Hand, aber fehlt ein bisschen“ / „Ruckelt“ / Gefühl ändert sich mit der Bildrate bei allem, was folgt (Kamera, Cursor, Schiene, Tooltip)	handfeel-tune	Nicht §1's Feder – handfeel.md §7: 1-exp(-k·dt), der speed/k-Vorlaufterm, und niemals nach dem Filter korrigieren
„Kann man ohne GSAP auskommen?“ / Nur eine Eintritts- oder Parallaxe / Möchte es leichter	build	Prüfe zuerst Stufe 1.5 – native animation-timeline / animation-trigger / sibling-index() → build-mode.md Leiter + pattern-recipes.md #16. Firefox bekommt den statischen Endzustand
Material ist ein echter Ort (echte Aufnahme/Scan), Betreten soll möglich sein	build	Stufe 5.5 – 3D Gaussian Splats vor Modellen → build-mode.md Leiter
Karten/Bilder sollen gebogen werden, Flaggen, Umblättern, Bildschirmfotos in eine 3D-Fläche stecken, „Skew reicht nicht“	warp	Eckpunkt-Homographie → pattern-recipes.md #17. Bewache jedes Viereck und begrenze den Kantenkippwinkel auf asin(h/w) – ein unbewachtes Viereck malt einen bildschirmgroßen Block ohne Fehler
„Kann nicht geklickt werden“ / „Nur eines ist klickbar“ / „Niemand wird es finden“ / „Nicht sichtbar“ bei bestehender Bewegung	affordance-audit	Berühre zuerst keinen Hit-Test-Code. Prüfe gegen affordance.md – der Mechanismus ist normalerweise in Ordnung; die Einladung fehlt oder ist abgelaufen
Ein Haufen Bild-Assets + „Mache daraus eine 3D-Szene“ / „Soll Tiefe haben“ / „Kamera soll hineingehen“	image-plane-3d	Greife nicht zu Modellen. Baue die Szene aus flachen Ebenen in einer echten perspektivischen Kamera → image-plane-3d.md (Leiterstufe 5)
„Sieht zusammengeflickt aus“ / „Nicht integriert“ / „Wie aufgeklebt“ in einer gerenderten Szene	image-plane-3d	Miss, bevor du die Kunst berührst: mittleres R−B und Luminanz pro Asset-Batch, Kontaktschatten vorhanden → image-plane-3d.md §6–7
„Womit soll das gezeichnet werden?“ / „DOM oder Canvas?“ / Seite gibt nur Divs und Systemschriftarten aus / Referenz ist offensichtlich nicht mit DOM machbar	render-layer	Bestimme zuerst die Schicht, dann den Mechanismus → render-layer.md §1. Die Schicht ist eine Deklaration, schreibe sie in die Case-README, überprüft von verify_case.py --layer
Handgezeichnet / Tusche / Strichstil-3D, „sieht aus wie gezeichnet, nicht gerendert“, Kochen / Zitterlinien / Papierstruktur	ink-render	render-layer.md §3 – Tiefendiskontinuitäts-Konturen (Normalenfalten ausschalten), statisches Warp und dynamisches Kochen trennen, Kochuhr 11Hz bei 60fps Rendering
Rohmaterial / Render, die noch ausgeschnitten werden müssen, „Freistellen“, „Wie kommen Assets in die Szene?“, „Bild ist verschwommen“	asset-pipeline	Keye gegen den eigenen Hintergrund des Bildes, beschneide auf die Alphabounding-Box, skripte die Metadaten, drucke das Auflösungsbudget pro Element → image-asset-pipeline.md
Jeder Headless-Check; eine Zahl stimmt nicht mit dem überein, was du siehst; „Wie überprüfen?“	verify	Baue zuerst die Sondenoberfläche – anheftbare Uhren, __seek, __hold, Zustandsausgänge – dann messe → verification-harness.md
„In diesem Abschnitt passiert nichts“ / „Rhythmus schlecht“ / „Ein Haufen Text kommt auf einmal“ bei einer Scroll-Zeitleiste	timeline-audit	Lege jede Spur gegen eine Scroll-Achse; tote Takte sind zusammenfallende Plateaus, nicht eine langsame Schicht → timeline-orchestration.md
Lange Scroll-Szene mit vielen Assets; „Ruckelt“, „Lädt langsam“, „Speicher voll“, Hunderte von Platten	scene-streaming	Aktiviere nach Bildschirmfenster, schneide große Uploads, gebe innerhalb des Scans nach, entsorge vollständig → scene-streaming.md
Alles mit Ton – BGM, Atmosphäre, Interaktions-SFX, „Zu wenig Soundeffekte“, „Atmosphärenklang ist leise, aber nicht aufdringlich“	scene-audio	Drei Busse (BGM / Hand / Welt), pro-Akt-Kurven, diskrete Ereignisse über einem lauteren Bett → scene-audio.md

Frage den Benutzer nie, welcher Modus verwendet werden soll. Erkenne es. Handle. Halte nur an, wenn die Anforderung wirklich zwischen zwei sehr unterschiedlichen Ausgaben unklar ist (z.B. Spezifikation vs. sofortiges Bauen).

---

Video-Referenz-Protokoll (Harte Regel – Nicht raten)

Auslöser: Die Referenz ist ein Video, das du nicht tatsächlich ansehen kannst – Pinterest-Pin, Dribbble-Shot, X-Clip, externer Kurzlink. Ein Titel oder eine Textbeschreibung ist KEINE Bewegungsinformation.

0. Lies den Thread, bevor du schließt, dass es keine Live-Seite gibt. Der Autor postet fast immer die URL in einer Antwort, und die Antworten sagen dir auch, ob das Stück überhaupt eine Webseite ist. Gemessen am 02.09.2026: eine vorherige Sitzung erklärte sieben Video-Referenzen für URL-los und verbrachte ihre Phase 1 mit Bildmessung; alle sieben hatten Live-Seiten, die von den Autoren selbst gepostet wurden, und drei von vier Clips in einem Beitrag stellten sich als Jitter / Figma Motion / Rive-Render ohne Web-Implementierung heraus (cases/AUTHORING.md Phase 1). safe-x tweet <url> --json, löse dann jeden t.co-Link in den Antworten auf.
1. Baue Bewegung niemals aus einer Vermutung. Wenn du nur einen Titel/eine Beschreibung extrahiert hast, kennst du das Thema, nicht die Bewegung. Trotzdem zu bauen, verbrennt eine ganze Iteration – dies ist ein dokumentierter Fehlermodus (06.07.2026, Seafood-Hero: „Umlaufbahn“ geraten, tatsächlich war es eine aufsteigende Diagonale; zwei Neubauten).
2. Bitte sofort um 2–3 Schlüsselbilder. Ein Satz: „Ich kann dieses Video nicht öffnen; sende mir 2-3 Schlüsselszenen (Eintritt/Mitte/Austritt).“
3. Formuliere die Flugbahn als explizite Geometrie, bevor du codierst, und hol Bestätigung:
   • Ankerpunkte: wo das Element eintritt / den Höhepunkt erreicht / austritt (Ecken, Drittel)
   • Haltung: Rotation folgt dem Pfad-Tangens / bleibt konstant / hinkt hinterher
   • Sekundäre Reaktionen: was bewegt sich noch (Hintergrundformen, Linien, Text) und wie
   • Beispiel: „Aufsteigende Diagonale von unten rechts → Mitte → oben links, Fischkopf konstant nach oben links“ – falsche Vermutungen sterben hier, nicht im Code
4. Ordne erst dann Muster-Rezepten / handfeel.md zu und baue.

Ein einzelner Screenshot folgt derselben Regel: Ein Bild gibt die Pose, nicht die Flugbahn. Wenn der Pfad wichtig ist, bitte um mehr Bilder.

---

Replikat-Modus

Wenn der Benutzer eine URL sendet mit „Klone“ / „Mache etwas Ähnliches“ / „Kannst du diesen Effekt machen?“ – zerlege sie, dann baue. Es gibt keinen Schritt zur Speicherung; das Ergebnis ist die Seite.

Replikat-Ausführungspfad

1. Öffne die Seite und lies sie als drei Schichten, mit welchen Browser-Tools auch immer verfügbar sind (Claude Preview, browser-use, Playwright): den Stack (Bibliothek, Easing, Keyframes, CSS-Variablen – die Bundle-Namen verraten sie), die Scroll-Choreografie (welches Element ist über welchem Band angeheftet, Schienen und ihr px-Abstand, Parallax-Raten, bereinigte Eigenschaften, Eintrittspunkte – nimm ~9 Scroll-Positionen und vergleiche getBoundingClientRect plus berechnete Stile dazwischen) und die WebGL-Schicht (Programm-Anzahl, Draw-Calls, benutzerdefinierte Uniform-Namen; umschließe getContext vor dem Ausführen der Seite, wenn du die Shader-Quellen brauchst). Zwei Skripte decken die messbaren Hälften ab: scripts/measure_structure.py <url> für die statische Seite (Abschnitte, Nav, Buttons, Token-Skalen, Medien, Meta, mobiler Überlauf) und scripts/measure_churn.py <url> für wie viel der Seite sich tatsächlich unter einem echten Rad bewegt. Die URL muss das Werk selbst sein, niemals eine Galerie-Liste (awwwards.com/sites/<slug>): eine Listenseite gibt dir die eigene Chrome-Darstellung der Galerie, und sechs verschiedene Gewinner kommen mit der gleichen Bibliothek, den gleichen Keyframes und der gleichen Schriftart zurück.

2. Zerlege – formuliere, was du gefunden hast, und nenne Zahlen statt Eindrücke:

   • „GSAP 3.12 + ScrollTrigger + Lenis; .home-animate__wrapper ist zwischen 0.25–0.50 angeheftet, dabei bewegt sich .icon horizontal +1545px, Austritt ist 0.25/0.38/0.62 drei Stagger“
   • „Hintergrund ist natives WebGL2, 14 Programme, 944 Draw-Calls, Uniforms enthalten bloomStrength/blurTexture1-5 und cloudCoverage/cloudDensity – ist UnrealBloom + volumetrische Wolken“

   Berichte niemals „verwendet WebGL“ allein aufgrund eines Kontexts – ein unsizeder 300×150 Kontext ohne verknüpftes Programm ist Modernizr-artige Fähigkeitserkennung, keine Szene. Zähle verknüpfte Programme und Draw-Calls.

3. Ordne Mustern zu – finde das nächste Rezept in references/pattern-recipes.md

4. Fülle die Lücke – was die Referenz verwendet, das wir nicht in Rezepten haben, schreibe von Grund auf basierend auf extrahierten Werten

5. Baue sofort – erstelle die Seite, führe sie aus, überprüfe visuell

6. Berichte – „Habe die Kernbewegung von [Seite] nachgebaut, verwendet [X] für [Y], Unterschied zum Original ist [Z]“

Replikat ≠ Kopie

• Tun: Erstelle das Interaktionsmuster, den Bewegungscharakter, das Timing-Gefühl neu
• Nicht tun: Kopiere proprietäre Markenfarben, exakten Text, identifizierbare Produkt-UI
• Tun: Passe die Technik an den eigenen Inhalt und die Palette des Benutzers an
• Vermerke im Bericht, was angepasst wurde vs. was originalgetreu war

---

Freiform-Baumodus (Wenn der Benutzer keine Richtung vorgibt)

Wenn der Benutzer sagt „Erstelle eine Webseite“ / „Mach etwas Beliebiges“ / „Denk dir ein Thema aus“ oder ein einfaches vages Thema nennt (z. B. „Erstelle eine Landingpage für eine KI-Agenten-Plattform“), ist dies eine Einladung, kreativ zu sein. Standardmäßig KEINE generische Vorlage, KEINE starre 1-zu-1-Routing-Zuordnung verwenden und KEINE klärenden Fragen stellen.

Freiform-Aktionspfad (Kreativschleife zur Laufzeit – Schöpfung geschieht während der Ausführung, nicht …

[gekürzt für Übersetzung]