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

Bascule Dark / Light mode par onde circulaire expansive (Master Prompt)

Le prompt d'ingénierie complet pour concevoir une transition de thème jour/nuit spectaculaire par onde de masque circulaire et métamorphose d'icône SVG.

Débutant 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 : les couleurs exactes de mon mode clair [fond clair #F8F9FA, texte #0B0B14] et de mon mode sombre [fond sombre #0B0B14, texte #F8F9FA, couleur d'accent [accent]], le point d'origine du déclencheur (position du bouton dans l'en-tête), et la durée de basculement souhaitée (450ms à 600ms).

</inputs>

<direction>Direction artistique & Règles visuelles

Transition d'ambiance jour/nuit cinématographique (View Transitions API + SVG Morph). Le passage du jour à la nuit ne doit pas ressembler à un rechargement brutal d'écran : il doit être perçu comme une onde de lumière physique qui submerge la scène. L'icône de l'interrupteur ne se contente pas de tourner : ses rayons de soleil se rétractent par rotation horaire pendant qu'une ombre circulaire vient éclipser le disque central pour faire naître un croissant de lune parfait. Simultanément, un masque circulaire (clip-path expansif) se propage depuis le bouton sur tout l'écran. Strictement banni : flashs blancs entre deux états, transitions de couleur hétérogènes où certains textes changent avant le fond, et blocage des animations de la page pendant le basculement.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Durée totale 550 millisecondes, séquencée avec précision : - 0ms - 100ms : Clic utilisateur, enfoncement du bouton (scale 0.92) et calcul des coordonnées clientX/clientY du curseur. - 100ms - 450ms : Propagation de l'onde. Déploiement du cercle de masque clip-path: circle(0% at x y) vers circle(150% at x y) qui inonde l'écran avec une courbe fluide (cubic-bezier 0.4, 0, 0.2, 1). - 150ms - 500ms : Métamorphose de l'icône. Les 8 rayons du soleil se contractent (stroke-dashoffset et scale 0) tandis que le tracé SVG de la lune s'interpole par transition de chemin vectoriel (morphing d'attribut d). - 450ms - 550ms : Stabilisation. L'écran entier adopte sa nouvelle palette sans aucune trace de superposition, le bouton reprend sa taille nominale avec une micro-lueur.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML5/CSS/JavaScript autonome intégrant l'API moderne View Transitions (document.startViewTransition) avec repli élégant sur clip-path CSS pour compatibilité universelle. 2. Calcul du rayon maximal d'inondation : hypoténuse mathématique sqrt(max(x, w-x)² + max(y, h-y)²) pour assurer que l'onde recouvre chaque coin de l'écran quelle que soit la résolution. 3. Rendu 60fps constant avec capture Playwright pour vidéo de présentation d'interface.

</build>

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

N'animez jamais la propriété 'background-color' sur le sélecteur universel '*' : cela détruit les performances du navigateur en forçant le recalcul de style de chaque élément. Utilisez impérativement un pseudo-élément de masque ou la View Transitions API.

</gotchas>

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

Demande-moi d'abord mes codes couleurs et l'emplacement de l'interrupteur (<inputs>), puis livre la formule de masque avant d'écrire le code.

</start>

À remplacer avant de coller : [fond clair #F8F9FA, texte #0B0B14] · [fond sombre #0B0B14, texte #F8F9FA, couleur d'accent [accent]

Pourquoi ça marche mieux

Demande vague

« fais un bouton pour changer de couleur d'écran »

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.

Détail technique de l'animation : - 0ms - 200ms : Clic sur le bouton, compression subtile (scale 0.92). - 100ms - 600ms : Déploiement d'un masque circulaire (clip-path: circle(150% at x y)) recouvrant l'écran de manière théâtrale. - 150ms - 550ms : Les rayons du soleil se rétractent par rotation horaire (rotation 90deg, opacity 0) pendant qu'un cercle d'ombrage vient éclipser le centre pour former le croissant de lune. - Le résultat produit un effet immersif digne des meilleures applications mobiles modernes.

Pour améliorer la réponse, relancez

Adapte le composant pour React ou Next.js avec prise en charge de next-themes.
Ajoute un son subtil de clic mécanique (audio synthétisé avec l'API Web Audio).

Conseil. Utilisez la propriété clip-path plutôt que de changer la couleur de fond brutalement : cela permet à l'utilisateur de percevoir le changement d'ambiance comme une lumière qui s'allume physiquement.

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