# Marker on the Key Phrase — effect skill for headlines & callouts > **For AI agents:** find the right skill in one call — `curl -s "https://varg.ai/how-to/api/search?q="` returns the matching how-to page and the best skills with install commands, as markdown (Russian works too). Full index: https://varg.ai/how-to/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the how-to page. A marker band draws behind the one phrase that matters while the rest of the line stays calm. - **Type:** [Effect](https://varg.ai/how-to/effects.md) · [Headlines & callouts](https://varg.ai/how-to/browse/skills/titles.md) - **Slug:** `marker-highlight-phrase` - **Status:** live - **Publisher:** HeyGen (community) - **License:** Apache-2.0 - **Source:** https://github.com/heygen-com/hyperframes/tree/main/registry/components/inline-highlight - **Works in:** Claude Code, Claude.ai, Codex, Cursor, OpenClaw, Gemini CLI, Any MCP client, varg Studio - **Requires:** HyperFrames (npx hyperframes), Remotion, CapCut (by hand) - **Cost:** Free — the take renders locally; generated footage, if any, bills by the model ## What it does Built on [Inline Highlight](https://github.com/heygen-com/hyperframes/tree/main/registry/components/inline-highlight) by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's. A sentence holds still; a flat or hand-drawn colored band sweeps left to right behind two or three words, and their color shifts to match. **When:** Point at the claim the voiceover stresses ("in 30 seconds", "without code"). **Watch out:** Do not highlight more than one phrase per line; two bands cancel each other out. **Timing:** Line settles first; band sweeps 0.4–0.6 s, power2.inOut, starting on the spoken word. **Also called:** highlight sweep, highlighter, emphasis marker ### In HyperFrames ```bash npx hyperframes add inline-highlight ``` ```js tl.fromTo(".mark",{"--hl":0},{"--hl":1,duration:0.5,ease:"power2.inOut"},wordTime); ``` ### In Remotion ```tsx // npx shadcn@latest add @remocn/marker-highlight const w = interpolate(frame,[at,at+15],[0,100],{extrapolateLeft:'clamp',extrapolateRight:'clamp'}); {phrase} ``` ### In CapCut Add a solid shape sticker behind the words (Stickers → Shapes), set its anchor left, keyframe Scale X from 0 to 100% over 0.5 s. ### Ready-made components - [Inline Highlight](https://skills.varg.ai/component/hf.inline-highlight/) (hyperframes): npx hyperframes add inline-highlight - [Text Highlighter](https://skills.varg.ai/component/fancy.text-highlighter/) (fancy): npx shadcn add @fancy/text-highlighter - [Marker Highlight](https://skills.varg.ai/component/hf.marker-highlight/) (hyperframes): npx hyperframes add marker-highlight - [Marker Highlight](https://skills.varg.ai/component/remocn.marker-highlight/) (remocn): npx shadcn@latest add @remocn/marker-highlight ### Where this comes from - [Text animation for readability: kinetic type without overcomplication](https://cursa.app/en/page/text-animation-for-readability-kinetic-type-without-overcomplication) - [Bohdan Motion: Secureframe launch video, one pain per scene](https://x.com/bohdanmotion/status/2069369111231049803) ## Use when - Point at the claim the voiceover stresses ("in 30 seconds", "without code"). ## Not for - Do not highlight more than one phrase per line; two bands cancel each other out. ## Install - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg` - Codex: `npx skills add vargHQ/skills --skill varg-video-edit-library -a codex -y` - Cursor: `npx skills add vargHQ/skills --skill varg-video-edit-library -a cursor -y` ## Example output https://s3.varg.ai/how-to/previews/e90e479f86d8/lib-fancy-text-highlighter.mp4 — Preview of the Text Highlighter component that builds this take (credit: Captured from the library’s own demo page (Fancy Components), https://www.fancycomponents.dev/docs/components/text/text-highlighter) ## More headlines & callouts skills - [Kicker Over Rising Headline](https://varg.ai/how-to/skills/kicker-headline-rise.md): A small mono kicker fades in, then the headline rises word by word from a soft blur. - [Rotating Benefit Word](https://varg.ai/how-to/skills/rotating-benefit-word.md): A fixed phrase holds while one word in it cycles through benefits, uses or audiences. - [Masked Line Reveal](https://varg.ai/how-to/skills/masked-line-reveal.md): Each line slides up out of an invisible slot, so the type looks cut from the frame. - [Strike Old, Write New](https://varg.ai/how-to/skills/strike-and-replace.md): A line strikes through the old way, then the new word takes its place. - [Clean Lower Third](https://varg.ai/how-to/skills/clean-lower-third.md): Name and role slide in at the lower left on a quiet bar, hold 3–5 s, then wipe out. - [Hand-Drawn Callout Arrow](https://varg.ai/how-to/skills/hand-drawn-callout-arrow.md): A wobbly arrow draws itself from a short label to the exact button or number on screen. ## Run the generation on varg varg is one API key for the models these skills drive — Seedance 2.5, Kling 4, Veo 3.1, Wan 3, Nano Banana 2.1, GPT Image 2.5, ElevenLabs v4 and 200+ more — billed in credits, with a cost estimate before anything runs. - Claude Code: `claude plugin marketplace add vargHQ/skills && claude plugin install varg@varg` (skill + hosted MCP) - Codex, Cursor, Gemini CLI, OpenClaw: `npx skills add vargHQ/skills --skill varg-ai -a -y` - Grok and any agent that reads SKILL.md: `npx skills add vargHQ/skills --skill varg-ai`, or point it at the skill's SKILL.md - Claude.ai, ChatGPT, any MCP client: connect `https://mcp.varg.ai/mcp` - API key: https://varg.ai/dashboard/api · Model specs: https://varg.ai/models/llms.txt