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.

Physical-screen effect for video or screenshots v1.0.0

Use this resource to make a video or screenshot look like a real display

New

  • 462 downloads
  • 138 likes
  • 234 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install screen-warp-display-effect

First time: connect the CLI with

npx --yes palatekit@latest login

The agent applies a subtle perspective and an effects layer that evokes a physical screen to a video or screenshot: pixel grid, scanlines, vignette and light sheen. The effect switches on and off at the time you choose. You get a look close to a demo filmed on a screen.

Mostly picked by

Updated November 2, 2026

Details

Works in
Install guides
Generates with
HyperFrames
Uses
  • HyperFrames (Node.js 22 and FFmpeg)
Licence
Apache-2.0

Similar resources

View all

What you get

  • README.md: usage guide (classes, functions, render)
  • yt-screen-warp.html: component with two CSS classes, two functions and a preview scene
  • demo.html is excluded from delivery (copy of the preview)

Good fit for

  • App or website demos on video
  • Digital product announcements
  • Retro or tech edits

Not for

  • Images that must stay perfectly sharp
  • Photorealistic device renders

Tags

  • screen
  • effect
  • texture
  • retro
  • perspective

About

You say

"Make my screenshot look like a physical display with scanlines and sheen, starting at second 2."

A slightly tilted frame with pixel grid, scanlines, vignette and sheen.

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

Show more

Prerequisites

You bring
The video or screenshot to dress up and The times to switch the effect on and off
Dependencies
HyperFrames (Node.js 22 and FFmpeg)

How to use it

  1. Copy the two CSS classes into your HyperFrames composition
  2. Add yt-screen-warp3d to the container and yt-screen-fx as its last child
  3. Call ytScreenOn, then render with the HyperFrames render command

Content preview

Files

  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.8 KB
  • registry-item.json0.5 KB
  • yt-screen-warp.html4.2 KB

Origin and licence

Modified by PalateKit

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

Notice

Version modifiée de « On-Screen Display Effect » (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

How do I apply it?

Add the yt-screen-warp3d class to the media container and a yt-screen-fx div as its last child, then call ytScreenOn(tl, target, at).

Can I tone it down?

Yes: the line and grid opacities are in the .yt-screen-fx CSS, and the angle in the perspective transform of .yt-screen-warp3d.