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

Système de notifications Toast empilables en cartes 3D (Master Prompt)

Le prompt d'ingénierie complet pour construire une pile de notifications physiques style Sonner avec échelle décroissante, jauge de temps et éventail au survol.

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 : les types d'alertes ou événements à simuler [types d'alertes, ex: Paiement reçu, Nouvelle commande, Message client], l'ancrage à l'écran (bas-droite, bas-centre ou haut-centre), le thème (sombre épuré #0E0F15 ou blanc éclatant #FFFFFF avec bordure subtile), et la durée de vie de chaque notification (défaut 4 secondes).

</inputs>

<direction>Direction artistique & Règles visuelles

Système de notifications toast physique de niveau Sonner / Vercel. Les notifications ne s'alignent pas en une longue liste encombrante qui masque l'interface : elles s'empilent organiquement comme un jeu de cartes physiques. Chaque nouvelle notification arrive par le bas avec une vélocité marquée, repousse les précédentes qui se réduisent en échelle et s'assombrissent en arrière-plan. Au survol de la pile, celle-ci s'écarte automatiquement en éventail vertical pour laisser lire l'historique complet. Strictement banni : apparitions brutales sans glissement, empilements rigides sans perspective d'échelle, notifications qui se chevauchent de façon illisible, et boutons de fermeture minuscules impossibles à cliquer.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Comportement physique de la pile à 3 niveaux : - Carte active (premier plan, n°1) : translateY(0px), scale(1.0), opacité 1.0, ombre portée prononcée (blur 24px, alpha 15%), z-index 30. - Carte précédente (niveau 2) : translateY(-14px), scale(0.95), opacité 0.85, z-index 20. - Carte la plus ancienne (niveau 3) : translateY(-26px), scale(0.90), opacité 0.65, z-index 10. - Carte n°4 et suivantes : fondu instantané à opacity 0. - Survol de la pile : détection du pointeur déclenchant une expansion instantanée où chaque carte reprend son échelle 1.0 et son espacement complet de 60px avec transition fluide (cubic-bezier 0.16, 1, 0.3, 1). - Disparition : jauge de compte à rebours inférieure (hauteur 2px) qui décroît de 100% à 0%, avec possibilité de balayer (swipe) la carte vers la droite pour la rejeter manuellement.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML5/CSS/JS complet avec interface de démonstration comprenant 3 boutons de déclenchement d'alertes. 2. Gestion de pile par structure de données FIFO (First In, First Out) dynamique en JavaScript. 3. Ressorts physiques pour chaque mise à jour d'index dans la pile.

</build>

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

Mettez en pause le timer d'expiration automatique dès que le curseur de l'utilisateur survole la pile de notifications, sinon une alerte risque de disparaître au moment même où l'utilisateur s'apprête à cliquer dessus.

</gotchas>

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

Demande-moi d'abord mes types d'alertes et mon style (<inputs>), puis présente-moi les règles de la pile avant de livrer le code complet.

</start>

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