Générateur de Motion Graphics Tech

Que fait Générateur de Motion Graphics Tech ?

Génère du code d'animations programmatiques et interactives prêtes pour la production, dans une esthétique minimaliste, mode sombre, style industriel-tech.

Résumé

Transforme des scripts textuels, des architectures techniques ou des points de données en code d'animation HTML/JS/CSS autonome ou en composants React/Remotion, avec un fond sombre à grille carbone, des accents néon à fort contraste, des coins en L de type HUD et des transitions à ressort physique.

Quand l'utiliser

• L'utilisateur souhaite générer des animations basées sur du code (HTML, React, Framer Motion, GSAP, Motion Canvas ou Remotion Node.js) pour la production vidéo ou des présentations techniques.
• L'utilisateur fait référence à des styles d'explication technique (ex : Silicon Valley 101 / 硅谷101, keynote Apple en mode sombre, décompositions matérielles HUD).
• L'utilisateur a besoin de visualisations dynamiques pour des architectures de puces/matériel, des timelines de processus, des comparaisons de données ou des workflows multi-étapes.

Spécification visuelle et esthétique

Appliquez ces tokens de design exacts à tout le code généré :

1. Fond et surface :

   • Toile de base : #0D0E11 à #141518 avec une grille CSS subtile en matrice de points ou fibre de carbone (radial-gradient(#2A2D35 1px, transparent 1px) avec background-size: 16px 16px).
   • Surface de carte : rgba(255, 255, 255, 0.03) avec backdrop-filter: blur(8px) et 1px solid rgba(255, 255, 255, 0.12).

2. Palette de couleurs :

   • Accent principal (Actif/Surbrillance) : #FF5500 (Orange industriel) avec lueur 0 0 16px rgba(255, 85, 0, 0.35).
   • Accent secondaire (Données/Calcul) : #38BDF8 (Bleu cyan).
   • Hiérarchie du texte : Primaire #F3F4F6, Secondaire #9CA3AF, Atténué/Inactif #4B5563.

3. Typographie et éléments HUD :

   • En-têtes et corps : Inter, HarmonyOS Sans SC ou PingFang SC, en gras pour les points clés.
   • Nombres, années et spécifications : JetBrains Mono ou Share Tech Mono (font-variant-numeric: tabular-nums).
   • HUD décoratif : Ajoutez des coins en L de 6px x 6px (border-top + border-left, etc.) sur les conteneurs principaux, et des indicateurs verticaux orange en forme de pilule (width: 4px; background: #FF5500) à côté des titres de section.

Archétypes d'animation principaux

Sélectionnez l'archétype approprié en fonction du contenu de l'utilisateur :

1. Timeline coulissante ([Timeline]) :

   • Piste horizontale en pointillés (border-bottom: 2px dashed #374151).
   • Le nœud actif passe à l'échelle 1.1x avec une bordure #FF5500 et un point de nœud lumineux ; les nœuds historiques se décalent vers la gauche, passent à l'échelle 0.85x et s'assombrissent à opacity: 0.4.
   • Les spécifications des infobulles apparaissent en décalage vertical (translateY(12px) à 0, stagger: 120ms).

2. Architecture matérielle / système ([Architecture]) :

   • Grille Bento à écran partagé ou imbriqué montrant les modules macro (à gauche) et les pipelines internes micro (à droite).
   • Les paquets de données sont représentés par des pilules lumineuses #FF5500 ou des impulsions SVG stroke-dasharray se déplaçant entre les sous-modules (ex : Tâche -> Cœur -> Cache partagé).
   • Incluez des compteurs ou des badges d'état en direct pour comparer les performances héritées vs nouvelle génération.

3. Données dynamiques et cartes de métriques ([DataChart]) :

   • Graphiques polylignes SVG ou à barres avec animations de tracé stroke-dashoffset.
   • Segments de prévision rendus en lignes pointillées #FF5500.
   • Cartes de résumé Bento en 3 colonnes avec en-têtes numérotés (01, 02, 03) et barres de progression horizontales animées comparant la référence (#4B5563) vs l'objectif (#FF5500).

Étapes d'exécution

1. Analyser le contenu et sélectionner l'archétype :

   • Décomposez l'entrée de l'utilisateur en scènes ou images clés discrètes (Étape 1, Étape 2, Étape 3...).
   • Mappez chaque scène à [Timeline], [Architecture] ou [DataChart].

2. Choisir la pile technique :

   • Par défaut (Aperçu sans configuration) : Produisez un seul fichier index.html autonome utilisant Tailwind CSS (CDN), GSAP ou Anime.js (CDN) et des contrôleurs d'état JS vanille.
   • Rendu vidéo (quand Node.js/Remotion est demandé) : Produisez un composant React modulaire utilisant remotion (useCurrentFrame, spring, interpolate) ou framer-motion.

3. Implémenter les contrôles de lecture et d'enregistrement :

   • Incluez toujours un contrôleur en bas à droite ou piloté par le clavier (Espace pour lire/pause, FlècheDroite/FlècheGauche pour parcourir les images clés, R pour rejouer).
   • Fournissez un mode « Toile propre » commutable (appuyez sur H pour masquer les contrôles de l'interface) afin que l'utilisateur puisse enregistrer l'écran en 1920x1080 (16:9) sans encombrement.

4. Appliquer la physique du mouvement :

   • N'utilisez jamais de transitions linéaires pour les mouvements de l'interface. Utilisez cubic-bezier(0.22, 1, 0.36, 1) ou la physique des ressorts (stiffness: 120, damping: 18).
   • Synchronisez les changements d'état visuels avec des étiquettes d'étape claires afin que l'animation corresponde au rythme de la voix off.

Points d'attention

• Évitez l'encombrement : Gardez au maximum 3 dimensions de données à l'écran à la fois. Atténuez les modules inactifs (opacity: 0.35) lorsque vous vous concentrez sur un sous-composant spécifique.
• Ratio d'aspect : Verrouillez le conteneur principal de la scène au format 16:9 (aspect-ratio: 16/9, max-width: 1920px) centré dans la fenêtre d'affichage afin que les mises en page ne se cassent jamais lors de la capture vidéo.
• Aucune dépendance d'image externe : Utilisez des formes CSS pures, des SVG en ligne et la typographie plutôt que des URLs d'images externes qui pourraient ne pas se charger.