Motion Deck · template HyperFrames 4 sur 6
La vidéo qui montre comment elle bouge : une balle qui rebondit avec ses images fantômes, un titre qui tombe lettre à lettre, un mot dans un flou de mouvement sur des guides, une courbe d'accélération qui remplace une droite barrée, une comète qui balance, un anneau qui charge. Chaque plan est annoté à la main, flèches comprises, et une frise de lecture défile en bas.
Rendu du template avec ses valeurs par défaut (15 s, muet) : Textes : les mots du reel agence v2 et du Motion Deck ; les annotations nomment les principes du mouvement, aucun texte publicitaire nouveau.
identifiant : principes-annotes · format 16:9 · HyperFrames 0.8.73 + GSAP 3.14.2






À gauche la vidéo 4 (une image toutes les 0,5 s, recadrée sur la vidéo), à droite notre rendu du template. On en reprend la manière, pas les plans.
Gris clair et anthracite en alternance, capitales condensées noires, un bleu et un rouge pour tout accent. Un principe du mouvement par plan (amorti, décalage, flou, courbe, inertie, anticipation), montré puis nommé : le mot manuscrit s'écrit lettre à lettre et sa flèche se trace. Une correction se barre en rouge, la bonne réponse arrive en bleu avec sa coche.
Montrer une méthode ou un savoir-faire en le décortiquant : présenter une expertise, un cours, une étude de cas, un avant et après.
Archivo condensée 900 (wdth 62), Caveat 700 (annotations), JetBrains Mono
Vidéo 4 du carrousel (showreel qui annote ses propres principes)
instagram.com/p/Ddy2jrzDjFL, regardée image par image le 29/09/2026
Une composition HyperFrames paramétrée : textes, couleurs et durée passent en variables, rien ne se réécrit dans le HTML. Le README liste les variables et les figures.
index.html README.md template.json rendre_template.py
Source : 03 - Ressources/Skills/creation-motion-design/templates-hf/principes-annotes/ cd "03 - Ressources/Skills/creation-motion-design/templates-hf" python3 rendre_template.py principes-annotes vars.json film.mp4 --voix voix.wav