Store Badges Close — 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.
A short headline settles above equal-size App Store and Google Play badges, often beside a phone.
- Type: Effect · End cards & CTAs
- Slug:
store-badges-close - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/store-badge-lockup
- Works in: Claude Code, Claude.ai, Codex, Cursor, OpenClaw, Gemini CLI, Any MCP client, varg Studio
- Requires: 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 Store Badge Lockup by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
Two official badges at identical height, centered under the line; a phone with the app's home screen to one side.
When: Mobile app launches and app ads.
Watch out: Do not stretch or recolor the official badges, and keep both at the same height.
Timing: Headline 0.5 s, badges pop 0.3 s with 0.1 s stagger, hold 2–3 s.
Also called: app store badges, download CTA, mobile app outro
In HyperFrames
npx hyperframes add store-badge-lockup
Pair with vfx-iphone-device or device-frame-stage for the phone on the side.
In Remotion
{[appStore, playStore].map((src,i)=>{const s=spring({frame:frame-15-i*3,fps,config:{damping:12}}); return <Img src={src} style={{height:72, transform:`scale(${s})`}}/>})}
In CapCut
Overlay both badge PNGs at the same height; Animation In "Pop up" 0.3 s, second one 3 frames later.
Ready-made components
- Store Badge Lockup (hyperframes): npx hyperframes add store-badge-lockup
- Social Proof Card (hyperframes): npx hyperframes add social-proof-card
- VPN YouTube Spot (hyperframes): npx hyperframes add vpn-youtube-spot
Where this comes from
Use when
- Mobile app launches and app ads.
Not for
- Do not stretch or recolor the official badges, and keep both at the same height.
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/17df948d8583/take-store-badges-close.mp4 — The Store Badge Lockup component rendered as installed (npx hyperframes add store-badge-lockup), defaults only (credit: Rendered by varg · HyperFrames Store Badge Lockup, https://hyperframes.heygen.com/catalog/components/store-badge-lockup)
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.
- 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