Logo Lockup Outro — 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.
The mark assembles, the wordmark settles beside it, then tagline and URL fade in under it.
- Type: Effect · End cards & CTAs
- Slug:
logo-lockup-outro - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/logo-outro
- 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 Logo Outro by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
Centered lockup on the film's backdrop; one soft glow bloom, tagline one size down, URL smallest and last.
When: The last 3–5 s of any launch or product film.
Watch out: Do not stack logo, tagline, URL, socials and a QR at once; reveal 2–3 items in order.
Timing: Mark 0.6–0.8 s, wordmark 0.4 s, tagline +0.3 s, URL +0.3 s; hold ≥ 2 s before the cut.
Also called: brand close, logo resolve, outro logo
In FFmpeg
ffmpeg -i film.mp4 -loop 1 -i logo.png -filter_complex "[1]format=rgba,fade=in:st=41:d=0.6:alpha=1[l];[0][l]overlay=(W-w)/2:(H-h)/2-60:enable='gte(t,41)'" out.mp4
In HyperFrames
npx hyperframes add logo-outro
<div data-composition-id="logo-outro" data-composition-src="compositions/logo-outro.html"
data-variable-values='{"tagline":"Video by code","url":"varg.ai"}' data-start="41" data-duration="5" data-track-index="1"></div>
In Remotion
const logo = spring({frame, fps, config:{damping:12}});
const tag = interpolate(frame,[24,36],[0,1],{extrapolateLeft:'clamp',extrapolateRight:'clamp'});
const url = interpolate(frame,[33,45],[0,1],{extrapolateLeft:'clamp',extrapolateRight:'clamp'});
In CapCut
Overlay the logo PNG, Animation In "Zoom in" 0.6 s; Text for tagline and URL with "Fade in" 0.3 s each, staggered.
Ready-made components
- Logo Outro (hyperframes): npx hyperframes add logo-outro
- Logo Brand Close (hyperframes): npx hyperframes add logo-brand-close
- Logo Sting (hyperframes): npx hyperframes add logo-sting
Where this comes from
- Bohdan Motion: breakdown of the Grok Build Mode launch video
- Bohdan Motion: Apple Mac Studio launch film, 10-step playbook
Use when
- The last 3–5 s of any launch or product film.
Not for
- Do not stack logo, tagline, URL, socials and a QR at once; reveal 2–3 items in order.
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://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4 — Preview of the Logo Outro component that builds this take (credit: Logo Outro · hyperframes, https://hyperframes.heygen.com/catalog/blocks/logo-outro)
More end cards & CTAs skills
- 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.
- 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