Scan-to-Try QR Card — effect skill for end cards & CTAs
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.mdto its path. Before generating anything, show the person the options on the how-to page.
A high-contrast QR code with a one-line reason to scan, held long enough to grab a phone.
- Type: Effect · End cards & CTAs
- Slug:
scan-to-try-qr - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/camera-scan-gate
- 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 Camera Scan Gate by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
Black-on-white QR (≥300 px on 1080p) on a card with a light border beam; "Scan to try free" beside it; logo small above.
When: Event screens, keynotes, TV/CTV spots and any video shown on a big screen.
Watch out: Do not flash it for 2 seconds; hold it at least 7–10 s and never animate the code itself.
Timing: Card in 0.4 s, code static, hold 7–10 s; border beam loop 3–5 s.
Also called: QR end card, scan CTA, QR code outro
In FFmpeg
ffmpeg -i film.mp4 -i qr.png -filter_complex "[1]scale=320:-1[q];[0][q]overlay=W-w-120:H-h-120:enable='gte(t,38)'" out.mp4
In HyperFrames
npx hyperframes add camera-scan-gate
Render the QR as a static <img> inside a white card; only the frame/beam animates.
In Remotion
// npx shadcn@latest add @magicui/border-beam
<div style={{background:'#fff', padding:24, borderRadius:24}}><Img src={qr} style={{width:320}}/></div>
In CapCut
Overlay the QR PNG at the lower right inside the guides, no animation on the code; add a Text line "Scan to try" with Fade in.
Ready-made components
- Camera Scan Gate (hyperframes): npx hyperframes add camera-scan-gate
- Border Beam (magic-ui): npx shadcn@latest add @magicui/border-beam
Where this comes from
- QRStuff: best practices for QR codes on TV commercials
- MediaVillage: common QR code mistakes in TV ads
Use when
- Event screens, keynotes, TV/CTV spots and any video shown on a big screen.
Not for
- Do not flash it for 2 seconds; hold it at least 7–10 s and never animate the code itself.
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/dc6e2336f741/take-scan-to-try-qr.mp4 — The Camera Scan Gate component rendered as installed (npx hyperframes add camera-scan-gate), defaults only (credit: Rendered by varg · HyperFrames Camera Scan Gate, https://hyperframes.heygen.com/catalog/components/camera-scan-gate)
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.
- Store Badges Close: A short headline settles above equal-size App Store and Google Play badges, often beside a phone.
- Pull Back to the Whole Canvas: The camera pulls out from the last detail to the whole product workspace, then lands on the logo.
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