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.

Feathered spotlight to highlight an area v1.0.0

Use this resource to highlight a specific area of a video or screen recording

New

  • 536 downloads
  • 149 likes
  • 111 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install feathered-spotlight

First time: connect the CLI with

npx --yes palatekit@latest login

The agent adds a dark layer with a soft-edged elliptical hole. Its position, size and dimming are CSS variables, and three helpers (ytHighlightIn, ytHighlightTo, ytHighlightOut) turn it on, glide it to another point, then turn it off on the timeline.

Mostly picked by

Updated November 2, 2026

Details

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

Similar resources

View all

What you get

  • yt-feather-highlight.html: ready-to-use HyperFrames composition (1920x1080, 5 s)
  • README.md: usage guide (installation, variables, render)
  • registry-item.json: block install manifest

Good fit for

  • Guiding the viewer's eye in a tutorial or screen demo.
  • Drawing attention to a figure in an explainer video.
  • Moving through several areas to comment on during a presentation.

Not for

  • Word-by-word text highlighting.
  • A video with no specific moment to point at.

Tags

  • spotlight
  • highlight
  • tutorial
  • overlay

About

You say

"Add a spotlight on the left part of the screen at 3 seconds, then glide it to the right at 5 seconds."

Dimmed frame with a soft-edged bright ellipse highlighting one of two boxes.

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

Show more

Prerequisites

You bring
The moments and areas to highlight and The video or scene to place the spotlight on
Dependencies
HyperFrames, Node.js, and FFmpeg

How to use it

  1. Install HyperFrames in your video project, then add the block.
  2. Ask your agent to adapt texts, colors and timings to your content.
  3. Run the render to get the video.

Content preview

Files

  • demo.html5.4 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md1 KB
  • registry-item.json0.6 KB
  • yt-feather-highlight.html5.1 KB

Origin and licence

Modified by PalateKit

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

Notice

Version modifiée de « Feathered Spotlight » (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 install it in my project?

Copy yt-feather-highlight.html into the compositions/ folder of a HyperFrames project (with the assets/ folder if there is one), or ask your agent to run npx hyperframes add yt-feather-highlight.

What can I customize?

You can change the positions (x, y), radii (rx, ry) and dimming strength passed to ytHighlightIn, ytHighlightTo and ytHighlightOut. Ask your agent to adapt the file to your content.