hirowyh/settle

Was macht settle?

Verwandle eine Anfrage wie „einen Schalter, der sich richtig gut anklicken lässt“ oder „eine kurze Schleifen-Animation, die meine Todo-App zeigt“ in ein live Element mit Bewegung, die so nachgibt wie physische Dinge. Die Bewegungstechnik (Motion Craft) ist bei jedem Stück gleich; das Aussehen wird für jede Anfrage neu vergeben oder vom Projekt des Nutzers übernommen.

Pfade unten sind relativ zum Ordner dieser Datei. Führe jedes Skript vom Arbeitsverzeichnis aus (dem Projekt-Root oder dem Ordner, in den das Element kommt) mit seinem vollständigen Pfad aus: node <dieser Ordner>/scripts/deal.mjs …. Die Skripte schreiben ihre Dateien dort, wo du sie ausführst.

Wie eine Anfrage abläuft

1. Lies den Kontext. Finde heraus, ob du dich in einem Projekt befindest: einer package.json, die ein Framework nennt, oder einem Ordner mit HTML-Seiten. Notiere in einem Projekt, wie es Styles schreibt, welches Aussehen seine Tokens oder sein Theme setzen und welche Bewegungsbibliothek es bereits verwendet. Dann lies die Anfrage: welche Struktur in references/kinds/ es ist, ob es sich um eine Showcase oder Teil eines Produkts handelt und nach welchen Anfängerbegriffen gefragt wird, die references/words.md übersetzt.
2. Vergib oder übernimm das Aussehen.
   • Ein Projekt mit einem eigenen Aussehen behält es: Bilde dieses Aussehen auf die Variablen des Style-Sheets ab und ergänze nur, was es nicht hat, mit --keep palette,type.
   • Andernfalls vergib es: node scripts/deal.mjs --brief "<die Anfrage in einer Zeile>" --kind <control, data-view, composite oder flow>, mit den Flags, die references/words.md für die Wörter der Anfrage angibt, und --project, wenn du dich in einem Projekt befindest, damit spätere Elemente dort das Aussehen übernehmen. Baue Aussehen 1, das vergebene Aussehen: --pick 1. Nimm Aussehen 2 oder 3 nur, wenn Aussehen 1 mit dem Motiv kollidiert, und benenne die Kollision: --pick 2 --because "ein dunkler Hintergrund für ein Frühstücksmenü". references/tokens.md enthält die Regeln.
   • Ein vergebenes Aussehen hat eine Richtung, die das Stück einkleidet; die Anfrage legt die Form fest. Lies den entsprechenden Abschnitt in references/directions.md, und zwar jede Richtung ganz oben, vor dem Brief.
3. Schreibe den Brief oder ein Storyboard.
   • Für ein Control, eine Data-View oder ein Composite: Gib den Brief in zwei Zeilen an und baue sofort los: was es ist, was die Richtung für dieses Motiv bedeutet, das Aussehen, der Signatur-Moment und die von dir gewählten Voreinstellungen. „Ein Pomodoro-Timer für eine Lese-Seite. Instrument: Der Timer ist das Zifferblatt einer Küchenuhr, Minutenstriche rund um eine Lünette; Aussehen 1, Kitt und Schwarz; Signatur: Der Start-Button wird zum schrumpfenden Balken; 25 Minuten, 5-Minuten-Pausen.“
   • Für einen Ablauf über Zeit oder eine Anfrage, die zwei sehr verschiedene Dinge bedeuten könnte: Zeige ein Storyboard (das Format steht in references/kinds/flow.md) und warte auf ein „Ja“.
   • Bevor du baust, stelle dir vor, was jede ähnliche Anfrage bekommen würde. Ändere jeden Teil des Briefs, der diesem Bild entspricht.
4. Baue es dort, wo das Element hinkommt.
   • Kein Projekt: Eine HTML-Datei basierend auf assets/page.html oder assets/reel.html für eine Schleifen-Animation. Sie enthält das Style-Sheet, die Seitenregeln der Richtung, den Kernel (assets/kernel.js) komplett in ein Modul-Script im Head eingefügt und die Rezepte aus references/motion.md, die das Element benötigt.
   • Ein Projekt: Eine Komponente im Framework und Styling des Projekts, der Kernel einmal als Modul kopiert, das Style-Sheet im globalen Stylesheet des Projekts. references/stacks/ enthält eine Notiz pro Stack.
   • Bewegung für ein bereits existierendes Element: Behalte dessen Markup und Aussehen und gib jedem seiner Zustandswechsel die Bewegung, die die Grammatik nennt (references/craft.md, Abschnitt 3), durch das Tor.
   • Die Datei der Struktur in references/kinds/ sagt, von welchen Rezepten auszugehen ist, basierend auf der Art der Änderung, die jeder Teil macht.
5. Überprüfe es. Lint die Datei und erstelle Frames mit snap.mjs, wie references/review.md beschreibt, entweder auf der Datei oder auf dem Dev-Server des Projekts. Korrigiere, was im Kontaktblatt falsch aussieht, und erstelle erneut Frames, maximal drei Runden. Eine Prüfung, die sich nicht richtig verhält (z. B. ein Drag-Snap, der nicht einrastet, oder ein Server, der nicht startet), bekommt zwei Versuche; dann übergib mit dem Hinweis, dass sie als ungeprüft markiert wurde.
6. Übergib es (siehe unten).

Was zu lesen ist

Datei	Lies, wenn
references/craft.md	Jeder Build: die Regeln, denen jede Bewegung folgt, die Verbotsliste und die Stolperfallen
references/tokens.md	Jeder Build: wie ein Aussehen vergeben oder übernommen wird und wie es verwendet wird
references/directions.md	Jeder Build ohne Projekt: der Abschnitt der vergebenen Richtung
references/motion.md	Jeder Build: das Style-Sheet, die Basis-Seite und die Rezepte, eines pro Bewegung
references/kinds/control.md, data-view.md, composite.md, flow.md	Die Struktur des Elements: seine Anatomie und die Start-Rezepte
references/stacks/html.md, react-next.md, vue.md, svelte.md, astro.md	Wohin das Element kommt: html.md für eine eigenständige Datei, ansonsten der Stack des Projekts
references/words.md	Die Anfrage beschreibt ein Gefühl, z. B. „mach es poppig“
references/review.md	Der Überprüfungsschritt

Harte Regeln

• Das Element kommt dorthin, wo der Nutzer arbeitet. In einem Projekt: das Framework und Styling des Projekts, kein neues Paket, und die eigene Bewegungsbibliothek des Projekts, falls vorhanden, die Settles Timing übernimmt. Ohne Projekt: eine einzige eigenständige HTML-Datei mit eingefügtem Kernel, deren einzige externe Anfrage der eine Font-Link des Aussehens ist; es muss trotzdem im System-Font funktionieren. Ein auf Anfrage geladenes Foto liegt daneben.
• Die Anfrage legt die Form fest. Ein Control bleibt in seiner tatsächlichen Größe, ein Widget bleibt eine Karte oder ein Panel, und ein Vollbild kommt nur, wenn die Anfrage nach einem Bildschirm fragt. Eine Anfrage für eine ganze Landing Page oder Website bekommt nur das bewegte Element darin, z. B. die Diashow der App, die so gebaut ist, dass sie in die Seite eingefügt werden kann; die Übergabe überlässt die Seite einem Page-Design-Skill. Der Hintergrund um das Element bleibt schlicht.
• Das Aussehen kommt vom Style-Sheet und der Richtung. Jeder visuelle Wert stammt aus den Variablen des Style-Sheets oder deren Abstufungen, mit einem Hintergrund, einer Tinte und ein oder zwei Akzenten. Die vergebene Richtung kleidet das Element ein, und ein dunkler Hintergrund ist für ein Motiv, das im Dunkeln stattfindet.
• Bewegung vom Kernel. Jede Bewegung, die auf eine Person reagiert, und jeder Zustandswechsel läuft über settle.track, settle.stretch oder settle.move mit einer Voreinstellung aus dem Register des Aussehens, settle.register().
• Zeit von settle.now(). Handler setzen Ziele; eine requestAnimationFrame-Schleife rendert jeden bewegten Stil aus der aktuellen Zeit. snap.mjs stoppt diese Uhr, um Frames zu prüfen.
• Die Form wird übernommen. Jeder neue Zustand wird aus der bereits auf dem Bildschirm befindlichen Form erstellt, geänderter Text durchläuft eine kurze Unschärfe, und ein neuer Container öffnet sich hinter allem, was bleibt.
• Die Hand führt. Gezogene Werte liegen genau unter dem Zeiger; jenseits einer Grenze folgen sie einem Gummiband; Loslassen behält die Geschwindigkeit der Hand bei.
• Echte Inhalte. Plausible Details, und eine Aktion behält ihren Namen während eines Ablaufs. Fotos kommen vom Nutzer oder, wenn sie nach einem echten Foto fragen und keins haben, von scripts/photo.mjs mit dessen Quellenangabe im Element; ansonsten zeichne im Code nur, was Code scharf zeichnet, niemals eine Landschaft (references/directions.md, Bilder).
• Ein Signatur-Moment, und alles andere darum herum ruhig.
• Verboten, es sei denn, die Anfrage nennt es: alles auf der Verbotsliste in references/craft.md, was der Lint anzeigt.
• Für alle. Es funktioniert mit Zeiger, Touch und Tastatur, mit sichtbarem Fokus und 44-Pixel-Zielen. Es passt auf einen 360-Pixel-Bildschirm mit keinem Text unter 11 Pixeln, und bei reduzierter Bewegung landen seine Federn sofort.
• Kosten zählen. Jeder Tool-Aufruf verbraucht die Nutzung der Person. Baue einmal, überprüfe in maximal drei Runden, gib einer fehlerhaften Prüfung zwei Versuche und lasse die Skripte selbst ungedebuggt: nenne, was in der Übergabe ungeprüft geblieben ist.

Showcase oder Produkt

Eine Showcase, z. B. eine Schleifen-Animation für eine Landing Page, bekommt die volle Bewegung. Ein Control innerhalb eines funktionierenden Produkts bewegt sich umso weniger, je öfter eine Person es sieht: keine für etwas, das hundertmal am Tag verwendet wird, schnell und leicht für etwas, das dutzende Male verwendet wird. references/craft.md enthält die Tabelle (Emil Kowalskis Frequenzregel).

Wohin die Datei kommt

Ohne Projekt: Schreibe sie im Arbeitsverzeichnis unter einem kurzen, vom Motiv abgeleiteten Namen, z. B. tea-timer.html, es sei denn, die Person nennt einen Pfad. In einem Projekt: Platziere sie dort, wo die Stack-Notiz es sagt, benannt im eigenen Stil des Projekts, und zeige sie an einem Ort, den die Person öffnen kann: eine eigene Seite oder Route, wenn die Anfrage keine nennt. Halte die einstellbaren Zahlen des Elements zusammen oben in seinem Script: die Daten und alle Timing-Angaben, die das Register nicht setzt.

Übergabe

Antworte mit:

• Wo das Element ist, wie man es öffnet (die Datei oder die Route und der Befehl, der den Dev-Server startet), und eine Zeile dazu, was es ist und sein Signatur-Moment.
• Zwei oder drei Dinge zum Ausprobieren: „den Regler über das Ende ziehen“, „Tab drücken, dann die Pfeiltasten“.
• Zwei Knöpfe zum Einstellen, benannt wie sie oben im Skript erscheinen.
• Wohin ihr Foto kommt, wenn eine Zeichnung eines ersetzt: das Element, das gegen ein <img> von ihnen ausgetauscht werden soll.
• Was ungeprüft geblieben ist, falls überhaupt, z. B. Safari auf einem echten Telefon.
• Ein Angebot, einen Teil des Aussehens neu zu vergeben (node scripts/deal.mjs --redeal palette), und bei einer vagen Anfrage drei Varianten hinter einem Umschalter.

Für eine Schleifen-Animation biete den Video-Export an: node scripts/export.mjs reel.html --out reel.mp4 (oder --gif) rendert es mit ffmpeg, mittelt vier Sub-Frames pro Frame für Bewegungsunschärfe.

Skripte

Skript	Tut
scripts/deal.mjs --brief "…" [--tone …] [--register …] [--dark] [--project]	Vergibt drei Aussehen; --pick <n> gibt das gewählte Style-Sheet aus (und behält es als Aussehen des Projekts mit --project); --redeal <teil> vergibt einen Teil erneut; --check prüft die Bibliothek
scripts/lint.mjs <datei>	Statische Prüfung einer eigenständigen Datei; beendet sich mit Exit-Code 1 bei einem FAIL
scripts/snap.mjs <datei oder url> --out <verz> --sheet [--size BxH] [--times …] [--do "…"] [--calm]	Erstellt Frames auf einer gestoppten Uhr mit echten Eingaben und einem Kontaktblatt, dann die Prüfungen der fertigen Seite, die ihr Header auflistet
scripts/export.mjs <reel> [--out reel.mp4] [--gif]	Eine Schleifen-Animation in MP4 oder GIF mit Vier-Sub-Frame-Bewegungsunschärfe
scripts/photo.mjs "<was es zeigt>" [--out foto.jpg]	Ein offen lizenziertes Foto (CC0, Public Domain oder CC BY), gespeichert dort, wo es läuft, mit der Quellenangabe für das Element; nur wenn die Person nach einem echten Foto fragt

Sie benötigen Node 22 oder neuer und einen Chromium-Browser: snap.mjs findet Chrome, Chromium, Edge oder Brave an seinem üblichen Ort, und jeden anderen über CHROME. Wenn keiner gefunden wird, sagt es das in einer Zeile: überprüfe den Code gemäß references/review.md und nenne die Frames als ungeprüft. Export benötigt außerdem ffmpeg und photo.mjs ein Netzwerk. Nichts zu installieren.

Ohne Shell

Wenn Skripte nicht ausgeführt werden können, wie in einem Chat ohne Shell: Lese library/directions.json, library/palettes.json und library/type.json, behalte die Einträge, deren Arten und Töne zur Anfrage passen, und nimm den Eintrag an der Position, die durch die Länge der Anfrage in Zeichen gegeben ist, gezählt um jede Liste herum, sodass verschiedene Anfragen auf verschiedene Aussehen landen. Baue aus denselben Dateien, überprüfe den Code gemäß der Rubrik in references/review.md und sage in der Übergabe, dass die Frames ungeprüft geblieben sind.

Credits

• Emil Kowalskis Skills
• …

[gekürzt für Übersetzung]