Motion design et vidéo · Vidéos de lancement et publicité

Comparatif Avant / Après avec séparateur animé (Master Prompt Split-Screen)

Le prompt d'ingénierie complet pour mettre en scène une transformation radicale avec un balayage cinématique en écran scindé et masquage synchronisé.

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 : mon sujet de comparaison [produit, service ou transformation], la description exacte de l'état "Avant" (problématique, lent, désorganisé ou obsolète) et de l'état "Après" (automatisé, instantané, épuré et rentable), les visuels ou maquettes associées à chaque état, et une couleur d'accent [couleur d'accent].

</inputs>

<direction>Direction artistique & Règles visuelles

Démonstration de transformation radicale par écran scindé (Split-Screen Wipe). Le curseur séparateur ne se contente pas de masquer bêtement une image : il révèle la métamorphose physique des éléments. Lorsque le séparateur balaye l'écran, le chaos de l'état Avant (feuilles volantes, tableaux illisibles, alertes rouges) se réorganise instantanément en composants épurés, cartes ordonnées et validations vertes dans l'état Après. Deux badges flottants "Avant" et "Après" s'ajustent dynamiquement. Strictement banni : séparateurs épais et disgracieux, décalages géométriques entre les deux scènes, transitions en fondu croisé mou qui donnent une impression de bouillie visuelle, et textes tronqués.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

Durée totale 14 secondes, 3 phases de mise en scène : - 0.0s - 3.0s (Le constat Avant) : Plein écran sur la situation complexe non optimisée. Une jauge de temps indique "3 heures perdues par jour" avec des pastilles d'alerte clignotantes. - 3.0s - 9.0s (Le balayage transformateur) : Une ligne laser lumineuse verticale (largeur 2px avec lueur diffuse) s'élance depuis la gauche. Elle coupe l'écran en deux et révèle la solution moderne au fur et à mesure de son passage. La ligne effectue un aller-retour élégant (pause à 50% au centre pour observer le contraste saisissant). - 9.0s - 14.0s (Le triomphe Après) : La ligne glisse complètement hors champ à gauche. L'état Après prend 100% de l'écran avec affichage des bénéfices : "98% de temps économisé", bouton d'action et logo final.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML/CSS/JS autonome. Utilisation de CSS clip-path: inset() ou de masques SVG vectoriels pilotés par la fonction seek(t). 2. Parfaite superposition géométrique : les deux scènes partagent la même grille de coordonnées pour que chaque élément de l'état Avant se métamorphose à son emplacement exact. 3. Séparateur interactif : disque central à double poignée (◀ ▶) avec ombre portée 3D et onde lumineuse pulsante. 4. Rendu haute précision à 60fps via Playwright et ffmpeg.

</build>

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

Ne jamais décaler les points de fuite ou les échelles entre les deux scènes : le moindre décalage d'un pixel entre l'élément "Avant" et l'élément "Après" brise l'illusion de métamorphose sous le passage du curseur.

</gotchas>

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

Demande-moi d'abord la description de mes deux états (<inputs>), puis propose-moi le storyboard comparatif avant d'écrire le code complet.

</start>

À remplacer avant de coller : [produit, service ou transformation] · [couleur d'accent]

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