Every premium and members-only resource for $9.99/month, as a no-commitment subscription. See the plans

PalateKit

Sign in
Menu

Request a resource

Describe the resource you are missing in one sentence. We will email you when it is published.

0 / 280

A page, a video or an image online.

Unlock PalateKit

Unlock everything

Plan

Paying means accepting our terms of sale.

Secure payment by Stripe. Receipts and invoices sent by email.

Welcome back

Sign in to install, download or save this resource. A free account is enough for free resources.

PalateKit Pick

Scene filmed off a screen with rack focus v1.0.0

Use this resource to make a web scene look like a screen filmed by a camera

New

  • 335 downloads
  • 180 likes
  • 137 saves

$4.99

Lifetime access to this resource, with its updates.

Install with the CLI

In a terminal, from the folder you want:

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

First time: connect the CLI with

npx --yes palatekit@latest login

The agent pastes this component into your HyperFrames composition and defines a list of shots. In each shot the virtual camera tilts, zooms, changes grade and racks focus onto the element you name, which stays sharp while the rest blurs. You get the filmed product demo look without a shoot.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames
  • Chrome with HTML-in-Canvas
  • WebGL2
Licence
Apache-2.0

Similar resources

View all

What you get

  • filmed-screen.html: the component (DOM capture, WebGL pass, HFFilmedScreen.mount API)
  • demo.html: a full example of typing into a filmed search box
  • README.md: the original documentation
  • registry-item.json: component metadata

Good fit for

  • A launch video or product demo with a filmed-screen look
  • A typing scene where the camera follows each letter
  • An interface animation that should feel shot for real

Not for

  • An environment without a recent Chrome, WebGL2 and HTML-in-Canvas
  • A fast render: screenshot capture is slow
  • A video where text must stay perfectly sharp everywhere

Tags

  • filmed screen
  • depth of field
  • LED
  • camera
  • WebGL

About

You say

"Use the filmed-screen component on my search scene: two shots, the first on the title, the second following the typed text, warm grade."

Close-up of an LED sub-pixel screen showing a search box typing "how do" with a blurred purple logo.

Template published by HeyGen (HyperFrames) under the Apache-2.0 license.

Show more

Prerequisites

You bring
An HTML scene (interface, text, cards) to film and The elements to rack focus onto
Dependencies
HyperFrames, Chrome with HTML-in-Canvas, and WebGL2

How to use it

  1. Paste filmed-screen.html into your composition and put your scene inside .hf-filmed-screen-scene, with a pixel size.
  2. Edit the HFFilmedScreen.mount() call: shots, tilt, zoom, focus element.
  3. Preview, then render (screenshot capture, single worker).

Content preview

Files

  • demo.html33.5 KB
  • filmed-screen.html28.1 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md7.3 KB
  • registry-item.json1 KB

Origin and licence

Modified by PalateKit

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

User reviews

–

No ratings yet

Loading reviews…

Delete your review?

Your rating and comment will be removed from the page.

Frequently asked questions

What does it require?

The HyperFrames renderer (Chrome with HTML-in-Canvas) and WebGL2. Without them the scene is shown unfilmed with a console warning.

Is it stable?

It is marked experimental in its registry. Keep the <canvas layoutsubtree> in the HTML: created from script, it yields blank frames.