Pour Claude Motion Skills sur ce site, imaginez un petit projet web qui devient une vidéo. Votre agent de programmation aide à écrire et réviser les sources ; HyperFrames fournit la base du rendu. Ce sont deux tâches distinctes. Comprendre leur articulation permet de situer un problème dans le message, l’animation ou le fichier exporté.
1. Transformer la demande en séquence
Imaginez une annonce de 12 secondes pour une nouvelle recherche. Donnez à l’agent un texte validé, une capture réelle, le public visé et le format. Prévoyez trois scènes : le problème de 0 à 3 secondes, l’amélioration de 3 à 9, puis l’action suivante de 9 à 12. C’est un exemple de découpage, pas un modèle obligatoire. Validez l’ordre avant de soigner les transitions : un paragraphe animé sans idée claire restera confus à plus haute résolution.
2. Garder le contenu et la mise en page modifiables
Le kit téléchargeable contient l’animation et les fichiers nécessaires pour poursuivre localement. Dans HyperFrames, HTML décrit la composition, CSS l’apparence et JavaScript peut décrire les mouvements. Gardez captures, polices et audio dans le projet pour ne pas dépendre d’une ressource externe susceptible de disparaître. Nommez clairement les scènes, par exemple problem, search-demo et next-step. Si le titre change, demandez d’ajuster cette scène et de vérifier les retours à la ligne, sans réécrire toutes les scènes.
3. Rendre chaque instant directement accessible
Le moteur doit pouvoir demander directement un instant précis. HyperFrames utilise des compositions que l’on peut parcourir dans le temps ; les API du navigateur offrent aussi des commandes comme Animation.currentTime. À 30 images par seconde, l’exemple nécessite 360 images, échantillonnées depuis zéro tous les 1/30 de seconde. Une animation dépendant uniquement de l’horloge réelle peut bien se lire mais échouer lors d’un saut temporel. Demandez deux fois le même instant et comparez, surtout avec des particules, de l’aléatoire ou des médias asynchrones.
4. Vérifier avant le rendu final coûteux
L’aperçu dans le navigateur aide à vérifier le récit et le rythme. Faites une pause au début et à la fin de chaque scène, puis examinez les transitions vers trois et neuf secondes. La partie utile de la capture est-elle assez grande ? Le titre a-t-il fini d’apparaître avant qu’il faille le lire ? D’autres éléments cachent-ils les sous-titres ? HyperFrames documente lint et check pour la validation technique. Utilisez les commandes fournies avec le projet et sa version installée ; un contrôle réussi ne juge pas la clarté du message.
5. Effectuer le rendu, regarder et conserver les sources
Le parcours MP4 de ce site s’exécute localement depuis le kit téléchargé avec HyperFrames, Chrome et FFmpeg. Il capture les images prévues puis encode le résultat ; il n’enregistre pas la fluidité occasionnelle de l’aperçu. Ouvrez le vrai MP4 et vérifiez première et dernière images, narration complète, dimensions et durée. Conservez le dossier source avec la vidéo livrée. Si un client change ensuite un mot, vous pourrez actualiser le projet et refaire le rendu sans reconstruire toute la composition à partir de pixels.
Votre prochaine étape
Jugez le récit dans l’aperçu, contrôlez le mouvement avec les sources temporisées et vérifiez la livraison dans le MP4 exporté. Gardez ces trois éléments liés.
Découvrir l’espace de créationSources et lectures complémentaires
Les références renvoient aux documents originaux et à leurs créateurs. La disponibilité peut évoluer : consultez la source avant de vous abonner ou d’installer un outil.
- Claude Motion SkillsClaude Motion Skills
- How a HyperFrames project worksHeyGen
- Animation: currentTime propertyMDN Web Docs
- Finish and share a videoHeyGen