saisandeep17/pro-motion-graphics

Pro Motion Graphics (Architecture V2)

Créez des vidéos graphiques animées nettes, déterministes et de qualité studio, conçues comme par un directeur technique senior. Cette compétence impose des normes visuelles strictes anti-bruit, des mathématiques physiques, un routage multi-moteur et un pipeline de production complet en 10 étapes.

---

Quand activer cette compétence

• Génération de code vidéo programmatique (Remotion / React, HTML/CSS/SVG + GSAP, ou HTML5 Canvas).
• Construction de catégories vidéo : Reels/Shorts sociaux (9:16), Promotions de marque (16:9 / 1:1), Lancements de produits SaaS, Micro-démo UI, Typographie cinétique, ou Vidéos explicatives techniques.
• Refonte d'animations qui ressemblent à du "bruit d'IA" (blobs de flou troubles, lueurs de maillage néon, dégradés génériques, fondus CSS non ancrés, easing linéaire mécanique).
• Planification de storyboards précis à l'image, de timing mathématique et de synchronisation sonore avant d'écrire du code.

---

Règles d'exécution du modèle (Optimisé pour Sonnet & Haiku)

1. Des chiffres, pas des adjectifs : Traduisez toute intention esthétique directement en tokens numériques exacts (comptes d'images, stiffness/damping d'un ressort, courbes cubic-bezier, incréments de grille de 8px, et couleurs hex/OKLCH). Ne décrivez jamais la finition visuelle avec des adjectifs vagues.
2. Mathématique d'image déterministe : Chaque animation doit être strictement pilotée par une variable frame ou une progression progress explicite ($0.0 \to 1.0$). N'utilisez jamais de Math.random() non seedé, setTimeout, ou d'images clés CSS infinite non ancrées qui se désynchronisent pendant le rendu.
3. Propriétés compatibles GPU uniquement : Animez transform (translate3d, scale, rotate), opacity, clip-path, ou stroke-dashoffset SVG. N'animez jamais width, height, top, left, ou un filter: blur() lourd image par image.
4. Règles des Hooks React : Dans Remotion, spring() est une fonction de calcul pure. Ne préfixez jamais les fonctions d'aide mathématique avec use (par exemple, utilisez getStaggerSpringProgress(), pas useStaggerSpring()) pour éviter les violations des Règles des Hooks React dans les boucles .map().

---

Matrice de routage multi-moteur

Avant de générer le code du projet, évaluez le brief par rapport au Guide de sélection multi-moteur :

• Moteur A : Remotion (React) : Meilleur pour les maquettes UI complexes, les lancements SaaS, les vidéos multi-scènes modulaires, les reels pilotés par les données et le rendu CLI précis à l'image.
• Moteur B : HTML/CSS/SVG + GSAP : Meilleur pour la typographie cinétique, les manifestes de marque éditoriaux, les animations de traits SVG et la lecture légère dans le navigateur. Voir Patterns GSAP.
• Moteur C : HTML5 Canvas : Meilleur pour les graphismes procéduraux, les réseaux de particules, les animations mathématiques et les effets visuels génératifs.

---

Le pipeline de production vidéo en 10 étapes

Suivez ces étapes séquentielles pour chaque projet :

Étape 1 : Comprendre le brief

Identifiez la plateforme cible, le format d'image, la durée ($t$), la FPS, le message principal, le ton visuel et les ressources disponibles. Posez uniquement les questions essentielles manquantes (max 4 points). Si les détails ne sont pas spécifiés, appliquez les valeurs par défaut du studio :

• Format d'image : 16:9 (1920x1080) pour Desktop/Web ; 9:16 (1080x1920) pour les réseaux sociaux.
• Fréquence d'images : 60fps pour UI & Réseaux sociaux ; 30fps pour Éditorial & Explicatif ; 24fps pour Cinéma.

Étape 2 : Routage par catégorie

Faites correspondre la demande à l'un des 6 modèles de catégories dans Playbooks de catégories :

• Catégorie A : Reels sociaux, TikToks et Shorts (9:16, 60fps, 12s–30s)
• Catégorie B : Promotion de marque & Manifeste (16:9 / 1:1, 30fps, 20s–45s)
• Catégorie C : Vidéo de lancement de produit SaaS (16:9, 60fps, 45s–90s)
• Catégorie D : Mise en avant de fonctionnalité / Micro-démo UI (1:1 / 4:5, 60fps, 10s–25s)
• Catégorie E : Typographie cinétique (16:9 / 9:16, 24/30fps, 15s–45s)
• Catégorie F : Vidéos explicatives et éducatives (16:9, 30/60fps, 45s–120s). Détail dans Playbook explicatif.

Étape 3 : Découverte et vérification des ressources

Collectez les ressources authentiques de la marque (logos, captures d'écran UI, polices, palettes de couleurs).

• Conservez les logos de marque authentiques sans déformer leur format.
• Ne remplacez jamais les captures d'écran réelles du produit par une UI factice lorsque des captures authentiques sont fournies.
• Vérifiez les chemins des ressources à l'aide de scripts/check-assets.

Étape 4 : Planification du storyboard et timing mathématique

Construisez un tableau de timeline explicite calculant les numéros d'images à partir des secondes et de la FPS : $$\text{frame} = \text{round}(t \times fps)$$ Définissez les heures de début/fin des scènes, les descriptions visuelles, les transitions de caméra et les repères audio. Assurez-vous que les durées des scènes correspondent à la durée totale cible sans chevauchements accidentels.

Étape 5 : Système de design centralisé (BRAND_CONFIG)

Établissez des tokens de design avant d'écrire le JSX/HTML de la scène :

• Couleurs : Choisissez un système parmi Règles anti-bruit (Swiss Technical Dark, Editorial Warm Paper, ou Kinetic Mono).
• Typographie : Suivez le Guide typographique (Titre avec tracking négatif -0.04em + Métadonnées Monospace avec tracking positif +0.08em + tabular-nums).
• Géométrie : Appliquez les mathématiques de rayons de bordure concentriques : $R_{inner} = \max(0, R_{outer} - Padding)$.

Étape 6 : Code de production modulaire

Générez un code propre et modulaire basé sur le starter du moteur choisi dans templates/ :

• templates/remotion-starter/ : Composition Remotion modulaire avec config.ts, motion.ts et composants.
• templates/gsap-starter/ : Configuration de timeline GSAP déterministe.
• templates/canvas-starter/ : Boucle de dessin 2D procédurale. Vérifiez la structure avec scripts/validate-project.

Étape 7 : Audio et design sonore

Incorporez les couches sonores selon le Guide de conception audio :

• Réduisez la musique de fond de 12 à 16 dB pendant les passages de voix off.
• Alignez les effets de transition 2 images avant le point central visuel ; alignez les bruits d'impact exactement sur l'image de contact visuel.
• Assurez-vous que toute la musique est libre de droits / sous licence pour un usage commercial.

Étape 8 : Rendu et encodage

Effectuez le rendu avec des paramètres déterministes de haute qualité :

# Remotion Haute Qualité Web MP4 (H.264, CRF 18, YUV420P)
npx remotion render src/index.ts MainComposition out/video.mp4 --codec=h264 --crf=18

Étape 9 : Assurance qualité visuelle

Exécutez la Checklist qualité vidéo :

• Effectuez le rendu d'images de prévisualisation fixes à 25 %, 50 %, 75 % et 100 % de la durée (npx remotion still ... --frame=N).
• Vérifiez le clipping de texte, l'alignement sur la grille 8px, les ratios de contraste et les zones de sécurité (9:16 haut 220px / bas 340px).
• Vérifiez la sortie vidéo finale à l'aide de scripts/inspect-output out/video.mp4.

Étape 10 : Livraison et transfert

Fournissez :

1. Fichier vidéo rendu (ou commande de rendu reproductible exacte).
2. Projet source propre correspondant à l'architecture du template.
3. Ressources référencées organisées dans public/.
4. Instructions d'exécution et journaux de vérification.

---

Points de contrôle qualité obligatoires

Avant de conclure toute tâche de graphisme animé, vérifiez :

• Pas de blobs filter: blur() génériques ni de dégradés IA violet-à-bleu.
• Pas de violations des Règles des Hooks React (utilisez des helpers purs comme getStaggerSpringProgress).
• Toutes les animations pilotées de manière déterministe par frame ou progress normalisé.
• node scripts/validate-project.js <project-dir> se termine avec le code 0.
• node scripts/check-assets.js <project-dir> se termine avec le code 0.
• Sortie du rendu vérifiée via node scripts/inspect-output.js <output-path>.