
Rendu par ce Skill
Widgets Liquid Glass v1.0.0
Des widgets de stats en verre liquide givré comptent, un panneau vitrine annonce une progression et des pastilles de statut s'allument sur une aurore mouvante.
- Format
- Vidéo · 16:9
- Durée
- 0:08
Gratuit Gratuit avec un compte
Collez ceci dans votre agent. Il connecte la CLI si besoin, puis installe le Skill.
Un bloc HyperFrames gratuit pour 8 secondes de tableau de bord en verre liquide. Trois widgets givrés font grimper une température, un niveau de batterie et un anneau de pas, un panneau vitrine avec votre logo affiche un titre, une phrase et un statut qui s'achève, et trois pastilles de statut s'illuminent, le tout sur un shader d'aurore animé. Les textes, les chiffres et le logo se modifient dans le HTML.
Mis à jour le 3 nov. 2026
Ce que vous obtenez
- Un MP4 1920×1080 de 8 secondes avec un fond d'aurore animé
- Des widgets de stats qui comptent, un panneau vitrine et des pastilles de statut
- Votre logo sur le panneau
Idéal pour
- Apps de fitness, de santé et d'objets connectés
- Tableaux de bord et fonctionnalités de données
- Plans de coupe pour un lancement produit
Pas pour
- Les fonds unis ou aux couleurs de la marque
- Plus de trois stats
À propos de ce Skill
/liquid-glass-widgets Fais des widgets liquid glass pour une sortie Halden : température, batterie de la montre et 8.2K pas, avec un panneau "Long run saved: 18.4 km at an easy pace in the Halden Solace" qui se termine sur "Run saved".
Les widgets, c'est ce qu'on regarde d'un coup d'œil pour l'essentiel. Widgets Liquid Glass construit un petit tableau de bord dans le style verre liquide givré, avec des chiffres qui grimpent et un panneau qui annonce une tâche terminée : une app de fitness, un objet connecté ou un service montre ses données en beauté.
Comment ça marche
- Demandez : donnez à votre agent les valeurs des trois widgets, le titre et la phrase du panneau, le statut de fin et votre logo.
- 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
- Choisissez trois chiffres qui racontent une même histoire, comme la température, la batterie et les pas d'une sortie running.
- Gardez la phrase du panneau autour de 70 caractères.
- Utilisez un logo blanc.
- Il n'a pas de variables : votre agent modifie les textes et les chiffres directement dans le HTML, en suivant le SKILL.md.
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
- Trois stats, un court titre et une phrase pour le panneau, un statut de fin et un logo blanc.
- 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
Les widgets peuvent-ils afficher d'autres stats ?
Oui. Les libellés, valeurs et unités sont dans le HTML ; l'animation de décompte fonctionne avec n'importe quel nombre.
Est-ce le même look que Notifications Liquid Glass ?
Oui, la même aurore et le même verre : les deux se montent très bien ensemble.
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, Halden Solace.






