Kostenlos
Solenne · 16:9
Mit diesem Skill gerendert
3D-Handy-Homescreen v1.0.0
Ein 3D-Handy dreht sich in einem weichen Studio, mit Liquid-Glass-Homescreen, Live-Benachrichtigungen und deiner Web-App auf dem Display.
Noch keine Bewertungen 0 Downloads
- 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-Geräte-B-Roll. Ein 3D-Handymodell dreht sich auf einem Schreibtisch unter einem Shader-Hintergrund; sein Liquid-Glass-Homescreen zeigt App-Icons, Widgets und hereingleitende Benachrichtigungen, dann öffnet es eine Webseite mit Hero-Zeile und Karten. Alle Inhalte auf dem Display (Icons, Beschriftungen, Benachrichtigungen, die Seite) sind HTML, das du bearbeiten kannst; Handy und Laptop sind 3D-Modelle.
Aktualisiert am 4. Nov. 2026
Das bekommst du
- Ein 15-sekündiges MP4 in 1920×1080 mit einem 3D-Handy
- Ein Liquid-Glass-Homescreen, Benachrichtigungen und deine Seite auf dem Display
- Bearbeitbares HTML für jedes Pixel des Displays
Gut geeignet für
- App-Launch-Filme und B-Roll
- Hero-Videos für Landingpages
- Demos für Investoren und Keynotes
Nicht geeignet für
- Eine echte Aufnahme deiner App zeigen
- Reine Hochformate
Über diesen Skill
Du sagst
/ios26-liquid-glass Mach einen 3D-Handy-Homescreen für Solenne: Benachrichtigungen zur Abendszene und zum Energiebericht und die Solenne-Seite „Your home, on cue“.
Geräte-B-Roll lässt jede App wie fertig veröffentlicht aussehen. 3D-Handy-Homescreen rendert ein echtes 3D-Handy mit einem aktuellen Liquid-Glass-Homescreen: Deine Benachrichtigungen ploppen auf und deine Web-App öffnet sich darauf, im Studiolicht, ganz ohne Dreh oder 3D-Artist.
So funktioniert es
- Anfrage: Nenne deinem Agenten die Benachrichtigungen, App-Namen und Seiteninhalte, die dein Handy zeigen soll.
- 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-App-Icons und -Namen durch eigene oder neutrale; unser Beispiel macht es genauso.
- Halte jede Benachrichtigung bei einer kurzen Zeile.
- Nimm für die Seite die echten Farben deines Produkts.
- 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 Benachrichtigungen, App-Namen und Seitentexte, die du auf dem Display 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 Icons bekannter Apps als Platzhalter. Ersetze sie durch eigene oder neutrale; unser Beispiel nutzt generierte neutrale Icons.
Kann ich einen Screenshot aufs Display legen?
Ja. Das Display ist HTML, also kann ein Bild deiner App die Seite ersetzen.
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.
