Motion Deck · template HyperFrames 4 sur 6

Principes annotés

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

Six images de notre rendu

Principes annotés, image 1
1.2 s
Principes annotés, image 2
3.8 s
Principes annotés, image 3
6.2 s
Principes annotés, image 4
8.8 s
Principes annotés, image 5
11.2 s
Principes annotés, image 6
13.8 s

Notre rendu à côté de l'exemple

À 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.

Comparaison avec l'exemple

La fiche du template

La manière d'animer

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.

Pour quel message

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.

Palette par défaut
Polices

Archivo condensée 900 (wdth 62), Caveat 700 (annotations), JetBrains Mono

Exemple copié

Vidéo 4 du carrousel (showreel qui annote ses propres principes)
instagram.com/p/Ddy2jrzDjFL, regardée image par image le 29/09/2026

Le template

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

Le demander au skill

creation motion design : template principes-annotes, format 16:9, sur la voix [fichier]. Textes : [une phrase par plan], couleurs : [charte].