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

Onboarding mobile en pile de cartes 3D (Master Prompt Liquid Swipe)

Le prompt d'ingénierie complet pour créer un carrousel d'onboarding mobile avec cartes empilées en perspective 3D et indicateur liquide étirable.

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 : le nom de mon application [nom du produit/app], les 3 à 4 étapes clés du parcours d'accueil [étapes clés, ex: Connexion instantanée, Synchronisation des données, Notification en direct], l'ambiance visuelle (fond clair studio ou sombre futuriste), et la typographie souhaitée.

</inputs>

<direction>Direction artistique & Règles visuelles

Parcours d'onboarding mobile de classe mondiale (Apple Design Award). Les cartes ne glissent pas à plat comme un diaporama PowerPoint ordinaire : elles sont empilées dans un espace 3D tridimensionnel avec perspective réelle, ombres portées douces physiques et inertie de ressort. Chaque balayage (swipe) éjecte la carte supérieure avec une rotation tangentielle naturelle, pendant que la carte suivante s'élève au premier plan en se détendant. La pagination inférieure utilise une bille liquide étirable (liquid worm indicator) qui s'allonge en pilule avant de reprendre sa forme sphérique. Strictement banni : défilements horizontaux saccadés sans physique, rebonds excessifs non amortis, ombres portées noires opaques sans diffusion, et boutons statiques sans état d'enfoncement.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

12 secondes au total (3 secondes par étape) : - Étape 1 : Carte 1 au premier plan (scale 1.0, z-index 3). Un curseur tactile vient glisser la carte vers la gauche. La carte pivote de -8° et s'envole hors champ en fondu dégressif. - Transition de pile : La carte 2 (précédemment à scale 0.94, translateY 16px) monte au premier plan avec un rebond doux de ressort (stiffness 280, damping 24). - La puce de pagination : La goutte de sélection liquide s'étire vers la droite de 8px à 28px de large avant de se contracter sur la nouvelle position. - Étape finale : La dernière carte valide l'onboarding avec une coche animée verte, et le bouton d'action principal s'élargit en pleine largeur pour inviter à démarrer.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML5/CSS3/JavaScript complet, responsive, centré dans un châssis de smartphone moderne avec îlot dynamique. 2. Espace 3D : perspective: 1200px et transform-style: preserve-3d configurés sur le conteneur principal. 3. Ressorts physiques closed-form step responses pour chaque déplacement de carte. 4. Exportation vidéo haute fidélité à 60fps via Playwright.

</build>

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

Toujours appliquer les transitions d'opacité sur le conteneur parent et non sur les éléments 3D internes pour éviter l'aplatissement de la pile de cartes sous WebKit et Chromium.

</gotchas>

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

Demande-moi d'abord mes 3 étapes clés et mon style (<inputs>), puis valide l'empilement des cartes avant de livrer le code.

</start>

À remplacer avant de coller : [nom du produit/app]

Pourquoi ça marche mieux

Demande vague

« fais un carrousel de bienvenue »

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.

Architecture des transitions : - Carte 1 (active) : scale 1.0, translateZ 0px, opacity 1. - Carte 2 (en attente) : scale 0.92, translateY 20px, translateZ -60px, opacity 0.7. - Carte 3 (arrière-plan) : scale 0.85, translateY 40px, translateZ -120px, opacity 0.4. - Au swipe : la carte 1 glisse vers la gauche (-120% translateX) avec rotation de -8 degrés, la carte 2 s'élève au premier plan avec rebond élastique (cubic-bezier 0.34, 1.56, 0.64, 1). - L'indicateur de page actif s'étire en une pilule ovale de 24px avant de se contracter à 8px sur la nouvelle position.

Pour améliorer la réponse, relancez

Ajoute un bouton « Passer l'introduction » qui saute directement à l'écran final avec fondu doux.
Propose des illustrations vectorielles SVG animées pour chaque étape.

Conseil. La perspective 3D CSS donne un sentiment de profondeur tactile immédiat. Réglez 'perspective: 1000px' sur le conteneur parent pour un effet naturel.

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