Motion design et vidéo · Typographie cinétique et showreels

Bande démo Showreel de motion designer en code (Master Prompt)

Le prompt d'ingénierie complet pour générer un showreel de motion designer époustouflant codé en pur HTML/Canvas/Remotion.

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 nom ou nom d'agence [nom du créateur/agence], mes 3 spécialités phares [spécialités, ex: UI Motion, Code créatif, Identité visuelle], ma palette de marque [couleurs phares], mes coordonnées ou lien de contact [lien portfolio/contact], et le morceau de musique dynamique choisi (tempo recommandé 120-130 BPM).

</inputs>

<direction>Direction artistique & Règles visuelles

Un showreel créatif de 15 secondes à couper le souffle, calibré à 60 images par seconde. Aucune seconde perdue. Enchaînement de 4 actes fluides : Acte 1 (Typographie cinétique géante avec découpes masquées et lignes de repères techniques animées), Acte 2 (Morphing d'interfaces logicielles en perspective 3D avec composants interactifs), Acte 3 (Graphismes de données explosifs et particules physiques réactives), Acte 4 (Signature finale avec carte de visite holographique animée et appel au contact). Typographie imposante, contrastes vifs, physique de ressorts naturels (damping élevé, aucun rebond kitsch). Strictement banni : transitions génériques de templates, effets de néon criards des années 2010, saccades de framerate, typographies illisibles, et plans statiques de plus de 1,5 seconde.

</direction>

<structure>Chronologie & Grille rythmique (BPM)

15 secondes, 4 actes synchronisés sur la musique : - 0.0s - 3.5s (Acte 1 - Typographie choc) : Le nom émerge en typographie monumentale, découpe en bandes horizontales alternées, lignes de construction techniques et zoom d'immersion. - 3.5s - 7.5s (Acte 2 - Démos UI en cascade) : Une maquette de smartphone 3D surgit, l'interface défile à toute vitesse, un composant se détache en lévitation, bascule en mode sombre avec onde de choc et se replie en carte de crédit animée. - 7.5s - 11.5s (Acte 3 - Données & Code) : Explosion de graphes financiers vectoriels, courbes SVG qui tracent leur trajectoire lumineuse, compteurs numériques qui s'affolent et bascule vers une console de code à frappe laser. - 11.5s - 15.0s (Acte 4 - Signature) : Regroupement de tous les éléments en une carte de profil épurée, logo final avec révélation lumineuse, barre de progression temporelle terminée et affichage des coordonnées.

</structure>

<build>Spécifications techniques & Pipeline de code

1. Un fichier HTML unique, résolution carrée 1440x1440 ou 1920x1080. Architecture horloge seek(t) pure. 2. Rendu subframe avec Playwright et ffmpeg pour un flou de mouvement (motion blur) cinématographique. 3. Intégration de l'accélération matérielle GPU sur tous les calques animés (translate3d, scale3d, rotateZ).

</build>

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

Pour que le showreel paraisse professionnel, la typographie doit être synchronisée à la milliseconde près sur la piste sonore. N'utilisez que des polices haut de gamme (Geist, Syne, Inter, Clash Display).

</gotchas>

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

Demande-moi d'abord mes spécialités et mes éléments de marque (<inputs>), puis livre le découpage seconde par seconde avant le code exécutable.

</start>

À remplacer avant de coller : [nom du créateur/agence] · [spécialités, ex: UI Motion, Code créatif, Identité visuelle] · [couleurs phares] · [lien portfolio/contact]

Pourquoi ça marche mieux

Demande vague

« fais un showreel pour mon portfolio »

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.

Claude répond en engageant la phase d'initialisation : « Bonjour ! Préparons ensemble votre showreel de motion designer en code pur : 1. Quel est votre nom ou le nom de votre studio à afficher en titre d'ouverture ? 2. Quelles sont les 3 compétences ou réalisations clés à valoriser (ex: Morphing UI, Code créatif, Animation de marques) ? 3. Quelle palette de couleurs souhaitez-vous (ex: Fond noir profond #0b0b14, accents blanc pur et vert néon ou bleu cobalt) ? 4. Quel est le lien ou contact final à afficher (ex: portfolio.dev, email ou compte X/LinkedIn) ? Dès vos réponses, je vous détaille le plan de montage seconde par seconde avant de vous fournir le code source autonome. »

Pour améliorer la réponse, relancez

Comment exporter la vidéo directement en MP4 60fps avec Remotion ?
Ajoute un lecteur interactif avec boutons de pause et de rembobinage sur la page web.

Conseil. Un recruteur ou un client décide de la qualité d'un showreel dès les 3 premières secondes : démarrez immédiatement avec votre transition la plus percutante.

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