# 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="` 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. The camera pulls out from the last detail to the whole product workspace, then lands on the logo. - **Type:** [Effect](https://varg.ai/how-to/effects.md) · [End cards & CTAs](https://varg.ai/how-to/browse/skills/end-cards.md) - **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](https://github.com/heygen-com/hyperframes/tree/main/registry/components/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 ```bash -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 ```bash 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 ```tsx // npx shadcn@latest add @remocn/infinite-bento-pan const z = interpolate(frame,[0,48],[3.2,1],{extrapolateRight:'clamp',easing:Easing.inOut(Easing.exp)}); ``` ### 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](https://skills.varg.ai/component/hf.parallax-unzoom/) (hyperframes): npx hyperframes add parallax-unzoom - [Pull Back Reveal](https://skills.varg.ai/component/hf.pull-back-reveal/) (hyperframes): npx hyperframes add pull-back-reveal - [Infinite Bento Pan](https://skills.varg.ai/component/remocn.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](https://x.com/bohdanmotion/status/2080610655237751033) - [Lago: we killed our motion design job (Linear-style films, Remotion)](https://getlago.com/blog/we-killed-our-motion-design-job) ## 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](https://varg.ai/how-to/skills/logo-lockup-outro.md): The mark assembles, the wordmark settles beside it, then tagline and URL fade in under it. - [Action Line + CTA Button](https://varg.ai/how-to/skills/action-line-cta-button.md): One short action line lands, then a real-looking button pops in under it with a soft glow. - [URL Typed Into the Address Bar](https://varg.ai/how-to/skills/url-typed-in-bar.md): A browser bar appears and the product URL types itself in, then the page loads into the hero. - [YouTube End Screen Layout](https://varg.ai/how-to/skills/youtube-end-screen.md): A 5–20 s outro with clean empty slots for YouTube's clickable video and subscribe elements. - [Scan-to-Try QR Card](https://varg.ai/how-to/skills/scan-to-try-qr.md): A high-contrast QR code with a one-line reason to scan, held long enough to grab a phone. - [Store Badges Close](https://varg.ai/how-to/skills/store-badges-close.md): 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 -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