Zoom to the Action — effect skill for UI walkthroughs

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 how-to page 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 how-to page.

The full app establishes, then the camera pushes 1.5–2× into the part being used and eases back out.

What it does

Built on UI Focus Zoom by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.

One settle on the full screen, a smooth decelerating push to the button or field, a short hold, and a pull back before the next action.

When: Every screen recording where text would be unreadable at full frame — which is almost all of them at 1080p.

Watch out: Do not zoom on every small move; zoom on the interaction, then stay still while it happens.

Timing: Push 0.6–0.9 s (power3.inOut), hold ≥ 1.2 s, release 0.5–0.7 s. Scale 1.5–2.0×.

Also called: punch-in on UI, focus zoom, screen recording zoom

In FFmpeg

-vf "zoompan=z='if(between(it,4,6.4),min(zoom+0.03,1.8),max(zoom-0.04,1))':x='iw*0.72-iw/zoom/2':y='ih*0.30-ih/zoom/2':d=1:s=1920x1080:fps=60"

In HyperFrames

npx hyperframes add ui-focus-zoom

// animate the wrapper, never the <video> itself
tl.to("#cam",{scale:1.8,xPercent:-18,yPercent:-10,duration:0.8,ease:"power3.inOut"},4)
  .to("#cam",{scale:1,xPercent:0,yPercent:0,duration:0.6,ease:"power3.inOut"},6.4);

In Remotion

// npx shadcn@latest add @remocn/stage
const z = interpolate(frame,[120,144,192,210],[1,1.8,1.8,1],{extrapolateLeft:'clamp',extrapolateRight:'clamp',easing:Easing.inOut(Easing.cubic)});
<AbsoluteFill style={{transform:`scale(${z})`, transformOrigin:'72% 30%'}}><OffthreadVideo src={rec}/></AbsoluteFill>

In CapCut

Select the clip → Video → Basic → Scale/Position keyframes: 100% → 180% over 0.8 s at the click, back to 100% after; or use the "Auto zoom"/"Zoom" effect on desktop.

Ready-made components

Where this comes from

Use when

Not for

Install

More UI walkthroughs skills

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.