Gratuit
Ember & Bun · 16:9
Rendu par ce Skill
Course de barres v1.0.0
Des barres classées grandissent et se dépassent au fil des mois, avec un axe qui s'ajuste à mesure que les chiffres montent.
Pas encore de note 0 téléchargements
- Format
- Vidéo · 16:9
- Durée
- 0:12
Gratuit Gratuit avec un compte
Collez ceci dans votre agent. Il connecte la CLI si besoin, puis installe le Skill.
Un bloc HyperFrames gratuit qui transforme un petit tableau en course de barres. Collez vos périodes et vos séries en texte brut ; les barres grandissent, changent de rang et se dépassent période après période, les valeurs défilent à côté et l'axe s'ajuste à mesure qu'elles montent. Le titre, le sous-titre, les données, le nombre de barres, la vitesse, le format des nombres et l'accent sont des variables.
Mis à jour le 3 nov. 2026
Ce que vous obtenez
- Une course de barres MP4 1920×1080, 2 secondes par période par défaut
- Des dépassements, des valeurs qui défilent et un axe qui s'ajuste tout seul
- Des données saisies en texte brut, sans tableur
Idéal pour
- Histoires de ventes, de croissance et de classement
- Bilans de l'année et posts d'étapes clés
- Journalisme de données et explications pédagogiques
Pas pour
- Des dizaines de séries ou des périodes très longues
- Les chiffres exacts qu'il faut lire posément
À propos de ce Skill
Vous dites
/bar-chart-race Fais une course de barres intitulée "Ember & Bun: burgers sold by month" de juin à novembre, valeurs en milliers : Double Stack 12, 18, 26, 35, 47, 61 ; Classic Cheese 22, 25, 28, 30, 32, 33 ; et quatre autres plats du menu. Accent orange.
Un classement qui évolue dans le temps raconte une histoire, et une course de barres la raconte en quelques secondes. Donnez à Bar Chart Race quelques périodes et quelques séries en texte brut ; il anime la montée, les dépassements et le leader, avec une typographie éditoriale soignée et une seule couleur d'accent sur la barre en tête.
Comment ça marche
- Demandez : donnez à votre agent le titre, les périodes et les valeurs de chaque série en texte brut, ainsi que les unités.
- Remplissage : il inscrit vos textes et vos couleurs dans les variables du bloc, en gardant des textes proches de la longueur prévue par la mise en page.
- Rendu : il rend un brouillon avec
npx hyperframes render, vérifie quelques images et rend le MP4 final. - Réutilisation : les variables tiennent dans un petit fichier JSON ; la version suivante, c'est un rendu de plus.
Conseils
- Quatre à huit séries et quatre à huit périodes se lisent le mieux.
- Choisissez l'accent pour l'élément que vous voulez faire suivre au public.
- Utilisez le préfixe et le suffixe pour les unités comme $, k ou %.
- Allongez la durée par période pour une course plus calme et plus lisible.
Open source
C'est un bloc du registre HyperFrames, réalisé par HeyGen et les contributeurs de HyperFrames (heygen-com/hyperframes) et partagé sous Apache License 2.0. Le téléchargement contient le bloc, ses ressources et un SKILL.md rédigé par Reelity, pour que votre agent sache le remplir et le rendre ; HyperFrames lui-même s'exécute depuis npm.
Ce qu'il vous faut avant de commencer
- Vous fournissez
- Vos périodes et les valeurs de chaque série, un titre et les unités.
- Dépendances
- Node.js 22 ou version ultérieure — requis · FFmpeg — requis
- Coûts externes
- Aucun. HyperFrames est gratuit et open source, et le rendu se fait sur votre propre machine.
- Dernier test
- v1.0.0 —
Avis des utilisateurs
Pas encore d'avis. Installez le Skill et soyez le premier à le noter.
FAQ
Quel format pour les données ?
Une ligne par série : le nom, deux-points, puis les valeurs séparées par des virgules, dans l'ordre des périodes. Votre agent peut convertir un tableur dans ce format pour vous.
Quelle est la durée de la vidéo ?
Deux secondes par période par défaut, donc six périodes font environ 12 secondes. La durée par période est une variable.
Pourquoi est-ce gratuit ?
C'est un bloc HyperFrames open source de HeyGen et des contributeurs de HyperFrames. Nous le proposons tel quel, avec un SKILL.md pour que votre agent puisse l'utiliser et un exemple réalisé avec l'une de nos marques maison, Ember & Bun.
