Text Highlighter — primitive for callouts & annotations (react)

For AI agents: find the right skill in one call — curl -s "https://skills.varg.ai/api/search?q=<what the person wants>" returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add .md to its path. Before generating anything, show the person the options on the use-case page.

Marker-style highlight strokes sweeping behind key phrases in a paragraph, one phrase after another

• Install: npx shadcn add @fancy/text-highlighter
• Registry: fancy · Framework: react · License: MIT
• Docs and preview: https://www.fancycomponents.dev/docs/components/text/text-highlighter
• Source: https://github.com/danielpetho/fancy/blob/main/src/fancy/components/text/text-highlighter.tsx
• Example: https://skills.varg.ai/previews/lib-fancy-text-highlighter.mp4?v=28427 (Captured from the library’s own demo page (Fancy Components))
• Time: Drive from the frame. Runs on its own clock (requestAnimationFrame, timers, springs or CSS). Drive it from frame / fps before rendering, or the render drifts.
• Runs: local render, free
• Aspect: any

Prompt that renders it frame-exact

Use Text Highlighter from Fancy Components (https://www.fancycomponents.dev/docs/components/text/text-highlighter, MIT). Install with npx shadcn add @fancy/text-highlighter after adding the @fancy registry to components.json. Use it in explainers and quote cards to mark the key phrase while the voiceover says it. Set highlightColor from the brand, direction ('ltr', 'rtl', 'ttb' or 'btt'), and the transition. Use triggerType 'ref', since 'inView' and 'hover' don't fire in a render. It animates background-size with Motion. Compute the highlight's background-size from (frame - phraseStartFrame) / fps with an ease, so each phrase lands on its word in the voiceover.

Used in

• UGC ad with overlays
• Captioned talking clip
• Faceless narrated video
• Post to video
• Pull request to video
• Code walkthrough
• App walkthrough & onboarding
• Data story

More callouts & annotations

• Arc Motion Path — npx hyperframes add arc-motion-path
• Hand-Drawn Arrow — npx hyperframes add hw-arrow
• Hand-Drawn Boil — npx hyperframes add hw-boil
• Hand-Drawn Box Label — npx hyperframes add hw-box-label
• Scribble Callout Circle — npx hyperframes add hw-callout-circle
• Sketched Frame — npx hyperframes add hw-frame