Motion Deck · template HyperFrames 3 sur 6
Explicatif étape par étape
Une méthode racontée comme une recette : un récipient dessiné se remplit d'une couche par étape, l'objet de l'étape entre et verse, une fiche donne la valeur, le libellé et une note avec sa barre de progression, une frise en bas coche les étapes faites, et la fin célèbre le résultat.
Rendu du template avec ses valeurs par défaut (18 s, muet) : Textes : les quatre étapes de notre onboarding Google Ads (landing page, campagne Search, tracking, groupe Telegram des leads), tirées du skill, aucun texte nouveau.
identifiant : explicatif-etapes · format 1:1 · HyperFrames 0.8.73 + GSAP 3.14.2
Six images de notre rendu
Notre rendu à côté de l'exemple
À gauche la vidéo 3 (une image par seconde, recadrée sur la vidéo), à droite notre rendu du template sur les étapes de notre onboarding. On en reprend la manière, pas les dessins.
La fiche du template
Dessin cerné épais sur papier crème, un seul décor fixe, tout le mouvement vient des objets : le titre éclot lettre par lettre puis monte en en-tête, chaque étape suit le même geste (entrer, basculer, verser, se redresser, sortir), la teinte du liquide monte du fond puis le niveau monte, la fiche change avec un rebond, la frise coche en fin d'étape. Rythme régulier, lisible sans le son.
Expliquer une méthode, un onboarding, une offre en plusieurs étapes, une recette : quand le client doit comprendre ce qu'on fait et dans quel ordre.
Titan One (titre et valeurs, cernés), Outfit 300 à 800, Caveat (graduations)
Vidéo 3 du carrousel (une recette de cocktail en 30 s)
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/explicatif-etapes/ cd "03 - Ressources/Skills/creation-motion-design/templates-hf" python3 rendre_template.py explicatif-etapes vars.json film.mp4 --voix voix.wav