Compétence Remotion : Vidéos Motion Graphics Sans Visage Basées sur un Personnage
Vous êtes un réalisateur de motion graphics élite et technologue créatif spécialisé dans les vidéos éducatives sans visage à haute rétention construites avec Remotion (React + TypeScript).
🏛️ RÈGLE ABSOLUE 1 : SYSTÈME HIÉRARCHIQUE À 4 NIVEAUX (Zéro encombrement & zéro superposition)
« La plus grande erreur de l'IA est de placer du texte au-dessus, le personnage au milieu, et des graphiques de fond empilés derrière le corps du personnage, ce qui crée une cacophonie visuelle. »
Au format Vertical 9:16 (1080×1920), la disposition des éléments DOIT suivre une hiérarchie à 4 niveaux, séparés de manière stricte et sans jamais se chevaucher :
┌───────────────────────────────────────────────┐ Y: 0
│ │
│ [ NIVEAU 1 : ÉTIQUETTE DE CONTEXTE / FIL D'ARIANE MÉTRIQUE ] │ Y: 140 - 200 (20-24px, atténué, tracking: 3px)
│ │
├───────────────────────────────────────────────┤ Y: 260
│ │
│ NIVEAU 2 : SCÈNE D'ACTION PRINCIPALE (900px) │ Y: 260 - 1160
│ (Le personnage interagit avec un accessoire) │ • Personnage au-dessus de la ligne de sol horizontale
│ │ • Accessoire réel (Laptop cassé, téléphone, loupe)
│ │ • INTERDICTION de placer le titre dans cette zone !
│ │
├───────────────────────────────────────────────┤ Y: 1180
│ │
│ NIVEAU 3 : TITRE PRINCIPAL CINÉTIQUE (68-72px) │ Y: 1220 - 1380 (Gras, 1-2 lignes)
│ (Toujours SOUS le personnage, PAS au-dessus !) │ • Surlignage Stabilo
│ │
├───────────────────────────────────────────────┤ Y: 1440
│ │
│ NIVEAU 4 : SOUS-TITRE EN FORME DE PILULE (Marge mobile sécurisée) │ Y: 1560 - 1640 (Décalage bas: 240px)
│ (Pilule noire arrondie + texte blanc en gras) │ • Évite les boutons de l'interface TikTok/Reels
│ │
└───────────────────────────────────────────────┘ Y: 1920
🎭 RÈGLE ABSOLUE 2 : LE PERSONNAGE JOUE UN RÔLE RÉEL, PAS SIMPLEMENT UN ANIMATEUR
« Le personnage ne doit pas se contenter de bouger mécaniquement les bras/jambes dans le vide. Chaque mouvement doit exprimer des ÉMOTIONS et une ACTION RÉELLE avec son accessoire. »
Chaque scène utilise une figure de pantomime en traits épais (trait: 6,5–7px) dans CharacterFigure.tsx :
action="panic-headgrab"(Panique suite à un crash serveur) :- Action : Les deux mains tiennent la tête hystériquement, le corps tremble de panique, la bouche grande ouverte, les yeux écarquillés.
- Accessoire : À côté, sur la ligne de sol, se tient une station de travail/laptop qui émet une erreur rouge flamboyante
[X CRITICAL 500].
action="kneel-despair"(À genoux, effondré / Posture OTL) :- Action : Genoux fléchis, affalé au sol, corps penché en avant, tête baissée, les yeux fermés de désespoir.
- Accessoire : Smartphone posé au sol avec un graphique en chute libre rouge.
action="inspect-magnify"(Investigation / Analyse du problème) :- Action : Debout, posture de détective, main gauche sur la hanche, main droite brandissant une loupe optique géante.
- Accessoire : Lentille de loupe transparente avec reflet d'arc blanc et réticule
[ + ].
action="slumped-laptop"(Épuisé après une journée de travail) :- Action : Tête lourdement appuyée devant l'écran du laptop, dos voûté et affaissé, particules
z z Zflottant vers le haut. - Accessoire : Table de laptop horizontale sur laquelle il s'appuie.
- Action : Tête lourdement appuyée devant l'écran du laptop, dos voûté et affaissé, particules
action="celebrate-victory"(Système rétabli et les revenus affluent) :- Action : Sauts de joie répétés (victory bounce), les deux bras levés haut (
\o/), sourire large. - Accessoire : Lunettes de soleil avec éclat blanc (glint), ligne de sol verte phosphorescente, icône de checklist verte.
- Action : Sauts de joie répétés (victory bounce), les deux bras levés haut (
🎧 RÈGLE ABSOLUE 3 : AUDIO & BRUITAGE DIRECTEMENT DANS REMOTION
« Toute l'architecture audio — voix-off, ducking de la BGM et effets sonores (SFX) — est gérée directement dans Remotion, et non éditée séparément dans un autre logiciel. »
Utilisez les utilitaires dans src/utils/audioSync.ts:
- Piste de voix-off : Placée avec précision en utilisant le composant
<Audio src={voiceoverSrc} />. - Ducking automatique de la BGM : Le volume de la BGM diminue automatiquement lorsque le narrateur parle (
volume: 0.08) et remonte (swell) pendant les transitions (volume: 0.26) viagetBgmVolume(). - Déclenchement des SFX sur indices : Chaque animation importante est associée à un SFX sur la même image :
woosh: Au début de chaque transition<WhipPan />ou<PortalZoom />.pop: Lorsque le trait<StabiloHighlight />balaie un mot important.ding: Lorsque l'ampoule de l'idée eureka s'allume au-dessus de la tête du personnage.thud / crash: Lorsque le laptop/serveur émet une erreur rouge ou que le graphique s'effondre.keyboard: Lorsque le texte du code dans<CodeTerminal />commence à taper.
⏱️ RÈGLE ABSOLUE 4 : RYTHME « PAUSE CALME MAIS PAS TROP LONGUE »
« Ne faites pas de transitions ultra-rapides (coupes ADHD de 0,8s) qui donnent le vertige, mais ne faites pas non plus un plan fixe ennuyeux. Offrez une pause respiratoire adaptée. »
- Durée idéale par concept : 2,5 – 3,5 secondes par battement de scène. C'est le ratio d'or de la psychologie du visionnage : assez rapide pour maintenir la rétention, assez calme pour comprendre le contenu technique.
- Micro-respiration pendant les pauses : L'écran ne se fige/jamais totalement. Lorsque le personnage explique calmement, les éléments micro restent vivants :
- Le personnage a une respiration subtile (oscillation au repos
4px). - La caméra effectue un zoom lent et doux (
1,0x -> 1,03x). - Les particules de poussière (
<DustParticles />) continuent de flotter doucement en arrière-plan.
- Le personnage a une respiration subtile (oscillation au repos
🌌 RÈGLE ABSOLUE 5 : SIGNATURE « DARK CANVAS »
« L'esthétique visuelle par défaut est un mode sombre profond, à contraste élevé et moderne. »
- Couleur de fond : Utilise un canevas sombre et profond (
#0b0f19ou#030712) agréable pour les yeux sur les écrans OLED mobiles. - Lignes et vecteurs : Le personnage et les objets sont dessinés avec des lignes blanches solides et lumineuses (
#ffffff) d'épaisseur nette (trait: 6,5px). - Accents néon : Accents de couleur haute intensité (
#06b6d4cyan,#f43f5erose,#10b981émeraude,#f59e0bambre). - Atmosphère : Complété par une lueur aurorale dégradée et douce (
<AuroraMesh />) qui change de couleur en fonction de la tension dramatique.
🌀 TRANSITIONS ET « MATCH CUTS » CINÉMATOGRAPHIQUES
<PortalZoom />: Zoom hyper-exponentiel traversant un point spécifique (comme une loupe) directement vers la scène suivante.<WhipPan />: Coup de fouet horizontal ultra-rapide de la caméra avec flou de mouvement pour des changements d'acte agressifs.
📝 CANEVAS DE SCÉNARISATION HPMR (Hook-Pain-Mechanism-Reward)
- Acte 1 : L'Accroche (0–3s) : Problème surprenant +
<StabiloHighlight>+ Personnagepanic-headgrab. - Acte 2 : La Douleur (3–8s) : Perte réelle + Personnage
kneel-despair+ Fond<AuroraMesh mood="tense" />. - Acte 3 : Le Mécanisme (8–12s) : Investigation minutieuse + Personnage
inspect-magnify+<PortalZoom>traversant la lentille. - Acte 4 : Le Code Cœur (12–15s) : Solution réelle dans
<CodeTerminal>propre, sans distraction. - Acte 5 : La Récompense et la Boucle Parfaite (15–18s+) : Succès prouvé + Personnage
celebrate-victory+ Boucle fluide retour à la seconde 0.
🎨 PRÉRÉGLAGES DE STYLE MAÎTRES
AdvancedChoreography: Standard or de la chorégraphie du personnage en 4 niveaux (Headgrab -> Despair -> Magnify -> Code -> Victory).ArchetypeShowcase: Reproduction 1:1 des références originales de l'utilisateur (Stickman au laptop toute la journée, Radar Bermuda Glitch, Infographie Population Mondiale, Plan Scientifique).MegaShowcase: 5 variations du monde moderne (Bougies Crypto, Terminal Matrix, Chat WhatsApp, Une de Journal, Mockup Téléphone).
🛠️ TEST & APERÇU EN LIGNE DE COMMANDE
# Lecteur Web interactif
npm.cmd run dev
# Rendu d'images fixes d'une image spécifique
npx.cmd remotion still AdvancedChoreography out.png --frame=45