Action Line + CTA Button — 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.
One short action line lands, then a real-looking button pops in under it with a soft glow.
- Type: Effect · End cards & CTAs
- Slug:
action-line-cta-button - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/cta-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 CTA Lockup by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
"Start building today" in display type; a pill button with the exact CTA ("Try free") pops with a glow and an optional cursor click.
When: Any film whose goal is a sign-up, demo booking or download.
Watch out: Do not write two CTAs; one verb, one button, matching the landing page's button text.
Timing: Line 0.5 s per-word, button pop 0.3 s back.out(1.6), click at +0.6 s, hold 2–3 s.
Also called: CTA close, call to action, button end card
In HyperFrames
npx hyperframes add cta-lockup
Set the line and button text in data-variable-values; optional press-ripple for a click on the button.
In Remotion
// npx shadcn@latest add @remocn/button (state = f(frame): idle → hover → press)
const pop = spring({frame: frame-20, fps, config:{damping:10, stiffness:180}});
In CapCut
Text for the line; Stickers → search "button" or make a rounded shape + text; Animation In "Pop up"; add a click SFX.
Ready-made components
- CTA Lockup (hyperframes): npx hyperframes add cta-lockup
- CTA Close (hyperframes): npx hyperframes add cta-close
- Glow Effect (motion-primitives): npx motion-primitives@latest add glow-effect
- UI Button (remocn): npx shadcn@latest add @remocn/button
Where this comes from
- Bohdan Motion: Secureframe launch video, one pain per scene
- Bohdan Motion: breakdown of the ElevenLabs Flows launch video
Use when
- Any film whose goal is a sign-up, demo booking or download.
Not for
- Do not write two CTAs; one verb, one button, matching the landing page's button text.
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/86bfe6485954/take-action-line-cta-button.mp4 — The CTA Lockup component rendered as installed (npx hyperframes add cta-lockup), defaults only (credit: Rendered by varg · HyperFrames CTA Lockup, https://hyperframes.heygen.com/catalog/components/cta-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.
- 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.
- 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