Gratuit
Solenne · 16:9
Rendu par ce Skill
Notifications Liquid Glass v1.0.0
Des cartes de notification en verre liquide givré flottent sur un fond d'aurore mouvant, l'une avec une progression en direct, l'autre avec une réponse.
Pas encore de note 0 téléchargements
- 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 d'interface en verre liquide. Deux cartes de notification givrées dérivent sur un shader d'aurore animé : l'une montre une tâche en cours qui s'achève, l'autre un message avec des points de saisie et des pastilles Répondre et Marquer comme lu, avec votre logo dans un coin. Les textes, les messages de statut 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é
- Deux cartes de notification givrées avec états de progression et de réponse
- Votre logo dans un coin
Idéal pour
- Lancements d'apps et dévoilements de fonctionnalités
- Vidéos produit au look de système moderne
- Fonds pour slides de keynote
Pas pour
- Les fonds unis ou aux couleurs de la marque
- Les messages longs
À propos de ce Skill
Vous dites
/liquid-glass-notification Fais des notifications liquid glass pour Solenne : une carte "Sunset scene" qui tamise le salon et se termine sur "Evening wind-down is on", et un message d'Ines qui demande de réchauffer la chambre.
Le verre liquide, c'est le look des systèmes d'exploitation actuels : givré, réfractif, vivant. Notifications Liquid Glass habille les notifications de votre produit dans ce style, sur une aurore mouvante, pour qu'une mise à jour, une commande ou un message paraisse à la fois natif et haut de gamme.
Comment ça marche
- Demandez : dites à votre agent ce que fait la première carte et ce qu'elle affiche une fois terminée, le message de la seconde carte, et donnez-lui 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
- Utilisez un logo blanc ; il se pose sur le fond coloré.
- Formulez la carte de progression comme une action en train de se faire.
- Limitez chaque carte à une courte ligne.
- 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
- Deux textes de notification courts, 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
Puis-je changer les couleurs de l'aurore ?
Les couleurs du shader sont définies dans le script ; votre agent peut les ajuster à votre palette.
L'effet de verre est-il réel ou une image ?
Réel : il est rendu en direct avec une bibliothèque de verre liquide, il réfracte donc le fond en mouvement.
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, Solenne.
