
Mit diesem Skill gerendert
3D-Laptop-Desktop v1.0.0
Ein 3D-Laptop öffnet sich zu einem Liquid-Glass-Desktop: Menüleiste, Widgets, ein Dateifenster, eine Benachrichtigung und ein Dock, alles bearbeitbar.
- Format
- Video · 16:9
- Länge
- 0:15
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 15 Sekunden 3D-Laptop-B-Roll. Ein 3D-Laptop steht auf einem Schreibtisch unter Shader-Licht; sein Display zeigt einen Liquid-Glass-Desktop mit Menüleiste, Kalender-, Wetter- und Now-Playing-Widgets, einem Dateifenster, einer Benachrichtigung und einem Dock, die nacheinander hereinanimieren. Alle Inhalte auf dem Display sind HTML, das du bearbeiten kannst.
Aktualisiert am 4. Nov. 2026
Das bekommst du
- Ein 15-sekündiges MP4 in 1920×1080 mit einem 3D-Laptop
- Ein Liquid-Glass-Desktop mit Widgets, einem Fenster, einer Benachrichtigung und einem Dock
- Bearbeitbares HTML für das gesamte Display
Gut geeignet für
- Launches von SaaS- und Desktop-Apps
- Hero-Bereiche für Websites und Landingpages
- Keynote-B-Roll
Nicht geeignet für
- Eine echte Bildschirmaufnahme deiner App
- Reine Hochformate
Über diesen Skill
/macos-tahoe-liquid-glass Mach einen 3D-Laptop-Desktop für Solenne: ein Solenne-Fenster mit Scenes, Rooms und Plans, eine Benachrichtigung „Evening wind-down starts at 16:14“ und neutrale Dock-Icons.
Software wirkt echt auf echter Hardware. 3D-Laptop-Desktop legt einen kompletten Liquid-Glass-Desktop auf einen 3D-Laptop (Widgets, ein Fenster, eine Benachrichtigung, ein Dock), damit dein Produkt in Launch-Filmen und auf Landingpages in einem edlen Umfeld erscheint.
So funktioniert es
- Anfrage: Nenne deinem Agenten Fenstertitel und Einträge, die Widget-Inhalte, die Benachrichtigung und die Dock-Icons.
- 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
- Ersetze die Standard-Dock-Icons durch eigene oder neutrale; unser Beispiel macht es genauso.
- Benenne das Fenster nach deinem Produkt.
- Halte die Benachrichtigung bei einer Zeile.
- Es gibt keine Variablen: Dein Agent bearbeitet den Text 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
- Die Texte für Fenster, Widgets und Benachrichtigung, die du willst, und deine Farben.
- 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
Sind echte App-Icons dabei?
Das Original enthält im Dock Icons bekannter Apps als Platzhalter. Ersetze sie; unser Beispiel nutzt neutrale generierte Icons.
Kann ich das Hintergrundbild ändern?
Ja. Das Hintergrundbild ist ein Bild im HTML.
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.






