Motion design et vidéo · Démos logicielles et interfaces

Morphing d’interface continu en boucle (Master Prompt @twoclipping)

Le prompt d'ingénierie complet pour générer une animation de morphing d'interface de niveau Dribbble en code pur (HTML, Canvas ou Playwright).

Intermédiaire Essayé le 28 octobre 2026

Master Prompt d’ingénierie Motion Design

Prompt Master Motion Design (Architecture complète)

Prêt à copier dans Claude 3.7 Sonnet, Cursor ou votre environnement de code

<inputs>Paramètres d’entrée requis

Demande-moi d'abord : 8 à 12 états d'interface que la forme doit adopter (ex: bouton, loader, coche de validation, dynamic island, lecteur audio, curseur de volume, commutateur toggle, onglets, graphique de données, palette de commande ⌘K, toast de notification), une palette noir & blanc pur ou avec une seule couleur d'accent [couleur d'accent], et un morceau musical libre de droits calé à environ 120 BPM [lien ou tempo musical].

</inputs>

<direction>Direction artistique & Règles visuelles

Niveau de motion design digne de Dribbble. Une seule forme continue, jamais de coupure (cut) : chaque état est le même élément qui métamorphose sa taille, son rayon de bordure (border-radius) et sa couleur pendant que son contenu permute avec un très court flou directionnel. Un curseur souris pilote chaque changement avec de vrais clics et glissements (drags). Fond gris chaud lumineux (#f4f4f2), composants noirs et blancs, une police d'interface nette et épurée (Geist ou Inter). Des ressorts physiques (springs) partout, avec un dépassement minime (overshoot subtil). La caméra effectue un zoom pour que chaque état remplisse l'écran. La dernière image est identique à la première, pour une boucle parfaite. Strictement banni : amortissements rebondissants exagérés (bouncy easing de template), explosions de particules, lueurs néon artificielles, dégradés criards sur les bordures UI, épaisseurs de traits d'icônes disparates, temps morts, et tout ce qui ressemble à un modèle préfabriqué.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Tempo à 120 BPM, 7 mesures musicales, un événement visuel se produit sur chaque temps fort (beat). Bouton → loader circulaire → coche validée → dynamic island → lecteur audio avec métamorphose play/pause → balayage de la barre de progression → transformation en curseur de volume qui s'étire élastiquement quand on tire au-delà du maximum → bascule d'un interrupteur toggle sur le temps fort → le curseur de l'interrupteur devient un indicateur liquide d'onglets → les onglets s'ouvrent en un graphique qui se trace de lui-même avec infobulle au survol → repli en palette de commande ⌘K → saisie de texte pour filtrer → touche entrée → toast de confirmation → retour instantané au bouton initial.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML unique, format carré 1440x1440. Chaque style est calculé mathématiquement à partir du temps à l'intérieur d'une fonction seek(t) : aucune transition CSS asynchrone, aucun setTimeout/setInterval, aucun état persistant entre les images. 2. Les ressorts physiques (springs) sont des réponses scalaires analytiques à forme fermée (closed-form step responses). Une valeur changeant plusieurs fois de cible est la somme d'un ressort par impulsion, restant ainsi une fonction mathématique pure du temps. 3. Les deux bords de l'indicateur d'onglets sont régis par des ressorts asymétriques : le bord d'attaque s'étire en avant du bord arrière pour créer l'effet de goutte liquide. Même principe pour le curseur du toggle. 4. Les glissements (drags) sont des manipulations directes : tant que le curseur est enfoncé, la valeur est calculée depuis sa position. Au relâchement, elle revient par ressort élastique depuis son point d'arrêt. 5. Analyse de la grille rythmique de la musique pour démarrer sur un temps fort (downbeat). Chaque bruitage sonore d'interface (click, whoosh, pop) est positionné sur son pic acoustique mesuré. 6. Rendu par Playwright : 4 sous-images calculées par frame, fusionnées avec le filtre tmix de ffmpeg pour un flou de mouvement (motion blur) cinématographique naturel à 60 images par seconde. 7. Génération d'une image fixe par temps fort avant le rendu vidéo final pour corriger immédiatement tout décalage, surcharge ou problème de lisibilité.

</build>

<gotchas>Pièges techniques & Erreurs à éviter

Ne jamais appliquer will-change sur un élément que la caméra met à l'échelle, sous peine de rendre le texte flou. Le texte qui permute dans un conteneur en métamorphose nécessite son propre timing d'entrée et de sortie calibré, sinon les mots se chevauchent. La dernière image doit être rigoureusement identique à la première (position et vélocité du curseur incluses), sinon la boucle bégaye.

</gotchas>

<start>Consigne d’amorçage & Démarrage

Demande-moi d'abord les paramètres d'entrée (<inputs>), puis présente-moi la liste détaillée des états calés sur la grille rythmique avant d'écrire la moindre ligne de code.

</start>

À remplacer avant de coller : [couleur d'accent] · [lien ou tempo musical]

Pourquoi ça marche mieux

Demande vague

« anime une interface qui change de forme »

L’IA doit deviner : réponse générale, ou questions en retour.

Avec R.C.T.F.

Rôle, contexte, tâche et format sont précisés : la réponse est utilisable presque telle quelle.

Exemple de résultat

Réponse obtenue avec Claude, Cursor, le 28 octobre 2026. Votre résultat sera différent : l’IA ne répond jamais deux fois pareil.

Claude répond en engageant la phase d'initialisation : « Bonjour ! Avant de générer le code du composant, définissons ensemble les paramètres d'entrée pour calibrer l'animation : 1. Quels sont les 8 à 12 états d'interface souhaités pour votre produit ? (Par défaut : Bouton d'action -> Loader -> Coche de confirmation -> Dynamic Island -> Carte lecteur audio -> Curseur de réglage -> Graphique analytique -> Toast final). 2. Confirmez-vous une palette monochrome minimaliste (Fond #f4f4f2, noir #0b0b14) avec une couleur d'accent unique (ex: Bleu cobalt #1747A0 ou Rose #F06BA8) ? 3. Avez-vous un fichier audio spécifique à 120 BPM, ou souhaitez-vous que je cale la grille sur un tempo standard (1 battement = 500 ms) ? Dès votre retour, je vous dresse la chronologie mesure par mesure avant de livrer le code HTML/Canvas complet. »

Pour améliorer la réponse, relancez

Fournis le script Python ou Node.js avec Playwright et ffmpeg pour exporter la vidéo en MP4 60fps.
Adapte la séquence pour un format vertical 9:16 pour les réseaux sociaux (TikTok/Reels).

Conseil. La fonction seek(t) est le secret des vidéos en code professionnelles : en rendant chaque image purement dépendante d'un instant 't' en millisecondes, votre vidéo ne subira jamais de ralentissement ou de perte d'images, même sur une machine modeste.

Essayé avec

Apprendre à écrire vos propres prompts

La formation gratuite « L’IA pour entrepreneurs » vous apprend la méthode R.C.T.F. en vidéo, avec des exercices et un quiz.

Suivre la formation gratuite