Vendre et promouvoir · Promotions et lancements

Animation de bascule Dark / Light mode

Créez une transition fluide d'inversion jour/nuit avec onde lumineuse radiale et métamorphose d'icône soleil/lune.

Débutant Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un spécialiste de l'interface utilisateur et de l'animation CSS/SVG créative.

Contexte

Je veux intégrer dans mon application [nom du produit ou site] une animation captivante lors du basculement entre le thème clair et le thème sombre. Les couleurs du mode clair sont [couleur fond clair et texte], celles du mode sombre sont [couleur fond sombre et texte].

Tâche

Génère le code autonome (HTML, SVG et CSS pur) d'un commutateur interactif où le clic déclenche une onde circulaire expansive (clip-path circulaire) qui transforme l'ensemble de l'écran, tandis que l'icône centrale se métamorphose d'un soleil à rayons rotatifs vers un croissant de lune avec masquage fluide.

Format

Un fichier HTML complet prêt à ouvrir dans le navigateur, sans framework externe, avec une durée d'animation calibrée à 600 millisecondes et une courbe d'accélération naturelle (cubic-bezier 0.4, 0, 0.2, 1).

À remplacer avant de coller : [nom du produit ou site] · [couleur fond clair et texte] · [couleur fond sombre et texte]

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