caceresfjulian/motion-figure

Figure de mouvement

Cette compétence produit des figures qui bougent ou répondent à une entrée. Elle comporte trois niveaux. Utilisez cette compétence avec Claude, Cursor, Codex, OpenClaw, Hermes ou tout agent qui lit le fichier SKILL.md.

Niveau	Ce qu'il produit	Où il va
1. Figure de leçon	Animation SMIL déclarative, ou widget curseur qui redessine un SVG. Les deux se montent via une clôture figure.	Leçons du cours
2. Figure mécanique	Un panneau HTML qui montre les parties nommées d'un système. Le lecteur pilote une commande et lit un verdict calculé.	Pages autonomes, README, essais, site du cours hors leçons
3. Champ de tramage	Une bande WebGL de points de tramage ordonné dans les couleurs papier, accent et encre, avec quatre mouvements initialisés.	En-têtes de page et séparateurs de sections

Le niveau 1 a le plus de règles, car l'environnement d'exécution des leçons a des limites strictes. Les niveaux 2 et 3 ont leurs propres fichiers de référence.

Quand l'utiliser

• Une leçon explique un processus qui évolue dans le temps : un jeton qui passe par des étapes, une file d'attente qui se remplit, une boucle qui se répète.
• Une leçon explique une formule où une entrée modifie la sortie : taux d'apprentissage, température, taille de bloc, taille de lot.
• Un auteur écrit « anime cette figure », « ajoute un curseur » ou « rend le diagramme interactif ».
• Une page a besoin d'une démo où le lecteur change une chose et voit ce que fait le système : un cache, une file d'attente, une fenêtre de contexte, un routeur. Utilisez le niveau 2.
• Une page a besoin d'un en-tête lent aux couleurs du cours. Utilisez le niveau 3.

Quand ne pas l'utiliser

• L'idée est une structure fixe sans axe temporel ni entrée. Réalisez une figure SVG statique. La compétence sœur blueprint-figure couvre les figures statiques.
• La page est une page d'explication complète avec son propre modèle d'état et sa géométrie machine. La compétence sœur isometric-explainer couvre cela.
• Vous avez seulement besoin de la palette, des polices ou des règles de prose. La compétence sœur course-style les contient. Cette compétence copie les parties nécessaires dans references/tokens.md.

Méthode

1. Écrivez une phrase qui nomme le seul changement que la figure montre. Si vous avez besoin de deux phrases, créez deux figures.

2. Choisissez le niveau. À l'intérieur d'une leçon, utilisez le niveau 1. Pour le niveau 2, lisez references/mechanism-figures.md et commencez avec templates/mechanism.html. Pour le niveau 3, lisez references/dither-fields.md et copiez templates/dither.js. Les étapes ci-dessous concernent le niveau 1. Au niveau 1, utilisez une figure animée lorsque le temps est la variable. Utilisez un widget curseur lorsqu'un nombre est la variable.

3. Choisissez un nom en kebab-case, par exemple request-path ou context-budget. Recherchez d'abord ce nom dans le registre. Un module ultérieur qui enregistre le même nom remplace la figure précédente.

4. Placez le code dans un fichier module nommé figures-<sujet>.js. Enveloppez-le dans une IIFE, lisez window.LF, et retournez tôt s'il est manquant.

5. Écrivez une fonction figure function (host, cfg). Elle ajoute une carte .lf à host et peut retourner une fonction de suppression.

6. Construisez la carte : .lf-head avec un .lf-label en majuscules et un indice court, .lf-body, et .lf-cap avec la légende.

7. Utilisez viewBox="0 0 520 H" pour le SVG. La plupart des figures du cours utilisent une H de 200 à 250. Une barre unique nécessite moins.

8. Ajoutez un <title> et un <desc> avec des id que vous créez une fois, en dehors de toute fonction de rendu.

9. Pour une figure animée, ajoutez d'abord les entrées, puis une boucle lente. Suivez references/smil-rules.md ligne par ligne.

10. Pour un widget curseur, définissez state._render avant d'appeler LF.slider ou LF.select. Ensuite, appelez state._render() une fois à la fin.

11. Appelez LF.register({ 'votre-nom': fn }) à la fin du module.

12. Dans le Markdown de la leçon, ajoutez la clôture. Mettez le nom sur la première ligne et une configuration JSON facultative après :

    ```figure
    context-budget {"windowK": 32}
    ```
    

13. Exécutez les vérifications dans « Vérifier avant de terminer ». Regardez la figure en thème clair, thème sombre, à 375 px de largeur et avec mouvement réduit activé.

Comment la page monte une figure

• L'analyseur Markdown transforme la clôture en <div class="lesson-figure" data-figure="nom {json}">.
• La construction du site analyse le Markdown des leçons pour les noms de clôture. Elle trouve le fichier module qui contient le nom cité et écrit un manifeste. Un nom de clôture sans fournisseur arrête la construction.
• La page charge uniquement les modules dont la leçon a besoin, dans un ordre fixe. Les nouveaux fichiers module vont après ceux répertoriés, dans l'ordre alphabétique.
• La fonction de montage lit le premier mot comme nom et analyse le reste comme JSON. Un JSON invalide donne un cfg vide.
• Si la fonction figure lance une erreur, l'environnement d'exécution vide l'hôte et enregistre un avertissement. Le reste de la leçon s'affiche quand même.
• Après le montage, l'environnement d'exécution ajoute un titre, une description, role="img" et des étiquettes de contrôle si elles sont manquantes. Il ajoute un bouton Pause lorsque la figure a une animation SMIL, et un bouton Replay lorsque toute animation est jouée une fois.
• L'environnement d'exécution met l'animation en pause lorsque la figure quitte la zone d'affichage, lorsque l'onglet est masqué et lorsque le lecteur appuie sur Pause. Avec mouvement réduit ou impression, il affiche l'image fixe.

references/toolkit.md décrit chaque fonction de l'environnement d'exécution et contient deux exemples complets de modules.

Règles

Figures animées :

1. Utilisez uniquement <animate>, <animateTransform> et <animateMotion>. N'utilisez pas setInterval ou requestAnimationFrame dans une figure.
2. Limitez chaque figure à 55 éléments SVG ou moins.
3. Les entrées vont de l'opacité 0 et l'échelle 0.95 à l'opacité 1 et l'échelle 1. Ne commencez jamais une échelle à 0.
4. Les entrées utilisent calcMode="spline" et keySplines="0.23 1 0.32 1". La durée d'entrée est de 0.5 à 0.6 s.
5. Échelonnez les débuts d'entrée de 0.05 à 0.4 s. Les sorties sont plus courtes que les entrées.
6. Les boucles durent de 2.5 à 6 s et utilisent repeatCount="indefinite". Ne définissez pas fill="freeze" sur une boucle, car l'environnement d'exécution la jouerait alors une fois.
7. Chaque liste keyTimes a autant d'entrées que values. Elle commence à 0, se termine à 1 et ne diminue jamais.
8. Chaque liste keySplines a une entrée de moins que keyTimes. Utilisez-la uniquement avec calcMode="spline".
9. Un animateMotion avec keyPoints utilise calcMode="linear". Son nombre de keyPoints est égal à son nombre de keyTimes. Il n'a pas de values.
10. Ne mettez pas var() dans une valeur fill ou stroke animée. Animez l'opacité d'un second élément qui a la couleur cible.
11. Les boucles animent uniquement l'opacité, la transformée, stroke-dashoffset ou le mouvement le long d'un chemin. L'environnement d'exécution fait jouer une fois toute animation de x, y, x1, y1, x2, y2, width, height, r, cx, cy, rx ou ry.
12. L'image à l'attribut data-static-time de l'hôte (par défaut 1.5 s) est complète et lisible. Définissez l'attribut sur l'hôte lorsqu'un moment ultérieur montre l'état complet.
13. Mettez à l'échelle un élément autour de son centre. Dessinez le contenu d'un groupe autour de (0, 0) et déplacez le groupe avec translate. Ajoutez l'échelle avec additive="sum".

Widgets curseur :

14. Écrivez uniquement en ES5 : var, expressions de fonction, concaténation de chaînes. Pas de fonctions fléchées, let, const ou littéraux de gabarit.
15. Définissez state._render avant le premier appel LF.slider ou LF.select. Le curseur encapsule la fonction de rendu lors de sa création.
16. Dans state._render, supprimez tous les enfants SVG et ajoutez-les à nouveau. Ne modifiez pas les nœuds sur place.
17. Créez les id une fois, en dehors de state._render. L'environnement d'exécution supprime les attributs que les nouveaux nœuds n'ont pas, y compris les id.
18. Faites croître les barres par longueur ou par stroke-dasharray sur un chemin. Ne faites pas croître les barres avec l'échelle, car les nœuds réconciliés se mettent à l'échelle depuis leur centre.
19. Gardez chaque étiquette de curseur courte et en minuscules avec l'unité entre parenthèses, par exemple taille du bloc (jetons).

Les deux types :

20. Prenez chaque couleur d'une variable CSS avec la valeur du thème clair comme valeur par défaut, par exemple var(--blueprint,#3553ff). Utilisez des hexadécimaux littéraux uniquement lorsqu'aucune variable ne fonctionne.
21. Utilisez au plus une couleur d'accent (--blueprint) pour le sujet principal et --warn pour un second état. Utilisez les jetons d'encre et de règle pour le reste.
22. Réglez le texte SVG à 12 unités ou plus, en var(--font-mono). Si les étiquettes doivent être plus petites, donnez au SVG une largeur minimale de 500 px et laissez-le défiler horizontalement.
23. Mesurez la taille des étiquettes sur un téléphone. Sur un écran de 375 px, un SVG de 520 unités dans la carte mesure 279 px de large. Une étiquette de 12 unités mesure alors environ 6.4 px.
24. Rédigez la légende en anglais technique simple. Nommez ce que chaque couleur signifie. Gardez les phrases à 25 mots ou moins.
25. Donnez l'étiquette dans .lf-label en majuscules, de deux à quatre mots.

Figures mécaniques (niveau 2) :

26. Affichez des noms réels et des nombres réels : noms de fichiers, clés, nombres de jetons. Jamais « élément 1 » ou une barre grise sans nom.
27. Donnez au lecteur une commande : pas, curseur, bascule, lecture ou arrêt d'une partie.
28. Terminez par une ligne de verdict en texte, calculée à partir des nombres dans le corps. N'écrivez jamais un résultat fixe.
29. Exécutez une fois lorsque 35 % de la figure est visible, ajoutez un bouton Replay et ne bouclez jamais.
30. Animez uniquement transform et opacity, avec cubic-bezier(0.23, 1, 0.32, 1). Appui : 120 à 160 ms, révélation : 200 à 300 ms, repli : 380 à 500 ms.
31. Échelonnez les listes de 30 à 70 ms par élément, uniquement pour les 8 premiers éléments.
32. Gardez chaque étiquette entière à chaque image : pas de points de suspension, pas de chevauchement, pas de texte sur les points. Texte 11 px ou plus, verdict 12.5 px ou plus.
33. À 320 px, empilez les panneaux en une seule colonne et donnez à chaque commande une cible tactile de 40 px.
34. Utilisez un mécanisme qu'aucune autre page du site n'utilise et ajoutez-le à la table des mécanismes du site.

Champs de tramage (niveau 3) :

35. Lisez les couleurs de --bg, --blueprint et --ink, et redessinez lorsque data-theme change.
36. Dessinez à 30 images par seconde au maximum, et uniquement lorsque la bande est visible.
37. Avec mouvement réduit, dessinez une image statique. Sans WebGL, affichez un hachurage statique.
38. Marquez la bande aria-hidden="true" et ne mettez aucun texte sur les points, à l'exception de la pastille d'étiquette.

Vérifier avant de terminer

• Le nom de la clôture correspond exactement au nom enregistré, et aucun autre module ne l'enregistre.
• Le module ne contient pas =>, let, const ou de chaînes avec accents graves.
• Le module ne contient pas setInterval ni requestAnimationFrame.
• Le validateur dans references/smil-rules.md renvoie une liste vide pour l'hôte monté.
• Chaque figure animée a 55 éléments SVG ou moins.
• Chaque boucle a une durée de 2.5 à 6 s.
• Aucune boucle n'anime un attribut de géométrie de la règle 11.
• Avec mouvement réduit activé, la figure montre une image complète et aucun élément n'est manquant.
• En thème sombre, chaque ligne et chaque étiquette sont visibles.
• À 375 px de largeur, chaque étiquette est lisible et la page n'a pas de défilement horizontal en dehors de la figure.
• Pour un widget, le déplacement de chaque curseur à son minimum et son maximum ne donne pas de NaN, pas de largeurs négatives et pas d'erreurs dans la console.
• Le SVG a un titre et une description, et leurs id restent les mêmes après le déplacement d'un curseur.
• La légende nomme chaque couleur que la figure utilise.
• Niveau 2 : chaque élément de la liste de vérification à la fin de references/mechanism-figures.md est réussi.
• Niveau 3 : chaque élément de la liste de vérification à la fin de references/dither-fields.md est réussi.

Fichiers

• references/smil-rules.md : les douze règles SMIL complètes, ce que chaque règle empêche et un validateur exécutable dans la console du navigateur.
• references/toolkit.md : les fonctions LF et la séquence de montage. Il contient également un widget curseur complet, une figure SMIL complète et une page de prévisualisation pour une utilisation en dehors du site du cours.
• references/tokens.md : jetons de couleur pour les thèmes clair et sombre, polices et valeurs de temporisation de mouvement.
• references/mechanism-figures.md : niveau 2. Noms réels, figures rejetées, formes de mécanisme, anatomie, verdict, budget de mouvement et vérifications.
• references/dither-fields.md : niveau 3. Comment le shader dessine, les quatre mouvements, le balisage, les règles, les barres tramées et les vérifications.
• templates/mechanism.html : une figure de niveau 2 complète, un cache LRU avec un contrôle de taille, qui s'ouvre dans n'importe quel navigateur.
• templates/dither.js : un script de niveau 3 complet. Chargez-le et ajoutez <div class="dither" data-seed="...">.

À l'intérieur du dépôt AI Engineering from Scratch, voir également site/lesson-figures.js pour l'environnement d'exécution et site/figures-*.js pour plus de figures.