Kostenlos
Halden Solace · 16:9
Mit diesem Skill gerendert
Liquid-Glass-Widgets v1.0.0
Mattierte Statistik-Widgets aus Liquid Glass zählen hoch, ein Showcase-Panel meldet Fortschritt, und Status-Chips leuchten über einer fließenden Aurora auf.
Noch keine Bewertungen 0 Downloads
- Format
- Video · 16:9
- Länge
- 0:08
Kostenlos Kostenlos mit Konto
Füge das in deinen Agent ein. Er verbindet bei Bedarf die CLI und installiert dann den Skill.
Ein kostenloser HyperFrames-Block für 8 Sekunden Liquid-Glass-Dashboard. Drei mattierte Widgets zählen eine Temperatur, einen Akkustand und einen Schrittring hoch, ein Showcase-Panel mit deinem Logo zeigt einen Titel, einen Satz und einen Status, der abgeschlossen wird, und drei Status-Chips leuchten auf, alles über einem bewegten Aurora-Shader. Text, Zahlen und Logo werden im HTML bearbeitet.
Aktualisiert am 3. Nov. 2026
Das bekommst du
- Ein 8-sekündiges MP4 in 1920×1080 mit animiertem Aurora-Hintergrund
- Hochzählende Statistik-Widgets, ein Showcase-Panel und Status-Chips
- Dein Logo auf dem Panel
Gut geeignet für
- Apps für Fitness, Gesundheit und smarte Geräte
- Dashboards und Datenfunktionen
- B-Roll für Produkt-Launches
Nicht geeignet für
- Schlichte oder markenfarbige Hintergründe
- Mehr als drei Kennzahlen
Über diesen Skill
Du sagst
/liquid-glass-widgets Mach Liquid-Glass-Widgets für einen Halden-Lauf: Temperatur, Uhr-Akku und 8.2K Schritte, mit einem Panel „Long run saved: 18.4 km at an easy pace in the Halden Solace“, das mit „Run saved“ endet.
Mit Widgets erfassen Menschen auf einen Blick, was zählt. Liquid-Glass-Widgets baut ein kleines Dashboard im mattierten Liquid-Glass-Stil, mit hochzählenden Zahlen und einem Panel, das eine erledigte Aufgabe meldet, sodass eine Fitness-App, ein smartes Gerät oder ein Service seine Daten wunderschön zeigen kann.
So funktioniert es
- Anfrage: Nenne deinem Agenten die drei Widget-Werte, Titel und Satz für das Panel, den Abschlussstatus und dein Logo.
- Befüllen: Er trägt deinen Text und deine Farben in die Variablen des Blocks ein und hält die Texte nah an der Länge, für die das Layout gemacht ist.
- Rendern: Er rendert mit
npx hyperframes rendereinen Entwurf, prüft ein paar Frames und rendert dann das finale MP4. - Wiederverwenden: Die Variablen liegen in einer kleinen JSON-Datei; die nächste Version ist also nur ein weiterer Render.
Tipps
- Wähle drei Zahlen, die eine Geschichte erzählen, etwa Temperatur, Akku und Schritte bei einem Lauf.
- Halte den Panel-Satz bei etwa 70 Zeichen.
- Nimm ein weißes Logo.
- Es gibt keine Variablen: Dein Agent bearbeitet Text und Zahlen direkt im HTML und folgt dabei der SKILL.md.
Open Source
Dies ist ein Block aus der HyperFrames-Registry. Er stammt von HeyGen und den HyperFrames-Mitwirkenden (heygen-com/hyperframes) und steht unter der Apache License 2.0. Der Download ist der Block samt Assets und einer von Reelity geschriebenen SKILL.md, damit dein Agent weiß, wie er ihn befüllt und rendert; HyperFrames selbst läuft über npm.
Was du vorab brauchst
- Du lieferst
- Drei Kennzahlen, einen kurzen Panel-Titel und Satz, einen Abschlussstatus und ein weißes Logo.
- Abhängigkeiten
- Node.js 22 oder neuer — erforderlich · FFmpeg — erforderlich
- Externe Kosten
- Keine. HyperFrames ist kostenlos und Open Source und rendert auf deinem eigenen Rechner.
- Zuletzt getestet
- v1.0.0 —
Nutzerbewertungen
Noch keine Bewertungen. Installiere den Skill und bewerte ihn als Erste:r.
FAQ
Können die Widgets andere Kennzahlen zeigen?
Ja. Beschriftungen, Werte und Einheiten stehen im HTML; die Hochzähl-Animation funktioniert mit jeder Zahl.
Hat es denselben Look wie Liquid-Glass-Benachrichtigungen?
Ja, dieselbe Aurora und dasselbe Glas, sodass sich beide gut zusammenschneiden lassen.
Warum ist es kostenlos?
Es ist ein Open-Source-Block für HyperFrames von HeyGen und den HyperFrames-Mitwirkenden. Wir listen ihn unverändert, mit einer SKILL.md, damit dein Agent ihn nutzen kann, und einem Beispiel, das wir mit unserer Hausmarke Halden Solace erstellt haben.
