Pull Back to the Whole Canvas — effect skill for end cards & CTAs
For AI agents: find the right skill in one call —
curl -s "https://varg.ai/how-to/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://varg.ai/how-to/llms.txt. Every page has a markdown twin: add.mdto its path. Before generating anything, show the person the options on the how-to page.
The camera pulls out from the last detail to the whole product workspace, then lands on the logo.
- Type: Effect · End cards & CTAs
- Slug:
pull-back-to-canvas - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/parallax-unzoom
- Works in: Claude Code, Claude.ai, Codex, Cursor, OpenClaw, Gemini CLI, Any MCP client, varg Studio
- Requires: ffmpeg, 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 Parallax Unzoom by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
One long decelerating zoom-out: the last screen shrinks into a grid of everything shown, then the grid dims behind the logo.
When: Close a demo that showed many features; it recaps without a montage.
Watch out: Do not cut to a black card after the pull-back; let the workspace stay faintly behind the logo.
Timing: Pull-back 1.2–2 s, expo.inOut; logo in during the last 0.5 s of the move.
Also called: zoom out ending, unzoom reveal, workspace pull-back
In FFmpeg
-vf "zoompan=z='max(1,3.2-on*0.045)':x='iw/2-(iw/zoom/2)':y='ih/2-(ih/zoom/2)':d=1:s=1920x1080:fps=30"
In HyperFrames
npx hyperframes add parallax-unzoom
Or pull-back-reveal for a single stat → hero pull-back; set data-start so the move ends on the music resolve.
In Remotion
// npx shadcn@latest add @remocn/infinite-bento-pan
const z = interpolate(frame,[0,48],[3.2,1],{extrapolateRight:'clamp',easing:Easing.inOut(Easing.exp)});
<AbsoluteFill style={{transform:`scale(${z})`, transformOrigin:'62% 40%'}}><Workspace/></AbsoluteFill>
In CapCut
On the final workspace clip, keyframe Scale 320% → 100% over 1.5 s with Graphs → "Ease in-out"; add the logo overlay at the end.
Ready-made components
- Parallax Unzoom (hyperframes): npx hyperframes add parallax-unzoom
- Pull Back Reveal (hyperframes): npx hyperframes add pull-back-reveal
- Infinite Bento Pan (remocn): npx shadcn@latest add @remocn/infinite-bento-pan
Where this comes from
- Bohdan Motion: breakdown of the Claude Design launch video
- Lago: we killed our motion design job (Linear-style films, Remotion)
Use when
- Close a demo that showed many features; it recaps without a montage.
Not for
- Do not cut to a black card after the pull-back; let the workspace stay faintly behind the logo.
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/445001487020/take-pull-back-to-canvas.mp4 — The Parallax Unzoom component used as its header comment describes, with demo copy (credit: Rendered by varg · HyperFrames Parallax Unzoom, https://hyperframes.heygen.com/catalog/components/parallax-unzoom)
More end cards & CTAs skills
- Logo Lockup Outro: The mark assembles, the wordmark settles beside it, then tagline and URL fade in under it.
- Action Line + CTA Button: One short action line lands, then a real-looking button pops in under it with a soft glow.
- URL Typed Into the Address Bar: A browser bar appears and the product URL types itself in, then the page loads into the hero.
- YouTube End Screen Layout: A 5–20 s outro with clean empty slots for YouTube's clickable video and subscribe elements.
- Scan-to-Try QR Card: A high-contrast QR code with a one-line reason to scan, held long enough to grab a phone.
- Store Badges Close: A short headline settles above equal-size App Store and Google Play badges, often beside a phone.
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 <agent> -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