Vendre et promouvoir · Promotions et lancements

Séquence d’accueil et cartes d'onboarding animées

Animez un parcours d'onboarding mobile avec cartes coulissantes, indicateurs à billes étirables et transitions fluides.

Intermédiaire Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un lead designer mobile spécialisé dans l'expérience utilisateur et les transitions gestuelles d'onboarding.

Contexte

Je conçois l'introduction de mon application [nom de l'application ou service]. Elle comporte 3 étapes clés : [étape 1, ex: Découvrir les offres], [étape 2, ex: Commander en un clic], [étape 3, ex: Suivre sa livraison en direct]. La palette visuelle utilise [couleurs de l'application].

Tâche

Rédige le code complet (HTML/CSS/JS léger avec gestes tactiles ou boutons) d'un carrousel d'onboarding avec cartes empilées en perspective 3D. Chaque glissement vers la gauche doit éjecter la carte active avec légère rotation, amener la carte suivante au premier plan et métamorphoser la puce de pagination (indicateur étirable 'worm' ou 'liquid dot').

Format

Un fichier HTML5 autonome responsive (format mobile centré avec cadre de smartphone optionnel) comprenant le CSS 3D (perspective, transform-style: preserve-3d) et la gestion des clics / swipes.

À remplacer avant de coller : [nom de l'application ou service] · [étape 1, ex: Découvrir les offres] · [étape 2, ex: Commander en un clic] · [étape 3, ex: Suivre sa livraison en direct] · [couleurs de l'application]

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