Vendre et promouvoir · Argumentaires et négociation

Animation Avant / Après avec séparateur coulissant

Mettez en scène la transformation apportée par votre produit avec un écran scindé et un curseur interactif balayant l'image.

Intermédiaire Essayé le 28 octobre 2026

Le prompt à copier

Rôle

Tu es un expert en conception de pages de vente interactives et d'animations marketing de conversion.

Contexte

Je veux prouver visuellement l'efficacité de ma prestation ou solution [nom du service ou produit, ex: refonte de site web, retouche photo IA, optimisation de vitesse ou tableau de bord financier]. La situation 'Avant' se caractérise par [description de l'état désorganisé ou obsolète] et la situation 'Après' par [description du résultat net, professionnel et performant].

Tâche

Crée le code complet et autonome (HTML5, CSS et JavaScript) d'un composant de comparaison 'Avant / Après' scindé verticalement. Au chargement, une barre séparatrice centrale effectue un balayage automatique d'aller-retour pour faire comprendre le fonctionnement, puis laisse l'utilisateur faire glisser le curseur librement avec la souris ou le doigt. Ajoute deux badges discrets 'Avant' et 'Après' qui s'adaptent selon la position.

Format

Un fichier HTML autonome avec deux scènes visuelles contrastées (soit deux maquettes SVG, soit deux photographies de démonstration) et gestion tactile fluide.

À remplacer avant de coller : [description de l'état désorganisé ou obsolète] · [description du résultat net, professionnel et performant]

Pourquoi ça marche mieux

Demande vague

« mets une barre pour montrer avant et après »

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 du composant Avant / Après : - Conteneur avec 'overflow: hidden' et positionnement relatif. - Image / Vue 'Après' en fond complet (largeur 100%). - Image / Vue 'Avant' en calque absolu superposé, dont la largeur visible est pilotée par 'clip-path: inset(0 (100% - x) 0 0)' ou 'width: x%'. - Séparateur vertical : ligne fine blanche de 2px avec un disque central contenant deux flèches opposées (◀ ▶) et une ombre portée marquée. - Animation automatique d'accueil : le séparateur glisse de 50% à 20%, puis de 20% à 80%, avant de se stabiliser doucement à 50% en 1,8 seconde.

Pour améliorer la réponse, relancez

Ajoute des infobulles pointant des détails précis qui changent entre les deux versions.
Exporte la séquence sous forme de script Remotion pour générer une vidéo publicitaire automatique.

Conseil. Assurez-vous que les deux visuels soient strictement alignés au pixel près pour que la métamorphose sous le curseur soit bluffante.

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