Alle Premium-Video-Skills in einem Plan. Jederzeit kündbar.Pläne ansehen
Solenne · 16:9

Mit diesem Skill gerendert

Desktop-Benachrichtigung v1.0.0

Ein animiertes Benachrichtigungsbanner im macOS-Stil gleitet mit deinem App-Icon, einem Titel und einer Nachricht herein und wieder hinaus.

Noch keine Bewertungen 0 Downloads
Format
Video · 16:9
Länge
0:05

Kostenlos Kostenlos mit Konto

Zum Herunterladen anmelden

Füge das in deinen Agent ein. Er verbindet bei Bedarf die CLI und installiert dann den Skill.

Ein kostenloser HyperFrames-Block für eine 5-sekündige Desktop-Benachrichtigung. Ein mattiertes Banner mit deinem App-Icon, App-Namen, Titel und einer einzeiligen Nachricht gleitet oben rechts herein, bleibt kurz stehen und gleitet wieder hinaus. Text und Icon werden im HTML bearbeitet; der Hintergrund ist transparent, damit es über einer Bildschirmaufnahme oder einem Hintergrundbild liegt.

Aktualisiert am 3. Nov. 2026

Das bekommst du

  • Ein 5-sekündiges Benachrichtigungs-Overlay in 1920×1080 mit transparentem Hintergrund
  • App-Icon, Name, Titel und Nachricht
  • Eine Anleitung, wie du es über eine Bildschirmaufnahme legst

Gut geeignet für

  • SaaS- und App-Demos
  • Tutorials und Erklärvideos
  • Ankündigungen neuer Funktionen

Nicht geeignet für

  • Reine Hochformat-Videos
  • Lange Nachrichten

Über diesen Skill

Du sagst

/macos-notification Mach eine Desktop-Benachrichtigung von Solenne: Titel „Evening wind-down is on“, Nachricht „Lights dimmed to 35%, blinds closed and the heating eased to 19°“, über unserem Wohnzimmerfoto.

Eine Desktop-Benachrichtigung ist der schnellste Weg zu zeigen, dass dein Produkt gerade etwas erledigt hat. Desktop-Benachrichtigung animiert eine im vertrauten macOS-Stil über deiner Bildschirmaufnahme oder deinem Hintergrundbild: „Evening wind-down is on“, „Payment received“, „Your export is ready“.

So funktioniert es

  1. Anfrage: Nenne deinem Agenten deinen App-Namen und dein Icon, einen Titel und eine einzeilige Nachricht.
  2. 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.
  3. Rendern: Er rendert mit npx hyperframes render einen Entwurf, prüft ein paar Frames und rendert dann das finale MP4.
  4. Wiederverwenden: Die Variablen liegen in einer kleinen JSON-Datei; die nächste Version ist also nur ein weiterer Render.

Tipps

  • Formuliere den Titel als Ergebnis, nicht als Funktion.
  • Halte die Nachricht bei einer Zeile.
  • Der Hintergrund ist transparent. Render ihn also mit Alphakanal und leg ihn über dein eigenes Video, ein Foto oder eine einfarbige Fläche; die SKILL.md zeigt die beiden Befehle.
  • 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
Deinen App-Namen, ein quadratisches Icon, einen Titel und eine einzeilige Nachricht.
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 mehrere Benachrichtigungen zeigen?

Render den Block einmal pro Benachrichtigung und stapel die Clips in deinem Schnitt, oder bitte deinen Agenten, das Banner im HTML zu duplizieren.

Ist ein Apple-Logo zu sehen?

Nein. Es zeigt dein eigenes App-Icon und deinen App-Namen in einem Banner im macOS-Stil.

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.

Leitfäden

How to add an animated desktop notification to a product demoA notification is proof that your product did something. How to animate a macOS-style banner over a screen recording, free, with the Desktop Notification block.

Ähnliche Skills

Alle ansehen