Compétence Adaptive React & Remotion pour Graphiques Animés
Cette compétence guide la conception, la direction artistique contextuelle, la structuration narrative fluide et le rendu MP4 sans tête de graphiques animés de qualité studio en utilisant React et Remotion.
Philosophie centrale : "La forme suit le contexte." N'imposez jamais un modèle rigide ou un nombre d'actes fixe à chaque vidéo. Évaluez d'abord la marque, la durée, le rapport d'aspect et le public, puis sélectionnez de manière autonome l'archétype structurel idéal et le langage de conception moderne pour construire une composition React sur mesure.
1. Enquête et Évaluation Préalables des Actifs (Étape 0)
Avant d'écrire du code ou de lancer un rendu, exécutez l'Enquête sur les Actifs et le Diagnostic de Contexte :
🎯 Règle Obligatoire d'Interrogation sur les Actifs
À moins que l'utilisateur n'ait déjà explicitement fourni des fichiers image, des logos ou des tokens de conception dans sa requête, vous DEVEZ demander activement à l'utilisateur quels sont ses actifs existants :
Modèle d'Interrogation Standard : "Avez-vous des actifs tels que logo de marque (SVG/PNG), captures d'écran produit, photos réelles, couleurs officielles (HEX), slogan/copie à utiliser dans la vidéo ?
- Si vous avez des actifs : veuillez indiquer les chemins de fichiers ou les placer dans le dossier
public/du projet pour que je les intègre avec précision dans la vidéo.- Si vous n'avez pas d'actifs ou si vous souhaitez que je les crée ("Faites-le à ma place") : je reconstruirai directement les vecteurs d'identité visuelle officiels de la marque/organisation, et concevrai moi-même des visuels cinématographiques et des composants d'interface utilisateur personnalisés pour finaliser la vidéo."
Routage d'Exécution des Actifs en 3 Pistes :
- Piste A (Actifs Fournis par l'Utilisateur) :
- Vérifiez d'abord l'espace de travail local / le dossier
public/. - Ingérez les chemins vectoriels SVG, les images haute résolution et les captures d'écran via
staticFile('...'). - Appliquez le micro-panoramique Ken Burns (
references/asset-orchestration.md) et les maquettes en perspective 3D.
- Vérifiez d'abord l'espace de travail local / le dossier
- Piste B (Zéro Actif / Génération Autonome) :
- Si l'utilisateur dit "Je n'ai rien", "Faites-le à ma place", ou ne fournit aucun actif : ne vous arrêtez jamais et ne soyez pas bloqué.
- Reconstruisez de manière autonome les marques vectorielles d'identité d'entreprise officielles (
references/brand-identity-and-ci.md). - Synthétisez des métaphores visuelles authentiques au domaine, des cartes stylisées, des badges vectoriels et des motifs géométriques.
- Piste C (Orchestration Hybride) :
- L'utilisateur ne fournit qu'un logo ou une URL : extrayez les tokens de couleur, construisez de manière autonome l'interface utilisateur du produit, les tableaux de bord et l'univers narratif autour de ceux-ci.
Diagnostic du Contexte Projet (4 Dimensions)
1. Plateforme cible et Rapport d'aspect :
• 16:9 Paysage (1920×1080) -> YouTube, pages d'accueil héros, démos keynote
• 9:16 Portrait (1080×1920) -> TikTok, Instagram Reels, YouTube Shorts
• 1:1 Carré (1440×1440) -> Flux Twitter/X, posts Instagram, boucles UI tactiles
• 4:5 Portrait (1080×1350) -> Flux marketing sociaux
2. Durée et Rythme :
• Ultra-court (3–7s) -> Bumper logo cinétique, motif signature en boucle, micro-interaction
• Court (8–15s) -> Reel social à fort taux de rétention, fonctionnalité produit virale, elevator pitch
• Moyen (15–30s) -> Film d'identité de marque complet, lancement de produit complet
• Long (30–60s) -> Explication produit multi-chapitres, anniversaire d'entreprise, démo
3. Identité et Ton de l'Entité :
• Entreprise / Compagnie aérienne / Automobile -> Digne, expansif, aérodynamique, luxueux
• Tech en forte croissance / SaaS / IA -> Précis, tactile, hyper-rapide, titane sombre
• Académique / Universitaire / Culturel -> Historique, faisant autorité, sérif éditorial, intellectuel
• Consommateur / Créatif / Style de vie -> Vibrant, tactile, élastique, jeu typographique
4. Arc Narratif et Hiérarchie du Message :
• Accroche (0–20%) -> Justification/Fonctionnalité (20–70%) -> Récompense de Marque et Appel à l'Action (70–100%)
2. Archétypes Structurels Adaptatifs
Sélectionnez la structure narrative qui correspond naturellement à la durée et à l'objectif — n'imposez jamais un moule rigide en 4 actes lorsqu'une boucle agile ou un impact en 2 temps est supérieur :
| Archétype | Durée Typique | Rythme et Structure des Scènes | Meilleur Utilisé Pour |
|---|---|---|---|
| A. Bumper Cinétique / Micro-Boucle | 3s – 6s (6–12 temps) | Momentum à focus unique : Accroche visuelle instantanée → Morphose continue et transparente → Verrouillage du logo héros (delta de jointure de boucle < 0.05). | Révélations de logo, boucles UI signature, états de chargement d'application |
| B. Reel Social Vertical / Shorts | 8s – 15s (16–30 temps) | Règle des 3 Secondes : 0–1s Accroche audacieuse qui stoppe le pouce → 2–10s Justification Cinétique Rapide (3 coupures rapides décalées) → 11–15s Appel à l'Action percutant. | Instagram Reels, TikTok, YouTube Shorts |
| C. Film Narratif de Marque | 15s – 30s (30–60 temps) | Arc Symphonique en 4 Actes : Le Départ/Accroche (0–20%) → La Substance/Le Réseau (20–55%) → L'Élévation Stratosphérique (55–80%) → La Récompense Iconique (80–100%). | Grands films de marque (ex. Korean Air, lancement de niveau Apple) |
| D. Explicateur Multi-Chapitres | 30s – 60s (60–120 temps) | Voyage en Chapitres : Accroche sur le problème → Répartition Architecturale → Démonstration Approfondie des Fonctionnalités → Preuve Sociale et Écosystème → Verrouillage Final de la Marque. | Explicateurs SaaS, aperçus institutionnels, présentations pour investisseurs |
| E. Morphose Continue de Forme | Toute durée | Identité Ininterrompue : Un conteneur principal ne coupe jamais ni ne quitte l'écran ; il morphe continuellement sa dimension, son rayon et son contenu interne. | Présentation tactile UI, boucles de morphose produit |
3. Le Spectre du Langage de Conception Moderne
Sélectionnez de manière autonome le langage visuel qui correspond à la personnalité de l'entité :
[1. Swiss Neo-Brutaliste] Grilles ultra-disciplinées, sans-serif grotesque audacieux (Geist, Inter), contraste élevé papier/encre, zéro fioriture.
[2. Titane Sombre de Luxe] Esthétique Apple/Stripe, obsidienne profonde (#0B0C10), bordures de 1px, reflets métalliques, or/vermillon chaud.
[3. Sérif Éditorial et Film] Dignité académique et culturelle, sérif moderne audacieux (Instrument Serif, Editorial New), papier chaud, espacement des lettres.
[4. Demi-teinte Optique et Point] Artisanat graphique de studio, matrice de points dynamique réactive, transitions en vagues de demi-teintes, ambiance rétro-moderne.
[5. UI Physique Tactile] Maîtrise SaaS et outillage, ressorts de pression physiques, glissement élastique, onglets liquides, curseurs physiques.
[6. Cinématographique Aérodynamique] Aviation, automobile, mobilité ; trajectoires de vol amples, affichages tête haute de télémétrie, éclairage d'horizon, échelle expansive.
[7. Pop Vibrant et Géométrique] Applications créatives, outils grand public ; blocs de couleur vive et plates, transitions de formes élastiques, typographie percutante.
(Voir references/design-styles.md pour les recettes de code, palettes et associations typographiques pour chaque style).
4. Architecture du Projet Remotion
Chaque projet utilise la structure Remotion vérifiée, sans nombre magique :
mon-projet-motion/
├── package.json # remotion, @remotion/cli, react, react-dom
├── remotion.config.ts # Accélération GPU D3D11 Chrome/Edge système
├── tsconfig.json # ES2022, NodeNext, jsx: react-jsx
└── src/
├── index.ts # Point d'entrée registerRoot(Root)
├── Root.tsx # Registre <Composition> (dimensions, fps, durée)
├── compositions/ # Timeline de composition maître
├── scenes/ # Scènes <Sequence> modulaires
├── components/ # Composants réutilisables, logos de marque, curseurs, maquettes
└── constants/ # Palette, aides de timing à 120 BPM, typographie
remotion.config.ts (Intégration Chrome Système)
import { Config } from '@remotion/cli/config';
import fs from 'node:fs';
const chromePath = 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe';
const edgePath = 'C:\\Program Files (x86)\\Microsoft\\Edge\\Application\\msedge.exe';
if (fs.existsSync(chromePath)) {
Config.setBrowserExecutable(chromePath);
} else if (fs.existsSync(edgePath)) {
Config.setBrowserExecutable(edgePath);
}
Config.setVideoImageFormat('jpeg');
Config.setChromiumOpenGlRenderer('angle');
Config.setConcurrency(4);
5. Exécution et Rendu en Ligne de Commande
# 1. Aperçu interactif Studio (timeline défilable et HMR en temps réel)
npm run preview # ou : npx remotion preview src/index.ts
# 2. Rendu d'un MP4 Maître en 60 ips
npm run build # ou : npx remotion render src/index.ts <CompId> out.mp4
# 3. Capture d'une image clé haute résolution
npx remotion still src/index.ts <CompId> still_frame.png --frame=60
6. Index de la Documentation de Référence
Lors de la création d'aspects spécifiques d'un graphique animé, consultez ces guides approfondis :
- structural-archetypes.md : 5 plans structurels (Micro-boucles, Reels sociaux, Films de marque, Explicateurs multi-chapitres, Morphoses continues).
- design-styles.md : 7 styles de design modernes (Swiss Neo-Brutaliste, Titane Sombre, Sérif Éditorial, Demi-teinte Optique, UI Tactile, Mobilité Cinématographique, Pop Vibrant) avec palettes et typographie.
- brand-identity-and-ci.md : Reconstruction vectorielle CI autonome, mécanismes de révélation de logo, règles de couleur et motifs de marque.
- storytelling-and-narrative.md : Arc narratif, métaphores visuelles, transitions d'objets partagés et rythme.
- asset-orchestration.md : Panoramique/zoom Ken Burns, maquettes en perspective, badges vectoriels SVG et hiérarchie visuelle.
- remotion-patterns.md : Mécaniques de ressort,
interpolate(), conteneurs de caméra, cascades de décalage et orchestration<Sequence>. - ui-motion-recipes.md : Curseurs, compteurs en direct, sliders, modales, cartes de notification et graphiques.
- remotion-qa-and-verification.md : Boucle QA en 3 étapes, checklist d'affiche en 10 points et rendu GPU sans tête.
- timing.md : Grilles de temps musical à 120 BPM, mathématiques d'images, décalages de décalage et limites de maintien.
- motion-math.md : Ressorts harmoniques, PRNG basé sur une graine et zoom de caméra logarithmique.
- gotchas.md : Pièges de rendu Chromium,
preserve-3d, masques de débordement et évitement du flou de texte.