Tous les Skills vidéo Premium dans un seul abonnement. Résiliable à tout moment.Voir les offres
Solenne · 16:9

Rendu par ce Skill

Bureau sur ordinateur 3D v1.0.0

Un ordinateur portable 3D s'ouvre sur un bureau en verre liquide : barre des menus, widgets, fenêtre de fichiers, notification et Dock, tous modifiables.

Pas encore de note 0 téléchargements
Format
Vidéo · 16:9
Durée
0:15

Gratuit Gratuit avec un compte

Se connecter pour télécharger

Collez ceci dans votre agent. Il connecte la CLI si besoin, puis installe le Skill.

Un bloc HyperFrames gratuit pour 15 secondes de plans d'illustration d'ordinateur portable en 3D. Un ordinateur portable 3D est posé sur un bureau sous une lumière animée par shader ; son écran affiche un bureau en verre liquide avec une barre des menus, des widgets calendrier, météo et lecture en cours, une fenêtre de fichiers, une notification et un Dock, qui s'animent tour à tour. Tout le contenu de l'écran est du HTML modifiable.

Mis à jour le 4 nov. 2026

Ce que vous obtenez

  • Un MP4 1920×1080 de 15 secondes avec un ordinateur portable 3D
  • Un bureau en verre liquide avec widgets, fenêtre, notification et Dock
  • Du HTML modifiable pour tout l'écran

Idéal pour

  • Lancements de SaaS et d'applis de bureau
  • En-têtes de sites web et de landing pages
  • Plans d'illustration pour keynotes

Pas pour

  • Un vrai enregistrement d'écran de votre appli
  • Les formats uniquement verticaux

À propos de ce Skill

Vous dites

/macos-tahoe-liquid-glass Fais un bureau sur ordinateur 3D pour Solenne : une fenêtre Solenne avec Scènes, Pièces et Formules, une notification "Evening wind-down starts at 16:14" et des icônes neutres dans le Dock.

Un logiciel paraît réel sur du vrai matériel. Bureau sur ordinateur 3D place un bureau complet en verre liquide sur un ordinateur portable 3D (widgets, fenêtre, notification, Dock) pour que votre produit apparaisse dans un décor soigné, dans vos films de lancement et vos landing pages.

Comment ça marche

  1. Demandez : donnez à votre agent le titre et les éléments de la fenêtre, le contenu des widgets, la notification et les icônes du Dock.
  2. Remplissage : il inscrit vos textes et vos couleurs dans les variables du bloc, en gardant des textes proches de la longueur prévue par la mise en page.
  3. Rendu : il rend un brouillon avec npx hyperframes render, vérifie quelques images et rend le MP4 final.
  4. Réutilisation : les variables tiennent dans un petit fichier JSON ; la version suivante, c'est un rendu de plus.

Conseils

  • Remplacez les icônes du Dock par défaut par les vôtres ou par des neutres ; c'est ce que fait notre exemple.
  • Donnez à la fenêtre le nom de votre produit.
  • Limitez la notification à une ligne.
  • Il n'a pas de variables : votre agent modifie les textes directement dans le HTML, en suivant le SKILL.md.

Open source

C'est un bloc du registre HyperFrames, réalisé par HeyGen et les contributeurs de HyperFrames (heygen-com/hyperframes) et partagé sous Apache License 2.0. Le téléchargement contient le bloc, ses ressources et un SKILL.md rédigé par Reelity, pour que votre agent sache le remplir et le rendre ; HyperFrames lui-même s'exécute depuis npm.

Ce qu'il vous faut avant de commencer

Vous fournissez
Les textes de la fenêtre, des widgets et de la notification que vous voulez, ainsi que vos couleurs.
Dépendances
Node.js 22 ou version ultérieure — requis · FFmpeg — requis
Coûts externes
Aucun. HyperFrames est gratuit et open source, et le rendu se fait sur votre propre machine.
Dernier test
v1.0.0 —

Avis des utilisateurs

Pas encore d'avis. Installez le Skill et soyez le premier à le noter.

FAQ

Est-il livré avec de vraies icônes d'applis ?

L'original contient dans le Dock des icônes d'applis connues comme espaces réservés. Remplacez-les ; notre exemple utilise des icônes neutres générées.

Puis-je changer le fond d'écran ?

Oui. Le fond d'écran est une image dans le HTML.

Pourquoi est-ce gratuit ?

C'est un bloc HyperFrames open source de HeyGen et des contributeurs de HyperFrames. Nous le proposons tel quel, avec un SKILL.md pour que votre agent puisse l'utiliser et un exemple réalisé avec l'une de nos marques maison, Solenne.

Guides

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.

Skills similaires

Tout voir