madhavsomani/animation-canvas-explicative

Reel explicatif sur canvas

Créé pour la première fois pour un Reel de conseils CV en octobre 2026, puis transformé en formule réutilisable.

• Exemple fonctionnel : template/example-08-resume.html (la composition HyperFrames complète de ce Reel ; ses médias ne sont pas inclus).
• Captures d'écran : ../../docs/canvas-explainer/.

Règles applicables : garder l'avatar à l'écran par courtes séquences (environ 3-4 s chacune) et ne livrer que le master en pleine qualité. Moteur : HyperFrames (pin [email protected]). FFmpeg réservé à la préparation et au contrôle qualité.

La formule (conservez-la intégralement)

1. Un seul canvas noir infini. Utilisez #world en 2400x6400 avec une grille de points subtile. La caméra ne coupe jamais ; elle glisse avec power3.inOut et un léger flou de mouvement sur les grands déplacements.
2. Tout est dessiné en direct, sur le mot prononcé.
   • Les traits de marqueur sont des chemins SVG avec un filtre feDisplacementMap rugueux.
   • Les étiquettes manuscrites utilisent Ink Free, tapées avec steps().
   • Couleurs : blanc #f4f4ef, jaune #ffd84a, bleu #6f8cff, rose #ff6fae, vert #7ee08a, rouge #ff4b3e.
   • Des flèches et cercles rouges pointent vers l'élément clé.
3. De véritables artefacts techniques, jamais de simples gribouillis génériques. Un public d'ingénieurs logiciels attend de l'architecture réelle, du code, des terminaux, de vraies captures d'écran et de vrais documents (par exemple un CV expurgé), annotés avec des encadrés et de l'écriture manuscrite.
4. Avatar à l'intérieur de cadres esquissés sur le canvas.
   • Les cadres font 405x720 en 9:16. La caméra zoome dans un cadre (s = 1080/405) pour que la séquence de l'avatar passe en plein écran ; ce zoom est la transition. Annotez par-dessus la séquence en écriture manuscrite.
   • La durée totale de l'avatar reste sous 40% du temps (visez environ 20%) : un temps d'accroche, un temps « personnel » au milieu, la conclusion.
5. Pas d'écran vide.
   • Chaque région remplit la vue y 120-1500.
   • Des connecteurs rouges se dessinent entre les régions pendant les mouvements de caméra.
   • Un en-tête jaune apparaît lorsque la caméra arrive.
   • Les sous-titres se situent en y 1555-1720 en Ink Free 64px avec des mots-clés jaunes. Enveloppez le HTML des sous-titres joints dans un <span> intérieur, sinon flex supprime les espaces.
6. Fin.
   • La caméra dézoome sur l'ensemble du plan dessiné (s ≈ 0,31) derrière une carte de fin assombrie (0,58).
   • L'appel à l'action (CTA) est prononcé par sa voix. Exemple : « Vous voulez mon CV ? Commentez 'CV', et je vous l'enverrai comme modèle. » Affichez le mot-clé en grand en jaune.
   • Ne dites jamais aux spectateurs de ne pas copier la ressource partagée. La ressource est à eux.
7. Son.
   • Un fond musical sous la voix, découpé avec ~/.claude/skills/hyperframes-audio/scripts/carve.mjs --comp index.html --core <dossier avec node_modules/@hyperframes/core>. Pointez --core vers n'importe quel dossier de projet contenant @hyperframes/core installé.
   • Augmentez la musique dans les silences de la voix et au dézoom.
   • Effets sonores : clic de stylo sur les ticks/étiquettes, frappe sur le code, page qui tourne/whoosh sur les mouvements de caméra, swish-thud sur les apparitions, carillon à la fin.
   • La musique doit être compatible Instagram (voir Musique ci-dessous).

Étapes de construction

1. Entrées.
   • Fichier WAV de la voix, normalisé à -16 LUFS : accroche + narration, concaténés.
   • Synchronisation mot@temps mot@secondes : JSON aligné ou sous-titres clips.json, sauvegardé sous words.txt.
   • MP4 de l'avatar dont le temps media = temps de la voix moins la durée de l'accroche.
   • Images des artefacts réels.
2. Régions du storyboard. Pour chaque temps, choisissez une origine dans le monde et listez ses dessins avec les temps des mots prononcés. Gardez le texte à l'intérieur de la vue 1080px (Ink Free ≈ 0,5 em par caractère).
3. Copiez template/example-08-resume.html dans un nouveau dossier de projet et remplacez les blocs de régions, les cadres (image JPG d'affiche sous chaque `<video class=