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.

Animated code line highlight v1.0.0

Use this resource to emphasize a line of code in a teaching video

New

  • 519 downloads
  • 156 likes
  • 149 saves

Free

Install with the CLI

In a terminal, from the folder you want:

npx --yes palatekit@latest install code-highlight-sweep

First time: connect the CLI with

npx --yes palatekit@latest login

A 5-second HyperFrames block (1920 x 1080) showing an editor window in the github-dark theme. A highlight band sweeps the chosen line while the surrounding context dims. The code ships as pre-computed syntax tokens that the agent can regenerate for your snippet.

Mostly picked by

Updated November 2, 2026

Details

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

Similar resources

View all

What you get

  • code-highlight.html: the composition (editor window, code tokens and animation engine)
  • registry-item.json: the HyperFrames install descriptor
  • README.md: usage guide

Good fit for

  • Programming tutorials and video courses
  • Code snippets for social media
  • Documentation or demo videos

Not for

  • Long scrolling code files
  • Hand-editing tokens without the agent

Tags

  • code
  • tutorial
  • highlight
  • teaching
  • hyperframes

About

You say

"Use Code Highlight Sweep to highlight line 3 of this Python snippet in a 5-second video."

Dark editor window with five lines of code, the second one highlighted in blue.

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

Show more

Prerequisites

You bring
The code snippet and the line number to emphasize
Dependencies
HyperFrames (HeyGen) and Node.js

How to use it

  1. Install the block in your HyperFrames project
  2. Ask the agent to swap the snippet and the target line
  3. Run the render

Content preview

Files

  • code-highlight.html23.8 KB
  • LICENSE10.5 KB
  • NOTICE-PALATEKIT.md0.4 KB
  • README.md0.7 KB
  • registry-item.json0.8 KB

Origin and licence

Modified by PalateKit

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

Notice

Version modifiée de « Code Highlight Sweep » (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 change the displayed code?

The code is stored as colored tokens in window.__TOKENS; ask the agent to regenerate them for your snippet, then set the target line (line field of window.__BLOCK).

Can I change the theme?

Yes, but colors live in the tokens, so they must be recomputed with the theme you want.