Toutes les ressources premium et membres pour 8,99 €/mois, en abonnement sans engagement. Voir les offres

PalateKit

Se connecter
Menu

Demander une ressource

Décrivez en une phrase la ressource qui vous manque. Nous vous écrirons quand elle sera publiée.

0 / 280

Une page, une vidéo ou une image en ligne.

Débloquer PalateKit

Tout débloquer

Offre

Le paiement vaut acceptation de nos conditions générales de vente.

Paiement sécurisé par Stripe. Reçus et factures envoyés par e-mail.

Content de vous revoir

Connectez-vous pour installer, télécharger ou sauvegarder cette ressource. Un compte gratuit suffit pour les ressources gratuites.

Sélection PalateKit

Scène filmée sur un écran, avec mise au point animée v1.0.0

Utilisez cette ressource pour donner à une scène web l'aspect d'un écran filmé par une caméra

Nouveau

  • 335 téléchargements
  • 180 mentions J'aime
  • 137 sauvegardes

4,49 €

Accès à vie à cette ressource, avec ses mises à jour.

Installer avec la CLI

Dans un terminal, depuis le dossier voulu :

npx --yes palatekit@latest install filmed-screen-camera

Première fois : connectez la CLI avec

npx --yes palatekit@latest login

L'agent colle ce composant dans votre composition HyperFrames et définit une liste de plans. À chaque plan, la caméra virtuelle s'incline, zoome, change d'étalonnage et fait la mise au point sur l'élément que vous désignez, qui reste net pendant que le reste se floute. Vous obtenez le rendu « démo de produit filmée » sans tournage.

Choisie surtout par

Mise à jour le 2 novembre 2026

Caractéristiques

Fonctionne dans
Guides d'installation
Génère avec
HyperFrames
Utilise
  • HyperFrames
  • Chrome avec HTML-in-Canvas
  • WebGL2
Licence
Apache-2.0

Ressources similaires

Tout voir

Ce que vous obtenez

  • filmed-screen.html : le composant (capture du DOM, passe WebGL, API HFFilmedScreen.mount)
  • demo.html : un exemple complet de saisie dans un champ de recherche filmé
  • README.md : documentation d'origine (en anglais) ; LISEZMOI.md : traduit en français
  • registry-item.json : les métadonnées du composant

Pour qui

  • Une vidéo de lancement ou une démo de produit au rendu « écran filmé »
  • Une scène de saisie de texte avec la caméra qui suit chaque lettre
  • Une animation d'interface qui doit sembler tournée en vrai

Pas pour qui

  • Un environnement sans Chrome récent, WebGL2 et HTML-in-Canvas
  • Un rendu rapide : la capture par écran est lente
  • Une vidéo où le texte doit rester parfaitement net partout

Étiquettes

  • écran filmé
  • profondeur de champ
  • LED
  • caméra
  • WebGL

À propos

Vous dites

« Utilise le composant filmed-screen sur ma scène de recherche : deux plans, le premier sur le titre, le second qui suit le texte tapé, étalonnage chaud. »

Gros plan sur un écran à sous-pixels LED montrant un champ de recherche avec le texte « how do » et un logo violet flou.

Template publié par HeyGen (HyperFrames) sous licence Apache-2.0, traduit par PalateKit.

Voir plus

Prérequis

À préparer
Une scène HTML (interface, texte, cartes) à filmer et Les éléments sur lesquels faire la mise au point
Dépendances
HyperFrames, Chrome avec HTML-in-Canvas et WebGL2

Comment l'utiliser

  1. Collez filmed-screen.html dans votre composition et placez votre scène dans .hf-filmed-screen-scene, avec une taille en pixels.
  2. Éditez l'appel HFFilmedScreen.mount() : plans, inclinaison, zoom, élément en focus.
  3. Prévisualisez puis lancez le rendu (capture par écran, une seule tâche).

Aperçu du contenu

Fichiers

  • demo.html33,5 Ko
  • filmed-screen.html28,1 Ko
  • LICENSE10,5 Ko
  • LISEZMOI.md8,3 Ko
  • NOTICE-PALATEKIT.md0,5 Ko
  • README.md7,3 Ko
  • registry-item.json1 Ko

Origine et licence

Modifié par PalateKit

Auteur
HeyGen (HyperFrames)
Source
github.com/heygen-com/hyperframes/tree/2c3d1e07fe63d4a2d67d63a3e29d4ad73e291d8e/registry/components/filmed-screen
Licence
Apache-2.0

Notice

Version modifiée de « Filmed Screen » (HeyGen (HyperFrames), Apache-2.0) : traduction française et fiche par PalateKit.

Avis des utilisateurs

–

Aucune note pour l'instant

Chargement des avis…

Supprimer votre avis ?

Votre note et votre commentaire seront retirés de la fiche.

Questions fréquentes

Quels sont les prérequis ?

Le moteur de rendu HyperFrames (Chrome avec HTML-in-Canvas) et WebGL2. Sans eux, la scène est affichée telle quelle avec un avertissement dans la console.

Le composant est-il stable ?

Il est marqué expérimental dans son registre. Gardez la balise <canvas layoutsubtree> dans le HTML : créée par script, elle donne des images vides.