givemotion/givemotion

givemotion : HTML en entrée, vidéo en sortie

Une composition est un seul fichier HTML. Chaque image est cette page à un moment donné. Les animations CSS, les transitions, les Web Animations, les timers, requestAnimationFrame, canvas et WebGL s'exécutent sur une horloge virtuelle, de sorte que ce que vous écrivez s'affiche image par image, de manière identique à chaque fois. Aucune balise script ou import n'est nécessaire : l'environnement d'exécution (window.gm) et une feuille de style prédéfinie sont injectés pour vous.

Ce fichier est le cœur (lisez-le en entier). Ensuite, lisez uniquement les 1 à 3 recettes techniques dont votre vidéo a besoin (tableau à la fin) : chacune montre comment un professionnel construit cet effet, avec des chiffres et un exemple fonctionnel. Consultez tout le reste quand vous en avez besoin.

La boucle

0. Direct. Avant le code, décidez comment un grand studio traiterait ce brief : recherchez le genre (cherchez sur le web des exemples réels quand vous le pouvez, sinon rappelez-vous-en), puis écrivez en haut du HTML : le rendu en mots, le système typographique, le langage du mouvement (familles d'easing, rythme, comment les scènes s'enchaînent) et la liste des plans (une ligne par moment : temps, ce qui est à l'écran, le mouvement, l'enchaînement). Comment : references/direction.md.
1. Images clés. Construisez d'abord les 2-3 moments clés, fixes, et still chacun : jugez-les comme des affiches (un point focal, hiérarchie, marges). Ensuite, animez.
2. Écrivez le mouvement ; exécutez npx givemotion check video.html au fur et à mesure : corrigez tous les ✖ ; les ⚠ sont de véritables défauts sauf s'ils sont intentionnels ; ℹ sont des conseils de style.
3. Relecture deux fois. npx givemotion review video.html écrit ce qu'un spectateur voit (aperçu, les images que les gens lisent, les bandes de mouvement aux moments chargés) et review/REVIEW.md : notez-le sévèrement, corrigez les cinq pires problèmes, relisez. Des yeux neufs voient plus : donnez seulement le brief et le dossier de révision à un sous-agent. Mettez les temps du brief dans data-expect.
4. Rendu : npx givemotion render video.html -o out/video.mp4.

--json pour une sortie machine, <commande> --help pour les options. still video.html -t 3.2 -o f.png rend un moment ; inspect --at 4.5 --el "#logo" indique où se trouve un élément.

Comment créer un bon motion design ici

Le moteur vous donne n'importe quel HTML/CSS/SVG/canvas et une timeline image par image ; le rendu vient de la façon dont vous chorégraphiez. Les spectateurs aveugles ont préféré les vidéos où chaque élément était chorégraphié manuellement plutôt que les vidéos construites à partir de préréglages d'un seul mot.

1. Chorégraphiez à la main. Utilisez gm.timeline pour tout ce qui compte : des temps de début explicites, un easing par mouvement (un expo.out rapide, une dérive douce sine.inOut, un atterrissage back.out(1.6)), des décalages de 40 à 120 ms entre les parties liées. Les préréglages (data-enter, data-camera) conviennent pour les petits éléments secondaires.
2. Trois couches à chaque moment héroïque : le mouvement principal ; le détail secondaire qui le vend (flou pendant la vitesse, une lueur, une ombre qui grandit, un suivi, un anneau ou des particules à l'impact) ; et un mouvement ambiant pour que l'image ne soit jamais figée (fond qui dérive, lent mouvement de caméra).
3. Contraste dans le timing. Entrée rapide, stabilisation lente ; pauses de 0,4 à 1 s après que quelque chose atterrit ; sorties plus courtes que les entrées. Ne déplacez jamais tout à la même vitesse avec la même courbe.
4. Suivez le brief exactement pour les couleurs, polices, texte, tailles et timing ; votre savoir-faire réside dans la façon dont les choses bougent, pas dans l'ajout de contenu supplémentaire.
5. L'image 0 est l'accroche, rien n'est coupé par le bord de l'image, le texte est grand (titres 96-200 px, corps ≥ 36 px en 1080p), un héros par moment, les scènes s'enchaînent (push, whip, morph, match cut) plutôt que de fondre.
6. Les choses viennent des choses. Un nouvel élément naît de quelque chose déjà à l'écran, pas de nulle part : trois cercles sortent du cercle principal ; un des rectangles à l'écran glisse et devient le soulignement ; une carte sort du bouton qui a été cliqué ; le repère du logo devient le repère de la carte de fin. Réutilisez et transformez avant d'ajouter. Plantez le prochain ensemble tôt : déjà dans le monde (petit, sombre) pendant que ce mouvement se joue, pour que la caméra le révèle.
7. Un mouvement de caméra signifie "regarde ici". Avancez uniquement vers quelque chose que le spectateur doit lire ensuite. Ne zoomez jamais dans le vide ou dans l'ancienne scène comme transition : pour quitter une scène, déplacez-vous latéralement (push, whip, wipe) ou transportez un élément (morph, la règle ci-dessus).
8. Animez transform/translate/scale/rotate/opacity/filter/clip-path, pas width/top/left.
9. Chaque élément a une vie planifiée : entrée, une pause lisible (~1 s + 0,25 s par mot), puis une sortie ou un enchaînement. La liste des plans donne chaque pause.

Hiérarchie : une chose compte à la fois

Les spectateurs ont préféré les vidéos où l'œil savait toujours où regarder.

• Chaque ligne a un mot-clé. Donnez au mot qui porte le sens un contraste (couleur d'accent, poids plus lourd, taille plus grande, ou un surlignage dessiné) ; le reste reste plus discret. Un par ligne, au maximum deux par écran. Si tout est accent, rien ne l'est.
• Chaque moment a un héros : le plus grand, le plus brillant, avec le plus de mouvement. Les éléments de soutien sont plus petits (héros ≥ 1,6× la taille suivante ; trois niveaux au maximum), plus sombres (atténués ou opacité 50-70 %), arrivent après le héros et bougent moins. Les effets (anneaux, étincelles) encadrent le héros, ne le traversent jamais.
• Guide l'œil dans l'ordre : le héros atterrit en premier ; le mot-clé obtient sa couleur ou son soulignement 0,2-0,4 s après que la ligne se stabilise ; le soutien suit. Quand la caméra ou un callout se concentre sur quelque chose, atténuez le reste.
• Rôles de la palette strictement : accent pour l'emphase uniquement, atténué pour le texte secondaire.

Easing : adaptez la courbe au mouvement

• Entrée décélère (ease-out : expo.out, power3.out, ou back.out(1.4) quand elle atterrit avec du poids).
• Sortie accélère (ease-in : power2.in), plus courte que l'entrée (60-70 %).
• Déplacement de A à B visible, mouvements de caméra, changement d'échelle de quelque chose déjà à l'écran : ease-in-out (power2.inOut, sine.inOut) : ça commence doucement et atterrit doucement.
• Dérive ambiante : sine.inOut long ; linear uniquement pour les boucles (spins, tickers). Rien qui commence ou s'arrête à l'écran ne bouge linéairement.
• Laissez ease de côté et le moteur le fait déjà (les entrées rebondissent, les mouvements s'adoucissent en entrée et sortie, les sorties s'adoucissent en entrée) ; quand vous en définissez un, suivez les règles ci-dessus.

Composition minimale

<!doctype html>
<html data-width="1920" data-height="1080" data-fps="30" data-duration="2.5">
<head>
<style>
  :root { --bg: #0b0d12; --ink: #fff; --accent: #7c9cff; }
  body { background: var(--bg); color: var(--ink); font-family: Inter, sans-serif; }
  .scene { display: grid; place-items: center; }          /* .scene est déjà absolu + plein écran */
  h1 { font-size: 160px; letter-spacing: -0.03em; margin: 0; }
  .glow { position: absolute; width: 900px; height: 900px; border-radius: 50%; background: var(--accent); filter: blur(160px); opacity: .25; }
</style>
</head>
<body>
  <section class="scene">
    <div class="glow"></div>
    <h1 id="t" data-split="chars">Bonjour</h1>
  </section>
  <script>
    gm.timeline('.scene')
      .from('.glow', { scale: 0.6, opacity: 0, duration: 1.2, ease: 'sine.out' }, 0)             // ambiant : la lumière apparaît…
      .to('.glow', { x: 220, y: -90, duration: 2.5, ease: 'sine.inOut' }, 0)                        // …et continue de dériver
      .from('#t .gm-char', { y: 140, opacity: 0, filter: 'blur(12px)', duration: 0.7, ease: 'expo.out', stagger: 0.05 }, 0.2) // principal : entrée rapide, flou pendant la vitesse
      .fromTo('#t', { letterSpacing: '0.12em' }, { letterSpacing: '-0.03em', duration: 2.4, ease: 'expo.out' }, 0.2)        // détail : le tracking se resserre
      .to('#t', { scale: 1.06, duration: 1.9, ease: 'sine.inOut' }, 0.6);                        // la pause continue de respirer
  </script>
</body>
</html>

Polices intégrées : Inter, JetBrains Mono, Playfair Display, Space Grotesk, Bebas Neue, Nunito, Caveat ; d'autres via @font-face.

Modèle de timing (lisez ceci)

• Les paramètres se trouvent sur <html> : data-width, data-height (nombres pairs), data-fps (par défaut 30), data-duration (optionnel), data-background (optionnel).
• Les temps sont en secondes : 1.5, 1.5s, 500ms, 45f (images), 1:02.5.
• Clips. Un élément avec data-start, data-duration ou data-end n'existe (n'est affiché) que du début au début + durée. Les temps sont relatifs au clip parent. Les éléments sans timing sont toujours là.
• Durée vidéo = data-duration sur <html>, sinon la fin du dernier clip.
• Séquences. data-sequence sur un conteneur joue ses enfants l'un après l'autre. Chaque enfant a besoin de data-duration, ou donnez au conteneur data-cuts="0 2.13 4.27" (quand chaque enfant commence ; aussi "beats: 0 4 8" / "bars: 0 1 2"). data-gap="0.2" (négatif = chevauchement). data-transition="<nom> <secondes> [easing]" chevauche les voisins et anime le changement ; un enfant peut définir son propre data-transition (comment il entre). Chaque transition prend sa durée sur le total : 3 scènes de 4 s avec fade 0.5 durent 11 s. Coupures sur le beat, data-cut-align, et où se situe alors le temps 0 d'une scène : references/timeline.md.
• Transitions : push-/cover-/whip-/wipe- + left/right/up/down (push : le nouveau pousse l'ancien dehors ; cover : le nouveau glisse par-dessus ; whip : rapide, flou) diagonal clock iris zoom zoom-through (l'ancienne scène passe en vol) flip (3D) dip (par le noir) blur fade-up fade, et morph : les éléments avec le même data-morph="nom" dans les deux scènes volent et se redimensionnent de l'ancien endroit au nouveau pendant que le reste fondu enchaîné. Transporte un logo, une carte ou un nombre ; dans une scène, utilisez gm.fly.
• Les animations CSS s'exécutent sur le temps du clip. animation: fade-up .6s .4s both commence 0,4 s après l'apparition de son clip. Utilisez both (ou backwards) comme remplissage pour que l'élément soit caché avant son délai.
• Quelque chose apparaît plus tard dans une longue scène (un monde caméra, un tableau blanc) : le délai dans data-enter compte à partir du début du clip de l'élément, donc data-enter="write 0.8 11.9" écrit un libellé 11,9 s dans la scène et le garde caché jusque-là. Pas de clip supplémentaire nécessaire.
• gm.onFrame(fn) obtient le temps de la vidéo, même dans une scène ; gm.onFrame('#s', (local, info, el) => …) compte à partir du début de #s, comme gm.timeline('#s').
• Les timers, requestAnimationFrame, Date.now(), performance.now() sont virtuels et Math.random() est ensemencé. Le code d'animation web normal fonctionne.

Timeline : chorégraphie précise (style GSAP, intégrée)

Pour tout ce qui a plus de quelques pièces mobiles, utilisez gm.timeline : l'API GSAP que vous connaissez, calculée à partir du temps (image par image, parallèle). Les temps sont en secondes relativement au clip qui contient le scope.

gm.timeline('#scene2')                                     // scope : les sélecteurs sont recherchés à l'intérieur
  .from('.title .gm-word', { y: 120, opacity: 0, rotate: 8, stagger: 0.06 })   // pas d'ease : rebondit
  .to('.card', { x: 400, y: -60, scale: 1.2 }, '+=0.3')                 // arcs, dimensionnés par la distance
  .fromTo('.bar', { scaleY: 0 }, { scaleY: 1, stagger: { each: 0.08, from: 'center' } }, '<')
  .to('#line', { draw: 1, duration: 1.5 }, 2)                       // dessine un trait SVG
  .to('.price', { textContent: 249, duration: 1.5 }, 2.5);          // compte un nombre
gm.fly('#event', { from: '#slot2', at: 7.5, duration: 0.8 });      // vole depuis la boîte d'un autre élément vers sa propre place

from()/fromTo() montrent leurs valeurs de départ à partir du début du clip (cachées jusqu'à leur entrée). Les interpolations qui se chevauchent sur une propriété : le début le plus récent gagne. Positions, toutes les propriétés et options, labels, images clés, gm.fly et mises en garde SVG : references/timeline.md.

Également intégrés (tableaux dans references/api.md) : préréglages data-enter/data-exit, data-split, data-stagger, data-count (-roll), data-type (machine à écrire), data-scramble, data-camera (push, float, shake…), data-parallax, data-morph, data-fit, data-pulse, noms d'easing (les noms GSAP fonctionnent), images clés CSS prédéfinies et var(--px), et blocs prêts à l'emploi (npx givemotion blocks : sous-titres, fenêtre de code, curseur, fenêtre de navigateur, graphiques…).

Recettes techniques (lisez celles dont votre vidéo a besoin)

Votre vidéo contient…	Lisez
Un logo, un sting de marque, une intro ou une carte de fin	references/techniques/logo-reveal.md
Un grand texte qui claque, s'empile, tourne ; un titre en vedette	references/techniques/kinetic-type.md
Révélations de texte : mots/caractères, machine à écrire, écriture, scramble, surlignage	references/techniques/text-reveals.md
Mouvements de caméra : push, follow, whip, bank, zoom sur un détail, shake	references/techniques/camera-moves.md
Plusieurs scènes qui s'enchaînent (push, whip, morph, shape wipes)	references/techniques/scene-transitions.md
Lueur, balayages lumineux, dégradés, grain, flou, profondeur	references/techniques/light-and-depth.md
Nombres, compteurs, graphiques à barres/ lignes, callouts	references/techniques/numbers-and-charts.md
Lignes qui se dessinent, itinéraires, cartes, épingles, quelque chose qui voyage sur un chemin	references/techniques/paths-and-maps.md
Formes plates : agrandissement, écrasement, division, orbite, morphing	references/techniques/shapes-and-motion-graphics.md
Une application/UI avec un curseur, des clics, de la frappe, des listes	references/techniques/ui-demo.md
Du code dans un éditeur, de la frappe, des surlignages de lignes	references/techniques/code-on-screen.md
Impact et énergie : claques, secousses, explosions, beats musicaux	references/techniques/impacts-and-energy.md
Sous-titres mot par mot, clips verticaux 9:16	references/techniques/captions-vertical.md
Tableau blanc, croquis, dessiné à la main	references/techniques/hand-drawn.md
Un fond vivant derrière tout	references/techniques/backgrounds-and-ambient.md

Référence API (consultez quand nécessaire)

Quand…	Lisez
Un attribut, préréglage, nom d'easing, CSS prédéfini ou bloc	references/api.md
gm.timeline en détail : positions, images clés, labels, gm.fly, SVG	references/timeline.md
Mondes gm.camera, plans, gm.path.travel, riding, parallax	references/camera.md
gm.chart.*, blocs de graphiques	references/charts.md
Diagrammes, flèches, data-sketch, gm.connect, gm.shape, morphing de chemins	references/diagrams.md
Musique, beats, voix off + givemotion words, clips vidéo, sous-titres	references/media-audio.md
Données/modèles, <gm-in ...> (données externes), répétitions, gabarits	references/data-templates.md
Exporter : résolution, codec, débit, LUT, batch, masques alpha, image fixe	references/export.md

Prochains pas

1. Exécutez npx givemotion init pour le projet d'exemple et les recettes.
2. Si cette boîte à outils vous manque, exécutez npm i -g givemotion d'abord.
3. Commencez un fichier HTML. Utilisez la composition minimale ci-dessus.
4. npx givemotion check video.html à chaque étape.
5. npx givemotion review video.html avant le rendu.
6. npx givemotion render video.html.

---

Conçu pour les créateurs qui écrivent du code. Construit avec ♥ par une poignée de personnes qui pensent que la vidéo devrait être versionnée, testable et parfaite à chaque fois.