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

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.

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

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 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

Du sagst

/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

  1. Anfrage: Nenne deinem Agenten Fenstertitel und Einträge, die Widget-Inhalte, die Benachrichtigung und die Dock-Icons.
  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

  • 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.

Leitfäden

How to make a 3D phone mockup video for your appDevice b-roll makes any app look shipped. How to render a 3D phone with a liquid-glass home screen and your app on it, free, with the 3D Phone Home Screen block.How to make a 3D laptop mockup video for your productSoftware looks real on real hardware. How to put your product on a 3D laptop with a liquid-glass desktop, free, with the 3D Laptop Desktop block.

Ähnliche Skills

Alle ansehen