Motion Match

Was macht Motion Match?

Verwenden Sie dies, wenn der Benutzer auf etwas zeigt, das sich bewegt, und möchte, dass sich unseres genauso bewegt, oder einen Nachweis dafür wünscht. Das Ergebnis ist Code plus Zahlen und Tabellen, niemals „es sieht ungefähr richtig aus".

Rechte zuerst

Entscheiden Sie, wem die Referenz gehört, bevor Sie etwas aufzeichnen, und geben Sie dies in Ihrer ersten Nachricht an.

Referenz	Was Sie tun dürfen
Eigene Arbeit oder eine, die der Benutzer besitzt oder lizenziert hat	Jede Genauigkeit, einschließlich Pixelebene
Website oder Video einer anderen Person	Nur Timing, Easing, Reihenfolge und Abstand messen, als schriftliches Pflichtenheft, und mit eigenem Design umsetzen

Für Arbeiten anderer:

• Kopieren Sie niemals deren Code, Shader, Assets, Schriften, Marke, Layout oder Text. Erstellen Sie niemals ein echtes Produkt so nach, als wäre es unseres.
• Eine pixelgenaue Übereinstimmung ist ausgeschlossen, unabhängig vom Wortlaut der Anfrage. Bieten Sie stattdessen Bewegungsebene an und begründen Sie es: „Ich kann die Bewegung mit Ihrem Design abgleichen. Das Kopieren ihres Aussehens würde deren Designarbeit übernehmen, daher werde ich das nicht tun."
• Login-Wände, Paywalls, Bot-Checks und DRM bleiben geschlossen. Respektieren Sie die Nutzungsbedingungen der Website und erfassen Sie nur das, was ein normaler Besucher sieht. Wenn eine Seite nicht erreicht werden kann, fragen Sie nach einer Bildschirmaufnahme. Laden Sie niemals das Video einer anderen Person herunter.
• Rohe Aufnahmen bleiben in einem ignorierten lokalen Ordner. Sie werden niemals committet, veröffentlicht oder in einem Arbeitsergebnis verwendet und gelöscht, wenn der Benutzer dies wählt. Nur die schriftlichen Zahlen werden weitergegeben. Teilen Sie dem Benutzer mit, wo sie sich befinden.

Wenn der Benutzer angibt, eine Referenz zu besitzen, und nichts widerspricht, nehmen Sie ihn beim Wort und vermerken Sie es im Pflichtenheft. „Machen Sie es identisch mit der Website des Unternehmens“ ist keine Lizenz. Verwenden Sie --rights third-party, wenn die Rechte unklar sind.

Genauigkeit

Geben Sie die Ebene in Ihrer ersten Nachricht an; sie bestimmt, was Sie überprüfen.

Ebene	Muss übereinstimmen	Darf abweichen
Bewegung (Standard)	Auslöser, Reihenfolge, Staffelung, Timing jedes Schrittes innerhalb von 80 ms, Easing, Richtung und Abstand	Kopie, Farben, Schriften, Bilder, Layout, Marke
Pixel, nur eigene oder lizenzierte	Alle oben genannten plus Schriften, Größen, Farben, Abstände und Assets; mittlere Abweichung höchstens 2 %	Nichts, was der Benutzer nicht zu ändern gebeten hat
Gemischt	Der angeglichene Teil auf einer der obigen Ebenen	Die Ergänzungen, die die angeglichene Bewegung nicht stören dürfen

Gleichen Sie nur das ab, was der Benutzer genannt hat: einen Abschnitt, ein Widget oder einen Zeitbereich.

Methode

Arbeiten Sie in output/motion-match/<name>/ oder einem anderen von Git ignorierten Ordner. Heben Sie jede Runde auf. Übergeben Sie --playwright und --chrome oder setzen Sie PLAYWRIGHT_CORE und CHROME_PATH. Node 22, ein vorhandener Browser-Treiber und ein vorhandener Browser sind erforderlich; ffmpeg wird für Video benötigt. Es wird nichts installiert.

1. Umfang. Schreiben Sie das Ziel, das Ziel im Projekt, die Rechte und die Genauigkeit.

2. Erfassen Sie die Referenz mit scripts/capture.mjs oder scripts/frames.mjs für ein bereitgestelltes Video. Geben Sie die von Ihnen festgelegten Rechte an:

   node <skill>/scripts/capture.mjs --url <page> --out <dir>/ref --rights third-party \
     --selector .hero --track ".title, .cta" --duration 2000
   

3. Lesen Sie jedes Blatt. Führen Sie scripts/sheet.mjs filmstrip aus und öffnen Sie dann jedes Blatt. Das Easing befindet sich in den mittleren Frames.

4. Schreiben Sie das Pflichtenheft. Führen Sie scripts/spec.mjs draft aus: eine Zeile pro Element pro Eigenschaft. Ein ? bedeutet, dass Sie das Lesen der Frames noch nicht abgeschlossen haben, und die Prüfung verweigert die Ausführung, bis jedes ersetzt wurde.

5. Bauen Sie im eigenen Stack des Projekts, mit eigenem Design für eine Referenz eines Dritten.

6. Filmen Sie unsere Version genauso. Verwenden Sie den Referenzbefehl erneut, ändern Sie nur --url, --out und --rights. Andere Einstellungen messen Ihr Setup, und compare.mjs lässt sie fehlschlagen.

7. Vergleichen. Führen Sie scripts/spec.mjs check, scripts/compare.mjs und scripts/sheet.mjs compare aus. Lesen Sie jedes Blatt.

8. Ändern Sie das kleinste, auf das die Zahlen hinweisen, eine Ursache pro Runde, und gehen Sie dann zurück zu Schritt 6.

9. Stoppen Sie nach 5 Runden, wenn eine Zeile immer noch fehlschlägt, und melden Sie es mit ihren Zahlen und dem Grund. Lassen Sie die Schwellenwerte dort, wo sie sind.

10. Berichten Sie so, dass die Nachricht für sich allein steht: die Rechte und die Genauigkeit; was abgeglichen und hinzugefügt wurde; die Dateien und wie die Bewegung ausgelöst wird; eine Tabelle der letzten Runde; die Pfade zu den Blättern; jede Abweichung mit einer Zahl und einem Grund; und wo sich die rohe Aufnahme eines Dritten befindet.

Beispiel Fehlschlag

Runde 1 von drei Karten schlägt fehl:

.card-1 opacity  start +300 ms  end +300 ms  easing RMSE 0.0003  FEHLGESCHLAGEN
.card-2 opacity  start +300 ms  end +300 ms  easing RMSE 0.0055  FEHLGESCHLAGEN
gaps             116.7 gegen 116.7         bestanden

Jede Zeile ist um den gleichen Betrag verspätet, und die Kurve und die Abstände stimmen, also ist die einzige Ursache die Basisverzögerung. Ändern Sie diese eine Zahl und filmen Sie erneut. Das Ausrichten der Frames würde diese Zeile bestehen lassen und eine um 300 ms verspätete Animation ausliefern, weshalb compare.mjs --auto-align zwischen zwei Aufnahmen ablehnt.

Fallstricke

• Unterschiedlicher Viewport oder Zuschnitt zwischen den beiden Seiten: Beheben Sie die Aufnahme, bevor Sie den Code anfassen.
• Beurteilung anhand des ersten und letzten Frames: Lesen Sie die mittleren.
• Schriftarten: Eine Fallback-Schriftart ändert die Pixel jedes Frames. Bei Bewegungsgenauigkeit lesen Sie die Timing-Zeilen und ignorieren Sie Textpixel.
• Seite bereits ausgelastet bei Kaltstart: Verwenden Sie auf beiden Seiten dasselbe --wait-before.
• Scrollgesteuerte Bewegung folgt der Scrollposition, nicht der Zeit. Verwenden Sie dieselben --scroll-steps und --scroll-ms und vergleichen Sie pro scrollY.
• Federn: easing.mjs meldet Überschwingen sowie angepasste Steifigkeit und Dämpfung. Optimieren Sie nach Überschwingen und Einschwingzeit.
• Bildschirmaufnahmen enthalten einen Cursor, Browser-Chrome und Komprimierungsrauschen. Schneiden Sie diese aus und erhöhen Sie --activity-threshold leicht.
• Canvas-Inhalte: Verwenden Sie die virtuelle Uhr und denselben --seed auf beiden Seiten. Zufällige Inhalte auf der echten Uhr messen die Maschine.
• CSS-Animationen melden linear in timing.easing. Das tatsächliche Easing befindet sich auf jedem Keyframe.

Grenzen

Verwenden Sie orbyn-ui-design, um zu entscheiden, welche Bewegung ein Produkt haben sollte; technical-illustration für Filme; und product-illustration für Pseudo-UI. Ein Video folgt der Nur-Code-Regel: Studieren Sie eine Referenz für die Technik und kopieren Sie niemals deren Frames.

Bei Bedarf lesen

• Für Aufnahme-Rezepte, Auslöser und Ausgabedateien lesen Sie capture.
• Für das Spezifikationsformat und das Lesen von Frames lesen Sie analysis.
• Für Easing, Federn und Bauweisen lesen Sie implementation.
• Für Bestehenskriterien und die Bedeutung jedes Fehlschlags lesen Sie verify.