Code Highlight Sweep

A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. line is 0-based: line: 1 targets the second displayed line (unlike code-scroll, whose target is 1-based).

code code-animation highlight developer

Add it to a project

Ask your agent

Add the Code Highlight Sweep block from the HyperFrames Catalog to this project.
Replace the demo content with mine and match the existing design and timing.

Install from the terminal

npx hyperframes add code-highlight

Details

Property	Value
Type	Block
Dimensions	1920×1080
Duration	5s

Installed files

File	Target	Type
code-highlight.html	compositions/code-highlight.html	hyperframes:composition

Use it

Ask your agent to replace the example content, match the project style, and place the block at the right moment in the video.

Wiring it by hand. The installed block can be added to a host composition with:

<div data-composition-id="code-highlight" data-composition-src="compositions/code-highlight.html" data-start="0" data-duration="5" data-track-index="1" data-width="1920" data-height="1080"></div>

Related topics

• Browse the complete Catalog
• Add assets and Catalog items in Studio
• Build a richer composition