YouTube End Screen Layout — 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 5–20 s outro with clean empty slots for YouTube's clickable video and subscribe elements.
- Type: Effect · End cards & CTAs
- Slug:
youtube-end-screen - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/mk-placeholder-grid
- 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 Rounded Media Grid by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
Simple, calm backdrop; two 16:9 boxes and one circle reserved where YouTube places elements; a short spoken or written ask.
When: Long-form YouTube tutorials, demos and launch explainers (videos ≥ 25 s).
Watch out: Do not put busy motion or text where the elements will sit; up to four elements, and say out loud what to click.
Timing: End screen window 5–20 s (YouTube limit); 8–12 s works for most; stagger element appearance.
Also called: end screen, subscribe outro, next video card
In FFmpeg
# append a 12 s branded tail (same size/fps/codec)
printf "file main.mp4\nfile endscreen.mp4\n" > list.txt
ffmpeg -f concat -safe 0 -i list.txt -c copy out.mp4
In HyperFrames
npx hyperframes add mk-placeholder-grid
npx hyperframes add yt-lower-third
Layout 1920×1080: two video slots ≈ 615×345 and a 294 px circle; keep the last 20 s of the edit calm.
In Remotion
<Sequence from={durationInFrames - 15*fps}>
<EndScreenBackdrop/> {/* leave rects empty for YouTube elements */}
</Sequence>
In CapCut
Add the end-screen background for the last 10–15 s, Text for "Watch next", leave the slots empty; add elements later in YouTube Studio → Editor → End screen.
Ready-made components
- Rounded Media Grid (hyperframes): npx hyperframes add mk-placeholder-grid
- YouTube Lower Third (hyperframes): npx hyperframes add yt-lower-third
- X Follow Card (hyperframes): npx hyperframes add x-follow-card
Where this comes from
Use when
- Long-form YouTube tutorials, demos and launch explainers (videos ≥ 25 s).
Not for
- Do not put busy motion or text where the elements will sit; up to four elements, and say out loud what to click.
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/14a46a0c68c0/take-youtube-end-screen.mp4 — The Rounded Media Grid component rendered as installed (npx hyperframes add mk-placeholder-grid), defaults only (credit: Rendered by varg · HyperFrames Rounded Media Grid, https://hyperframes.heygen.com/catalog/blocks/mk-placeholder-grid)
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.
- 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