Vendre et promouvoir · Promotions et lancements

Système de notifications toast empilables avec physique

Concevez un empilement dynamique de notifications avec effet de ressort, jauge de disparition et fermeture par balayage.

Intermédiaire Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un ingénieur UI spécialisé dans les micro-interactions avancées et les systèmes de composants interactifs.

Contexte

Je veux intégrer un système de notifications toasts interactives dans [nom de la plateforme ou application SaaS]. Les types de messages possibles sont [types, ex: succès de paiement, nouvelle commande reçue, alerte de stock]. L'identité visuelle privilégie [style minimaliste sombre ou clair, couleur d'accent].

Tâche

Crée le code complet (HTML/CSS/JavaScript vanilla) d'un conteneur de notifications situé en bas à droite de l'écran. Chaque notification qui arrive doit glisser depuis le bas, pousser les anciennes notifications en créant une pile de cartes (pile style 'Sonner' avec échelle décroissante et ombre portée cumulée), afficher une fine barre de progression du temps restant, et disparaître au survol ou par glissement vers la droite.

Format

Un fichier HTML autonome incluant une interface de test avec 3 boutons permettant de déclencher des notifications différentes pour visualiser l'empilement dynamique.

À remplacer avant de coller : [nom de la plateforme ou application SaaS] · [style minimaliste sombre ou clair, couleur d'accent]

Pourquoi ça marche mieux

Demande vague

« fais des alertes qui s'affichent en bas »

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.

Comportement de l'empilement (Toast Stack) : - Notification active (n°1) : translateY(0), scale(1), z-index 10. - Notification précédente (n°2) : translateY(-14px), scale(0.95), z-index 9, opacity 0.9. - Notification la plus ancienne (n°3) : translateY(-26px), scale(0.90), z-index 8, opacity 0.7. - Au survol de la pile : les notifications s'écartent automatiquement (expansion verticale) pour laisser lire chaque message. - Barre de progression inférieure animée de 100% à 0% en 4 secondes, se mettant en pause au survol de la souris.

Pour améliorer la réponse, relancez

Ajoute une action contextuelle « Annuler » dans la notification avec décompte interactif.
Adapte le composant pour un affichage centré en haut sur les écrans mobiles.

Conseil. Limitez le nombre de cartes visibles simultanément à 3 dans la pile. Au-delà, masquez les plus anciennes avec 'opacity: 0' pour éviter de surcharger l'interface.

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