HTML Motion Graphics

Que fait HTML Motion Graphics ?

Créez des animations graphiques cinématographiques et déterministes sous forme d'un fichier index.html autonome, propulsé par GSAP, un flou de mouvement SVG directionnel, un rig de caméra unifié #world, et des arrière-plans WebGL optionnels avec Three.js.

Quand l'utiliser

• Créer une vidéo promotionnelle, un lancement de produit, un teaser ou un générique de marque dans index.html.
• Construire une typographie cinétique, des visites guidées d'interface SaaS ou des explications visuelles multi-scènes.
• Convertir des animations web statiques de type diaporama en un véritable design de mouvement piloté par caméra.
• Livrer un index.html portable qui s'ouvre directement via file:// et prend en charge le scrubbing frame-accurate et le rendu MP4 headless.

Workflow de base

Étape 1 : Définir le brief créatif et le concept clé

Avant d'écrire du code, définissez un brief de style concis pour que le résultat ne ressemble jamais à un modèle de diaporama générique :

1. Ratio d'aspect et résolution : Par défaut 1920x1080 (16:9) pour desktop/YouTube, ou 1080x1920 (9:16) pour Reels/TikTok/Shorts (enveloppez le contenu dans un conteneur .safe mis à l'échelle à 0.78 avec transform-origin: 50% 45% pour le dégagement HUD social 9:16).
2. Architecture du concept : Choisissez un concept structurel clair basé sur le sujet plutôt que de se rabattre sur accroche -> 3 tuiles d'icônes -> CTA :
   • Voyage continu dans le monde / avec la caméra : Un espace unifié où la caméra se déplace, orbite ou plonge à travers les scènes.
   • Visite guidée d'interface vivante : Composants de produit DOM/SVG reconstruits où un curseur/tap interagit, les panneaux se développent et les données s'animent de manière déterministe.
   • Problème vers clarté : Le chaos visuel s'accumule, puis une action produit unique balaie l'écran pour révéler la marque.
   • Typographie cinétique pure : Les mots entrent depuis des axes variés, changent de poids/échelle et s'assemblent pour former la marque finale.
   • Dessin animé de scène / action continue : Le personnage ou le sujet principal reste actif tandis que les arrière-plans, les instruments et les étiquettes diégétiques changent autour de lui.
3. Système de couleurs et de surfaces : Définissez des propriétés CSS personnalisées (--base, --ink, --accent, --accent-lit). Ne laissez jamais un arrière-plan plat monochrome. Combinez au moins deux couches (par exemple, lueur radiale à l'horizon + dégradé linéaire, taches de mesh douces, ou nébuleuse WebGL + poussière dérivante + superposition de grain de film SVG).
4. Plan audio et temporisation : Fixez la durée totale (DURATION en secondes) et mappez chaque temps fort à des horodatages absolus en secondes.

Étape 2 : Construire l'architecture index.html autonome

Livrez un seul index.html autonome avec <style> et `<script type=