Kostenlos
Solenne · 16:9
Mit diesem Skill gerendert
Liquid-Glass-Benachrichtigungen v1.0.0
Mattierte Benachrichtigungskarten aus Liquid Glass schweben über einem fließenden Aurora-Hintergrund herein, eine mit Live-Fortschritt, eine mit Antwortoption.
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-UI. Zwei mattierte Benachrichtigungskarten schweben über einen bewegten Aurora-Shader: Eine zeigt eine laufende Aufgabe, die abgeschlossen wird, die andere eine Nachricht mit Tipp-Punkten und den Chips Reply und Mark Read, dazu dein Logo in der Ecke. Text, Statusmeldungen 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
- Zwei mattierte Benachrichtigungskarten mit Fortschritts- und Antwortzustand
- Dein Logo in der Ecke
Gut geeignet für
- App-Launches und neue Funktionen
- Produktvideos mit modernem Betriebssystem-Look
- Hintergründe für Keynote-Folien
Nicht geeignet für
- Schlichte oder markenfarbige Hintergründe
- Lange Nachrichten
Über diesen Skill
Du sagst
/liquid-glass-notification Mach Liquid-Glass-Benachrichtigungen für Solenne: eine Karte „Sunset scene“, die das Wohnzimmer dimmt und mit „Evening wind-down is on“ endet, und eine Nachricht von Ines, die bittet, das Schlafzimmer aufzuwärmen.
Liquid Glass ist der Look aktueller Betriebssysteme: mattiert, lichtbrechend, lebendig. Liquid-Glass-Benachrichtigungen zeigt die Benachrichtigungen deines Produkts in diesem Stil über einer fließenden Aurora, sodass ein Update, eine Bestellung oder eine Nachricht zugleich nativ und hochwertig wirkt.
So funktioniert es
- Anfrage: Sag deinem Agenten, was die erste Karte gerade tut und was sie meldet, wenn sie fertig ist, welche Nachricht in der zweiten Karte steht, und gib ihm 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
- Nimm ein weißes Logo; es steht auf dem farbigen Hintergrund.
- Formuliere die Fortschrittskarte als etwas, das genau jetzt passiert.
- Halte jede Karte bei einer kurzen Zeile.
- 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
- Zwei kurze Benachrichtigungstexte, 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
Kann ich die Aurora-Farben ändern?
Die Shader-Farben sind im Skript festgelegt; dein Agent kann sie auf deine Palette abstimmen.
Ist der Glaseffekt echt oder nur ein Bild?
Echt: Er wird live mit einer Liquid-Glass-Bibliothek gerendert und bricht daher den bewegten Hintergrund.
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 Solenne erstellt haben.
