--- title: "Word-Sweep Highlight" description: "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover" --- ## Install ```bash Terminal npx hyperframes add mk-callout-highlight ``` That writes one file: `compositions/mk-callout-highlight.html`. ## Add it to your video It runs for 8 seconds at 1920×1080. Paste this into your composition: ```html index.html
``` Move it in time with `data-start`. Put it on a different timeline row with `data-track-index`. See [data attributes](/concepts/data-attributes) for the rest. ## Add it to a project ### Ask your agent ```text Add the Word-Sweep Highlight 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 ```bash npx hyperframes add mk-callout-highlight ``` ## 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: ```html ``` ## Related topics - [Browse the complete Catalog](/catalog) - [Add assets and Catalog items in Studio](/studio/assets-and-blocks) - [Build a richer composition](/go-further) {/* hf:generated-footer */} Tagged `typography` `karaoke` `captions` `minimal`.