feitangyuan/motion-web

Que fait motion-web ?

Web créatif centré sur le mouvement. Cette compétence gère toutes les phases : référence → concept → spécification → construction → audit.

Cette compétence construit des pages web entières. Le mouvement est ce qui les rend bonnes ; ce n'est pas l'ensemble du travail. Une requête sans aucun mouvement — « fais une page d'atterrissage », « fais-moi ce site vitrine » — relève toujours de cette compétence, et le livrable est un site fini : stack, tokens, sections, copy, composants, états, métadonnées, déploiement.

Ordre de priorité — 1 et 2 sont d'égale importance :

1. Concept du mouvement et chorégraphie d'interaction
2. Conception de la page — structure, échelle typographique, palette, rythme d'espacement, ce à quoi elle ressemble avant que quoi que ce soit ne bouge
3. La page en tant qu'artefact construit — sections et leur contenu, vocabulaire des composants, couche de tokens, états hors du chemin heureux (page-blueprints.md, components.md, project-setup.md, production-polish.md)
4. 3D légère ou canvas seulement lorsqu'elle renforce la page
5. Performances, accessibilité, replis pour mouvement réduit

Un bon mécanisme sur une page par défaut est une page ratée. Le mouvement est l'avantage, pas l'excuse. L'échec le plus courant de cette compétence est de livrer une interaction astucieuse collée sur une mise en page que personne n'a conçue — si la page vous embarrasserait avec le mouvement désactivé, elle n'est pas terminée, et aucun réglage de ressort ne la sauve. La conception n'est pas une étape 2 dans le temps ; c'est une deuxième chose qui doit aussi être vraie à la fin. → references/page-design.md, references/design-slop.md

C'est une compétence de conception et de construction pour une classe de site : le web créatif et marketing — pages d'atterrissage, pages produit, portfolios, sites de studio, campagnes, éditorial, documentation légère. Elle les construit de bout en bout. Ce n'est pas une compétence pour les tableaux de bord / interfaces d'admin / applications riches en données, ni un générateur de scène 3D complet (ceux-ci sont dirigés vers 3d-scene-studio). Une page créative contenant des fragments d'application — un tableau de prix, une connexion, une capture d'écran de console — est dans le périmètre ; une interface produit connectée ne l'est pas.

---

Détection d'intention agentique (CRITIQUE — Lisez Ceci en Premier)

L'utilisateur dira souvent très peu de choses. Détectez son intention à partir d'une entrée minimale et agissez de manière autonome.

Signal → Carte d'intention

Ce que l'utilisateur envoie	Intention détectée	Que faire
« fais une page web » / « fais une page d'atterrissage/site vitrine/portfolio » avec un sujet, sans référence	full-build	Le site entier, pas un mécanisme. page-blueprints.md → project-setup.md → page-design.md → construire → components.md → production-polish.md
« Que mettre sur cette page » / « Quelles sections » / « Architecture de l'info » / « Comment écrire le contenu »	blueprint	page-blueprints.md — choisir une colonne vertébrale, écrire du vrai contenu, marquer chaque fait inventé
« Navigation » / « Bouton » / « Formulaire » / « Carte » / « Footer » / « FAQ » / « Tableau de prix » / « Pop-up » / « Composant »	component	components.md — d'abord la table des dialectes, puis la matrice des états. Un composant sans ses états n'est pas terminé
« Quel stack technique » / « Astro ou Next » / « Comment démarrer le projet » / « design token » / « Police » / « Déploiement »	setup	project-setup.md — l'échelle de la page ≠ l'échelle du mouvement ; commencer au barreau 0 et grimper
« Ça ressemble à une démo, pas à un produit fini » / « L'aperçu OG est vide » / « Pas de favicon » / « 404 » / « État vide » / « Mode sombre » / « Le formulaire n'est pas validé »	polish	production-polish.md — tout est vérifiable ; exécuter §9 plutôt que d'estimer
Une URL nue (sans autre texte)	url-drop	L'ouvrir et la déconstruire (étapes 1–2 du Mode Replication), puis demander : la reconstruire, ou l'utiliser comme référence pour quelque chose à eux ?
Une URL + « fais une page web » ou « réfère-toi à ça »	replicate → build	D'abord déconstruire l'URL (Mode Replication), puis proposer un concept de mouvement pour le propre contenu de l'utilisateur
référence + « reproduis et archive comme case » / « stocke dans la compétence » / « fais-en un cas »	case-authoring	cases/AUTHORING.md — d'abord la porte de la Phase 0 : retirer les images de la référence ; si rien ne survit, régler les actifs avant de construire, pas après
Une URL + « reproduis » / « fais quelque chose de similaire » / « réfère-toi à ça pour faire »	replicate	Déconstruire → mapper aux motifs → construire immédiatement.
Une URL vers un article/paper/blog	doc-drop	Le lire, nommer les techniques avec des valeurs extractibles, en construire une si demandé (Document / Article Drop ci-dessous)
Un brief vague (« fais une page web cool » / « fais un portfolio »)	freeform-build	Orchestrer via composition-guide.md → choisir style+arc indépendamment
Un sujet uniquement (« fais une page d'atterrissage sur l'IA »)	spec → build	Orchestrer via composition-guide.md → proposer une direction visuelle, construire immédiatement
Un brief détaillé avec références	spec → build	Écrire MOTION_SPEC.md → obtenir l'approbation → construire
« Audit » / « Quel est le problème » / « Écart »	audit	Inspecter le travail existant pour les lacunes de mouvement/perf/accessibilité — y compris l'image fixe, selon design-slop.md
« Pas beau » / « Trop moche » / « On dirait de l'IA » / « Pas de sens du design » / « Banal »	design-audit	Capture d'écran avec le mouvement désactivé et exécuter les portes de design-slop.md. Ne pas régler les ressorts — la plainte concerne l'image fixe
« Mise en page » / « Typographie » / « Texte trop petit » / « Espace blanc » / « Structure » / « Toutes les sections se ressemblent »	design	page-design.md — macrostructure, échelle typographique, rythme d'espacement, mesuré par rapport aux lauréats actuels de récompenses
« Ajoute… » sur une page existante	incremental-build	Étendre l'implémentation actuelle avec un nouveau mouvement
Une référence vidéo (clip Pinterest/Dribbble/X)	video-ref	STOP — exécuter le Protocole de Référence Vidéo ci-dessous avant d'écrire du code
« Mauvaise sensation » / « Trop rigide » / « Ne suit pas le doigt » / « Trop stable » sur un mouvement existant	handfeel-tune	Auditer selon handfeel.md — ressorts, couplage de vitesse, mouvement secondaire
« Suit mais il manque toujours quelque chose » / « Saccades » / La sensation varie avec le framerate sur tout ce qui suit (caméra, curseur, rail, infobulle)	handfeel-tune	Pas le ressort du §1 — handfeel.md §7 : 1-exp(-k·dt), le terme d'avance speed/k, et ne jamais corriger après le filtre
« Peut-on éviter GSAP » / Juste un entrance ou un parallaxe / veut plus léger	build	Vérifier d'abord le barreau 1.5 — animation-timeline / animation-trigger / sibling-index() natifs → échelle de build-mode.md + pattern-recipes.md #16. Firefox obtient l'état final statique
Le matériel est un lieu réel (filmé/scanné), on veut y entrer	build	Barreau 5.5 — splats gaussiens 3D avant les modèles → échelle de build-mode.md
Les cartes/images doivent être pliées, drapeaux, pages tournées, capture d'écran clouée sur une surface en 3D, « le skew ne suffit pas »	warp	Homographie coin-pin → pattern-recipes.md #17. Protéger chaque quadrilatère et limiter l'inclinaison du bord à asin(h/w) — un quadrilatère non protégé peint un bloc de la taille de l'écran sans erreur
« On ne peut pas cliquer » / « Un seul est cliquable » / « Personne ne le remarquera » / « Invisible » sur un mouvement existant	affordance-audit	Ne pas toucher au code de test de hit d'abord. Auditer selon affordance.md — le mécanisme est généralement correct ; l'invitation manque ou a expiré
Un tas d'images d'actifs + « fais une scène 3D » / « avec de la profondeur » / « la caméra doit pouvoir entrer »	image-plane-3d	Ne pas chercher des modèles. Construire la scène à partir de plans plats dans une vraie caméra perspective → image-plane-3d.md (barreau d'échelle 5)
« Ça a l'air assemblé » / « Pas fondu » / « On dirait collé » sur une scène rendue	image-plane-3d	Mesurer avant de toucher à l'art : moyenne R−B et luminance par lot d'actifs, ombres de contact présentes → image-plane-3d.md §6–7
« Comment dessiner ça » / « DOM ou canvas » / La page ne produit que du div et des polices système / La référence n'est clairement pas faisable en DOM	render-layer	D'abord la couche, puis le mécanisme → render-layer.md §1. La couche est une déclaration, écrite dans le README du cas, vérifiée par verify_case.py --layer
3D dessinée à la main / ligne de plume / style contour, « comme dessiné pas comme rendu », ondulation / ligne tremblante / grain de papier	ink-render	render-layer.md §3 — contour à discontinuité de profondeur (désactiver les plis de normale), séparation du warp statique et du boil dynamique, horloge du boil à 11 Hz contre rendu 60fps
Plaques/images brutes qui doivent encore être découpées, « découpage », « comment mettre l'actif dans la scène », « l'image est floue »	asset-pipeline	Keyer sur le fond propre de l'image, recadrer sur la boîte englobante alpha, scripter les métadonnées, imprimer le budget de résolution par élément → image-asset-pipeline.md
N'importe quelle vérification headless ; un nombre ne correspond pas à ce que vous voyez ; « comment vérifier »	verify	Construire d'abord la surface de sonde — horloges épinglables, __seek, __hold, sorties d'état — puis mesurer → verification-harness.md
« Rien ne se passe ici » / « Mauvais rythme » / « Beaucoup de texte d'un coup » sur une timeline au scroll	timeline-audit	Disposer chaque piste sur un seul axe de scroll ; les battements morts sont des plateaux coïncidents, pas une couche lente → timeline-orchestration.md
Scène de scroll longue avec beaucoup d'actifs ; « Ça rame », « Chargement lent », « Mémoire explosée », des centaines de plaques	scene-streaming	Activer par fenêtre d'écran, découper les gros uploads, céder la main dans le scan, disposer complètement → scene-streaming.md
Tout ce qui concerne le son — BGM, ambiance, SFX d'interaction, « trop peu d'effets sonores », « l'ambiance est difficile à entendre mais ne doit pas non plus être bruyante »	scene-audio	Trois bus (bgm / main / monde), courbes par acte, événements discrets sur un fond plus fort → scene-audio.md

Ne jamais demander à l'utilisateur quel mode utiliser. Le détecter. Procéder. Ne s'arrêter que si le brief est vraiment ambigu entre deux résultats très différents (par exemple, spécification ou construction immédiate).

---

Protocole de Référence Vidéo (Règle stricte — Ne pas deviner)

Déclencheur : la référence est une vidéo que vous ne pouvez pas réellement regarder — épingle Pinterest, extrait Dribbble, clip X, lien court externe. Un titre ou une description textuelle n'est PAS une information de mouvement.

0. Lire le fil avant de conclure qu'il n'y a pas de page en direct. L'auteur poste presque toujours l'URL dans une réponse, et les réponses vous disent aussi si l'œuvre est même une page web. Mesuré le 2026-09-02 : une session précédente a déclaré sept références vidéo sans URL et a passé sa Phase 1 à la mesure d'images ; les sept avaient des sites en direct, postés par les auteurs eux-mêmes, et trois des quatre clips dans un seul message se sont avérés être des rendus Jitter / Figma Motion / Rive sans implémentation web du tout (cases/AUTHORING.md Phase 1). safe-x tweet <url> --json, puis résoudre chaque lien t.co dans les réponses.
1. Ne jamais construire de mouvement à partir d'une supposition. Si tout ce que vous avez extrait est un titre/description, vous connaissez le sujet, pas le mouvement. Construire quand même brûle une itération complète — c'est un mode d'échec documenté (2026-07-06, héros de fruits de mer : supposé « orbite », réel était une diagonale montante ; deux reconstructions).
2. Demandez immédiatement 2–3 images clés. Une phrase : « Je ne peux pas ouvrir cette vidéo, envoie-moi 2-3 images clés (entrée/milieu/sortie) ».
3. Énoncer la trajectoire comme géométrie explicite avant de coder, et obtenir confirmation :
   • Points d'ancrage : où l'élément entre / atteint le sommet / sort (coins, tiers)
   • Attitude : rotation suit la tangente du chemin / reste constante / traîne derrière
   • Réactions secondaires : quoi d'autre bouge (formes d'arrière-plan, lignes, texte) et comment
   • Exemple : « Entrée en bas à droite → centre → sortie en haut à gauche en diagonale montante, tête de poisson toujours pointée vers le haut à gauche » — les mauvaises suppositions meurent ici, pas dans le code
4. Ensuite seulement, mapper aux pattern-recipes / handfeel.md et construire.

Une seule capture d'écran suit la même règle : une image donne la pose, pas la trajectoire. Si le chemin compte, demandez plus d'images.

---

Mode Réplication (复刻模式)

Lorsque l'utilisateur envoie une URL avec « reproduis » / « fais quelque chose de similaire » / « peux-tu faire cet effet » — la déconstruire, puis construire. Il n'y a pas d'étape de stockage ; le livrable est la page.

Chemin d'exécution de la réplication

1. Ouvrir la page et la lire comme trois couches, avec les outils de navigateur disponibles (Claude Preview, browser-use, Playwright) : le stack (bibliothèque, easing, keyframes, variables CSS — les noms des bundles le révèlent), la chorégraphie de scroll (quel élément est épinglé sur quelle bande, rails et leur distance en px, taux de parallaxe, propriétés modifiées, points d'entrée — échantillonner ~9 positions de scroll et diff getBoundingClientRect ainsi que les styles calculés entre elles), et la couche WebGL (nombre de programmes, appels de dessin, noms d'uniforms personnalisés ; envelopper getContext avant l'exécution des scripts de la page si vous avez besoin des sources des shaders). Deux scripts couvrent les moitiés mesurables : scripts/measure_structure.py <url> pour la page statique (sections, nav, boutons, échelles de tokens, médias, méta, débordement mobile) et scripts/measure_churn.py <url> pour la quantité de la page qui bouge réellement sous une vraie molette. L'URL doit être l'œuvre elle-même, jamais une liste de galerie (awwwards.com/sites/<slug>) : une page de liste vous donne le chrome de la galerie elle-même, et six lauréats différents reviennent avec la même bibliothèque, les mêmes keyframes et la même police.

2. Déconstruire — énoncer ce que vous avez trouvé, et citer les nombres plutôt que des impressions :

   • « GSAP 3.12 + ScrollTrigger + Lenis ; .home-animate__wrapper est épinglé entre 0.25–0.50, pendant ce temps .icon se déplace horizontalement de +1545px, la sortie est en stagger de 0.25/0.38/0.62 sur trois segments »
   • « L'arrière-plan est en WebGL2 natif, 14 programmes, 944 appels de dessin, les uniforms incluent bloomStrength/blurTexture1-5 et cloudCoverage/cloudDensity — c'est UnrealBloom + nuages volumétriques »

   Ne jamais signaler « utilise WebGL » sur un seul contexte — un contexte 300×150 non dimensionné avec aucun programme lié est une détection de capacité à la Modernizr, pas une scène. Compter les programmes liés et les appels de dessin.

3. Mapper aux pattern-recipes — trouver la recette la plus proche dans references/pattern-recipes.md

4. Combler l'écart — ce que la référence utilise que nous n'avons pas dans les recettes, écrire à partir de zéro en fonction des valeurs extraites

5. Construire immédiatement — échafauder la page, l'exécuter, vérifier visuellement

6. Rapporter — « Reproduction de l'effet principal de [site], réalisé avec [X] pour [Y], différence avec l'original : [Z] »

Réplication ≠ Copie

• Faire : Recréer le modèle d'interaction, le caractère du mouvement, la sensation de timing
• Ne pas faire : Copier les couleurs de marque propriétaires, le texte exact, l'interface utilisateur de produit identifiable
• Faire : Adapter la technique au propre contenu et à la palette de l'utilisateur
• Noter dans le rapport ce qui a été adapté par rapport à ce qui était fidèle à l'original

---

Mode Construction Libre (Quand l'Utilisateur Ne Donne Aucune Direction)

Lorsque l'utilisateur dit « fais une page web » / « fais n'importe quoi » / « trouve un thème toi-même » ou donne un sujet vague simple (par ex. « fais une page d'atterrissage pour une plateforme d'agents IA »), c'est une invitation à être créatif. Ne PAS utiliser par défaut un modèle générique, ne PAS utiliser un routage 1-vers-1 rigide, et ne PAS poser de questions de clarification.

Chemin d'action en mode libre (Boucle créative d'exécution — la création se produit dans l'exécution, pas avant)

1. Choisir un style parmi la liste dans composition-guide.md §2.1 (par ex. « cyberpunk », « japonais », « brutaliste », etc.)
2. Choisir un arc — linéaire, en zigzag, montée cathartique ou cyclique (même section, §2.2)
3. Produire le concept de mouvement directement en tant que squelette de page — pas un document de spécification séparé. La page est la spécification.
4. Construire la page entière — stack, tokens, sections, contenu, composants, états, déploiement
5. Vérifier — exécuter le dépistage de production-polish.md §9

Ne PAS tomber dans une paralysie de planification. Cette compétence a été conçue pour que le moment créatif soit le moment de la construction, pas un document de spécification séparé. Livrer la page. L'utilisateur vous a dit de faire une page, pas de rédiger un brief de conception.

---

Mode "Lâcher de Document / Article"

Lorsque l'utilisateur envoie un lien vers un article, un article de blog ou un document technique qui n'est pas une page web existante. Le livrable est un résumé des techniques extractibles, et une construction si demandé.

Chemin d'exécution

1. Lire et indexer — ouvrir le document, trouver les techniques qui ont des valeurs extractibles (équations d'easing, paramètres d'interpolation, configurations de timeline)
2. Écrire le résumé article-deconstruction.md dans le répertoire actuel du projet, couvrant :
   • La technique principale et sa fonction
   • Valeurs extractibles (code, paramètres, timing)
   • Comment cela pourrait être appliqué à une page web (s'il est applicable)
3. Proposer de construire — « Je peux construire une page web en utilisant cette technique. Tu veux que je le fasse ? »
4. Si accepté, construire en utilisant la technique comme élément central du concept de mouvement

---

Ordre de Priorité par Défaut pour la Cession d'Actifs

Lors de la construction, gérer toujours les images dans cet ordre :

1. Charger d'abord chaque image dans la vision de l'outil — si l'image ne peut pas être lue, le résultat sera flou ou déformé
2. Utiliser un traitement sémantique — générer les actifs manquants via DALL-E / Imagen
3. Vérifier la résolution — la largeur minimale est de 1280px. En dessous, interlacer ou abandonner

---

Règles Architecturales Transversales

1. Règle de 200 lignes — n'importe quel fichier unique > 200 lignes doit être divisé
2. Règle des 10 tokens — n'importe quel fichier CSS avec > 10 variables de tokens personnalisées doit être éclaté en tokens/variables.css
3. Règle de l'interaction unique — un composant qui gère plus d'une interaction doit utiliser un gestionnaire d'état (useReducer, xstate, ou une machine simple)
4. Règle de l'écriture de composant — un composant doit écrire son propre contenu s'il nécessite des données qui ne peuvent pas être résolues dans les props

---

Architecture de la Compétence

references/
├── page-blueprints.md         # Plans de page, contenu, IA
├── project-setup.md           # Stack, tokens, polices, déploiement
├── page-design.md             # Conception visuelle, typographie, rythme
├── components.md              # Système de composants, dialecte, états
├── production-polish.md       # Meta, 404, états vides, accessibilité
├── design-slop.md             # Porte de capture d'écran d'image fixe
├── handfeel.md                # Ressorts, sensation, suivi
├── affordance.md              # Invitation d'interaction
├── pattern-recipes.md         # Motifs de mouvement réutilisables
├── build-mode.md              # Échelle native vs. GSAP vs. canvas
├── composition-guide.md       # Styles et arcs pour le mode libre
├── timeline-orchestration.md  # Disposition de piste de timeline
├── render-layer.md            # Couche de rendu (DOM/Canvas/WebGL/Ink)
├── image-plane-3d.md         # Scènes 3D à partir de plans plats
├── image-asset-pipeline.md    # Pipeline d'images prêtes pour la scène
├── scene-streaming.md         # Optimisation du flux de scène
├── scene-audio.md             # Conception sonore pour scènes
├── verification-harness.md    # Sondes et mesures headless
skills/
├── verify-skills/             # Scripts de vérification
│   ├── verify_case.py
│   └── verify_structure.py
cases/                         # Cas archivés ("Livre de cuisine")
├── AUTHORING.md               # Instructions pour l'archivage des cas
└── *.md                       # Cas archivés individuels

---

Règles Générales Additionnelles

• Comportement de débordement — si la construction d'un élément pousse la page en dehors de la fenêtre d'affichage, ajouter du défilement plutôt que de déformer l'élément
• Convention de nommage des fichiers — le kebab-case est la norme de la compétence pour les nouveaux fichiers (les noms de fichiers en camelCase pour la construction du projet sont autorisés si le framework les impose, mais la norme de la compétence elle-même est le kebab-case)
• Pas de commentaires chinois dans le code du projet — les commentaires et les messages de validation doivent être en anglais pour la construction du site ; les README.md des cas peuvent être bilingues