settle

Que fait settle ?

Transformez une demande comme « un interrupteur qui fait vraiment plaisir à cliquer » ou « une courte animation en boucle qui met en valeur mon appli de tâches » en un élément vivant avec un mouvement qui semble aussi naturel que les objets physiques. L'art du mouvement est le même pour chaque élément ; l'apparence est unique à chaque demande, ou héritée du projet de la personne.

Les chemins ci-dessous sont relatifs au dossier de ce fichier. Exécutez chaque script depuis le dossier de travail (la racine du projet, ou le dossier où l'élément sera placé) en utilisant son chemin complet : node <ce dossier>/scripts/deal.mjs … : les scripts écrivent leurs fichiers là où vous les exécutez.

Déroulement d'une demande

1. Lire le contexte. Déterminez si vous êtes dans un projet : un package.json qui nomme un framework, ou un dossier de pages HTML. Dans un projet, notez comment il écrit les styles, l'apparence de ses tokens ou thème, et toute bibliothèque d'animation qu'il utilise déjà. Lisez ensuite la demande : à quelle structure dans references/kinds/ elle correspond, s'il s'agit d'une démonstration ou d'une partie d'un produit, et ce que ses termes de débutant demandent, ce que references/words.md traduit.
2. Attribuer ou hériter l'apparence.
   • Un projet avec sa propre apparence la conserve : mappez cette apparence sur les variables de la feuille de style, et n'attribuez que ce qui manque avec --keep palette,type.
   • Sinon, attribuez : node scripts/deal.mjs --brief "<la demande en une ligne>" --kind <control, data-view, composite or flow>, avec les drapeaux que references/words.md donne pour les mots de la demande, et --project si vous êtes dans un projet, pour que les éléments suivants héritent de cette apparence. Construisez l'apparence 1, l'apparence attribuée : --pick 1. Prenez l'apparence 2 ou 3 seulement si l'apparence 1 entre en conflit avec le sujet, et nommez le conflit : --pick 2 --because "un fond sombre pour un menu de petit-déjeuner". references/tokens.md contient les règles.
   • Une apparence attribuée a une direction, qui habille l'élément ; la demande définit sa forme. Lisez sa section dans references/directions.md, et chaque direction en haut, avant le brief.
3. Rédiger le brief, ou un storyboard.
   • Pour un contrôle, une vue de données ou un composite, énoncez le brief en deux lignes et construisez directement : ce que c'est, ce que la direction devient pour ce sujet, l'apparence, le moment signature, et les valeurs par défaut que vous avez choisies. « Un minuteur Pomodoro pour un site d'étude. Instrument : le minuteur a le cadran d'un minuteur de cuisine, des graduations de minutes autour du bord ; apparence 1, mastic et noir ; signature : le bouton Démarrer devient la barre qui se vide ; 25 minutes, pauses de 5 minutes. »
   • Pour une séquence dans le temps, ou une demande qui pourrait signifier deux choses très différentes, montrez un storyboard (le format est dans references/kinds/flow.md) et attendez un oui.
   • Avant de construire, imaginez ce que toute demande similaire obtiendrait. Modifiez chaque partie du brief qui correspond à cette image.
4. Construire là où va l'élément.
   • Pas de projet : un fichier HTML unique basé sur assets/page.html, ou assets/reel.html pour une séquence. Il contient la feuille de style, les règles de page de la direction, le noyau (assets/kernel.js) collé en entier dans le script module de l'en-tête, et les recettes de references/motion.md dont l'élément a besoin.
   • Un projet : un composant dans le framework et le style du projet, le noyau copié une fois en tant que module, la feuille de style dans la feuille de style globale du projet. references/stacks/ a une note par stack.
   • Mouvement pour un élément qui existe déjà : conservez son balisage et son apparence, et donnez à chacun de ses changements le mouvement que la grammaire nomme (references/craft.md, section 3), via la porte.
   • Le fichier de structure dans references/kinds/ indique par quelles recettes commencer, selon le type de changement que chaque partie apporte.
5. Vérifier. Lint le fichier et prenez des captures d'écran avec snap.mjs comme décrit dans references/review.md, sur le fichier ou sur le serveur de développement du projet. Corrigez ce qui ne va pas dans la planche contact et reprenez les captures, trois tours au maximum. Une vérification qui se comporte mal, comme un glisser-déposer qui ne peut pas atterrir ou un serveur qui ne démarre pas, a droit à deux tentatives ; puis remettez le travail en le marquant comme non vérifié.
6. Remettre (ci-dessous).

Que lire

Fichier	Lire quand
references/craft.md	Chaque construction : les règles que chaque mouvement suit, la liste interdite et les pièges
references/tokens.md	Chaque construction : comment une apparence est attribuée ou héritée, et comment elle est utilisée
references/directions.md	Chaque construction sans projet : la section de la direction attribuée
references/motion.md	Chaque construction : la feuille de style, la page de base et les recettes, une par mouvement
references/kinds/control.md, data-view.md, composite.md, flow.md	La structure de l'élément : son anatomie et les recettes par lesquelles commencer
references/stacks/html.md, react-next.md, vue.md, svelte.md, astro.md	Où va l'élément : html.md pour un fichier autonome, la stack du projet sinon
references/words.md	La demande décrit une sensation, comme « faites-le ressortir »
references/review.md	L'étape de vérification

Règles strictes

• L'élément va là où la personne travaille. Dans un projet : le framework et le style du projet, pas de nouveau paquet, et la propre bibliothèque d'animation du projet si elle en a une, en reprenant les temporisations de settle. Sans projet : un fichier HTML autonome avec le noyau collé dedans, dont la seule requête externe est le lien de police de l'apparence ; il doit toujours fonctionner avec la police système. Une photo récupérée sur demande se trouve à côté.
• La demande définit la forme. Un contrôle reste à sa taille réelle, un widget reste une carte ou un panneau, et un plein écran ne vient que si la demande demande un écran. Une demande de page entière ou de site Web n'obtient que l'élément animé à l'intérieur, comme le diaporama de l'application, construit pour être intégré à la page, et la remise laisse la page à une compétence de conception de page. Le fond autour de l'élément reste simple.
• L'apparence vient de la feuille de style et de la direction. Chaque valeur visuelle provient des variables de la feuille de style ou de leurs nuances, avec un fond, une encre et une ou deux accentuations. La direction attribuée habille l'élément, et un fond sombre est pour un sujet qui se passe dans l'obscurité.
• Mouvement depuis le noyau. Chaque mouvement qui répond à une personne, et chaque changement d'état, s'exécute avec settle.track, settle.stretch ou settle.move avec un préréglage du registre de l'apparence, settle.register().
• Temps depuis settle.now(). Les gestionnaires définissent des cibles ; une boucle requestAnimationFrame dessine chaque style animé à partir de l'heure actuelle. snap.mjs arrête cette horloge pour vérifier les images.
• La forme se conserve. Chaque nouvel état est fabriqué à partir de la forme déjà à l'écran, le texte modifié passe par un bref flou, et un nouveau conteneur s'ouvre depuis derrière ce qui reste.
• La main mène. Les valeurs glissées se trouvent exactement sous le pointeur ; au-delà d'une limite, elles suivent un élastique ; les relâchements conservent la vitesse de la main.
• Contenu réel. Des détails plausibles, et une action conserve son nom tout au long d'une séquence. Les photos viennent de la personne, ou, si elle demande une vraie photo et n'en a pas, de scripts/photo.mjs avec son crédit dans l'élément ; sinon, dessinez dans le code uniquement ce que le code dessine nettement, jamais un paysage (references/directions.md, Images).
• Un moment signature, et tout le reste autour est calme.
• Interdit sauf si la demande le nomme : tout ce qui est sur la liste interdite dans references/craft.md, que le lint signale.
• Pour tout le monde. Il fonctionne au pointeur, au toucher et au clavier, avec un focus visible et des cibles de 44 px. Il tient sur un écran de 360 px sans texte en dessous de 11 px, et en mouvement réduit, ses ressorts atterrissent immédiatement.
• Le coût compte. Chaque appel d'outil dépense l'utilisation de la personne. Construisez une fois, vérifiez en trois tours au maximum, donnez à une vérification qui se comporte mal deux tentatives, et ne déboguez pas les scripts eux-mêmes : nommez ce qui n'a pas été vérifié dans la remise.

Démonstration ou produit

Une démonstration, comme une séquence pour une page d'accueil, reçoit le mouvement complet. Un contrôle dans un produit fonctionnel bouge moins à mesure qu'une personne le voit souvent : rien pour quelque chose d'utilisé cent fois par jour, rapide et léger pour quelque chose d'utilisé des dizaines de fois. references/craft.md contient le tableau (règle de fréquence d'Emil Kowalski).

Où va le fichier

Sans projet, écrivez-le dans le dossier de travail sous un nom court dérivé de son sujet, comme tea-timer.html, sauf si la personne nomme un chemin. Dans un projet, placez-le là où la note de stack le dit, nommé dans le style du projet, et montrez-le quelque part où la personne peut l'ouvrir : une page ou une route dédiée si la demande n'en nomme aucune. Gardez les nombres réglables de l'élément ensemble en haut de son script : les données, et toute temporisation que le registre ne définit pas.

Remise

Répondez avec :

• Où se trouve l'élément, comment l'ouvrir (le fichier, ou la route et la commande qui démarre le serveur de développement), et une ligne sur ce que c'est et son moment signature.
• Deux ou trois choses à essayer : « faites glisser le bouton au-delà de la fin », « appuyez sur Tab, puis sur les flèches ».
• Deux boutons à ajuster, nommés comme ils apparaissent en haut du script.
• Où va leur photo, si un dessin remplace une photo : l'élément à remplacer par un <img> du leur.
• Ce qui n'a pas été vérifié, le cas échéant, comme Safari sur un vrai téléphone.
• Une offre de réattribuer une partie de l'apparence (node scripts/deal.mjs --redeal palette), et pour une demande vague, trois variantes derrière un sélecteur.

Pour une séquence, proposez l'exportation vidéo : node scripts/export.mjs reel.html --out reel.mp4 (ou --gif) la rend avec ffmpeg, en faisant la moyenne de quatre sous-images par image pour le flou de mouvement.

Scripts

Script	Fait
scripts/deal.mjs --brief "…" [--tone …] [--register …] [--dark] [--project]	Attribue trois apparences ; --pick <n> imprime la feuille de style choisie (et la conserve comme apparence du projet avec --project) ; --redeal <part> réattribue une partie ; --check vérifie la bibliothèque
scripts/lint.mjs <file>	Vérifications statiques d'un fichier autonome ; se termine par 1 sur un ÉCHEC
scripts/snap.mjs <file or url> --out <dir> --sheet [--size WxH] [--times …] [--do "…"] [--calm]	Images sur une horloge arrêtée avec entrée réelle et une planche contact, puis les vérifications de la page figée que son en-tête liste
scripts/export.mjs <reel> [--out reel.mp4] [--gif]	Une séquence en MP4 ou GIF avec un flou de mouvement de quatre sous-images
scripts/photo.mjs "<what it shows>" [--out photo.jpg]	Une photo sous licence ouverte (CC0, domaine public ou CC BY) sauvegardée là où elle est exécutée, avec la ligne de crédit pour l'élément ; seulement si la personne demande une vraie photo

Ils nécessitent Node 22 ou ultérieur et un navigateur Chromium : snap.mjs trouve Chrome, Chromium, Edge ou Brave à son emplacement habituel, et tout autre via CHROME. Quand aucun n'est trouvé, il le dit en une ligne : révisez le code avec references/review.md et nommez les images comme non vérifiées. Export nécessite aussi ffmpeg, et photo.mjs un réseau. Rien à installer.

Sans shell

Là où les scripts ne peuvent pas s'exécuter, comme dans un chat sans shell : lisez library/directions.json, library/palettes.json et library/type.json, gardez les entrées dont les types et les tons correspondent à la demande, et prenez l'entrée à la position donnée par la longueur de la demande en caractères, comptée autour de chaque liste, afin que différentes demandes tombent sur différentes apparences. Construisez à partir des mêmes fichiers, révisez le code par rapport à la grille dans references/review.md, et dites dans la remise que les images n'ont pas été vérifiées.

Crédits

• Compétences d'Emil Kowalski