motion2d-prompt

Prompt motion 2D phare

Ce skill transforme une vision floue en un prompt après lequel le modèle ne prend aucune décision importante par défaut : forme, technique, format de cadre et format de fichier, loi de style, mouvement signature, timing en images, battements ou longueur de boucle, interaction, exportation, liste des éléments à conserver. C'est un jumeau de threejs-world-prompt. Le squelette est le même, mais en 2D le "waouh" est porté par la composition, le savoir-faire du mouvement et le langage des formes, pas par la caméra et le réalisme.

Fichiers de référence : quand les lire

• references/forms.md : toujours, une fois la forme définie. Sections obligatoires pour chacune des 10 formes.
• references/tech.md : toujours au round 0. La matrice forme → technique, les limites de chaque technique, les modèles avec versions épinglées, l'exportation et ses conséquences.
• references/anatomy.md : toujours avant d'écrire. Blocs partagés et niveaux (micro / mid / max / spec).
• references/craft.md : le glossaire du savoir-faire du mouvement : principes d'animation dans le code, easings et ressorts, timing en images, chorégraphie, transitions, typographie en mouvement, boucles, texture, composition. Lire aux rounds 2–4.
• references/patterns.md : modules optionnels (battements, mouvement signature, continuité des objets, morphismes, parallaxe des couches, curseur comme acteur, synchronisation sonore, image poster, hygiène).
• references/examples.md : trois prompts d'étalonnage synthétiques (boucle générative max, typographie cinétique mid, scène de personnage max). Lire celui qui correspond à la forme. Ne pas copier son contenu.

Comment mener la conversation

Règle impérative : l'utilisateur a la vision, vous avez les connaissances. Proposez des décisions concrètes (palette, police, easing, longueur de boucle, technique) et demandez si elles conviennent. Ne demandez pas ce que vous pouvez décider vous-même. Chaque round : résumez ce qui est décidé, proposez des valeurs par défaut, posez 1 à 3 questions sur ce que vous ne savez vraiment pas. Pour les choix fermés, utilisez des options cliquables si l'outil le permet. "Suivant / à vous de choisir" = acceptez les propositions. Sautez les rounds auxquels l'utilisateur a déjà répondu. Objectif : 2 à 5 échanges avant un brouillon.

Round 0 : Forme, niveau, livraison, technique

• Forme (forms.md) : boucle générative / pièce générative infinie / film motion design ou explicateur / typographie cinétique / effet sur une page ou dans une UI / jouet ou instrument 2D / données animées / scène de personnage / micro (logo sting, loader) / pièce shader. Les formes peuvent être combinées ; l'une est primaire.
• Niveau : micro (~80–150 mots), mid (~350–600), max (~1000–1800), spec (format ingénierie).
• Livraison : page live / exportation (MP4, WebM, GIF, séquence PNG, Lottie, SVG) / les deux. Fixez l'export maintenant car il contraint la technique : toute exportation nécessite que l'animation soit une fonction pure du temps, et Lottie nécessite une construction à partir de formes et d'images clés dès la première ligne (tech.md).
• Format de cadre : viewport responsive plein / 16:9 / 9:16 / 1:1 / 4:5 / composant intégré. Pour l'exportation, donnez la résolution et les fps.
• Technique : proposez-la vous-même à partir de la matrice dans tech.md et justifiez-la en une phrase. Demandez seulement quand l'utilisateur a une contrainte (stack du site, bibliothèque déjà dans le projet).

Round 1 : Accroche, ouverture, idée centrale

• Accroche : ce qui empêche quelqu'un de faire défiler la page dans la première seconde.
• Stratégie d'ouverture : image poster (la première image est déjà la meilleure image) / souffle retenu → allumage / ancre → tournant (par exemple une page normale qui commence à se comporter différemment) / in medias res.
• Idée centrale : une phrase autour de laquelle tout tourne.

Round 2 : Loi de style et lisibilité

Proposez vous-même : langage des formes (géométrique / organique / papier découpé / encre / pixel / vecteur plat / dessin technique), trait (épaisseur, extrémités, ondulation), remplissages et texture (grain, papier, demi-teinte, riso, erreur de registre d'impression), une palette de 3 à 6 couleurs nommées avec valeurs hex, typographie (une police Google Fonts, son rôle, les axes variables), composition (grille, marges de sécurité, hiérarchie des points d'attention, espace vide), 3 à 4 anti-patrons, et une règle de lisibilité (chaque image lisible d'un coup d'œil ; texte lisible au rythme du mouvement).

Round 3 : Héros, signature, mécanique

• Héros : l'élément ou le système qui porte toute la pièce (ligne, particules, lettres, personnage, grille, fluide).
• Mouvement signature : un mouvement par lequel cette pièce peut être reconnue (craft.md).
• Mécanique : l'interaction du héros (curseur, défilement, clic, glisser, son) ou une timeline avec battements.
• Image thèse : une image qui résume toute la pièce, pour le poster.

Round 4 : Mouvement et temps

Tempo (BPM ou secondes par battement), timing en images pour les mouvements clés, easings et ressorts en valeurs nommées, chorégraphie (décalage, cascade, chevauchement), transitions, longueur de boucle ou une liste de plans avec codes temporels, ≥5 systèmes de mouvement indépendants dans les formes max. Choisissez des modules dans patterns.md.

Round 5 : Interaction, performance, accessibilité, exportation

Contrôles (minimaux), prefers-reduced-motion (toujours, avec une version réduite concrète), le budget performance pour la technique, détails d'exportation (contrôle, format, résolution, fps, durée, transparence), la liste des éléments à conserver. Langue du prompt : anglais par défaut.

Écrire le prompt

1. Squelette : les blocs partagés de anatomy.md + les sections de la forme de forms.md + le modèle de technique de tech.md + les modules de patterns.md. Les titres #### nomment l'idée.
2. Mode impératif, dense. Décrivez le mouvement avec des nombres : images, millisecondes, courbes (cubic-bezier(.2,.8,.2,1)), ressorts (raideur/amortissement), décalage en ms, BPM. Couleurs en hex, polices par nom.
3. Les niveaux max et spec se terminent par un paragraphe de barre d'acceptation, puis une phrase "En une phrase : …".
4. Exécutez la check-list, corrigez, livrez dans un bloc de code (ou en fichier .md si long ou sur demande). En dessous, 2 à 3 phrases sur les décisions prises au nom de l'utilisateur.

Check-list avant livraison

• Première phrase : forme + technique + une image héros avec 4 à 6 détails concrets en mouvement.
• "Ne pas construire …" (3 à 4 anti-patrons 2D, ex. modèle de motion stock, fondu PowerPoint, économiseur d'écran confettis, clipart) et une reformulation "Construire …"; "Idée centrale :".
• Technique nommée et justifiée, modèle avec versions épinglées de tech.md.
• Format de cadre, résolution et fps (si exportation), comportement au redimensionnement.
• Ouverture correspond à la stratégie ; test de l'image poster et de la première seconde.
• Loi de style : forme, trait, texture, palette avec valeurs hex, police avec son rôle.
• Règle de lisibilité, incluant le rythme de lecture du texte en mouvement.
• Mouvement signature décrit avec des nombres ; easing et timing en valeurs nommées.
• Boucle : longueur en images et règle de transparence ; film : liste de plans avec codes temporels et battements.
• ≥5 systèmes de mouvement indépendants (max) ; test d'image figée.
• Chaque fonctionnalité mentionnée est visible, en mouvement ou consultable.
• Interdictions de dérive de périmètre ; calibrage du ton si le sujet est délicat.
• prefers-reduced-motion avec une version réduite concrète.
• Exportation (si applicable) : animation comme fonction pure du temps, rendu image par image, format, contrôle ; Lottie uniquement dans le sous-ensemble compatible.
• Performance : budget de la technique, DPR ≤ 2, pause hors écran, liste des éléments à conserver ("… n'est jamais échangé").
• Barre d'acceptation (max/spec) et "En une phrase : …".
• Les sections requises par la forme sont présentes ; la longueur est dans la plage du niveau.

Limites

• Le libellé des phrases d'exemple dans les fichiers de référence et dans examples.md n'entre jamais dans le prompt tel quel. Prenez la structure et les décisions, et écrivez chaque phrase dans vos propres mots, y compris les formules techniques et le paragraphe des critères d'acceptation.
• Pas de personnages connus, mascottes, logos ou projets protégés par le droit d'auteur reconnaissables, y compris "dans le style de" un personnage spécifique. Le style d'un mouvement ou d'une époque (Bauhaus, ukiyo-e, suisse, formes papier découpé du milieu du siècle comme langage général) est acceptable ; proposez des personnages et des marques originaux.
• Polices uniquement issues de Google Fonts ou de polices système, sauf si l'utilisateur fournit les siennes.
• Le prompt doit être exécutable dans un navigateur. Si la vision dépasse les limites de la technique (par exemple un million de formes vectorielles en SVG), changez la technique ou l'astuce et nommez-la dans le prompt.