Last Frame Equals First Frame — 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 ending morphs back into the opening frame so autoplaying feeds loop without a visible seam.
- Type: Effect · End cards & CTAs
- Slug:
loop-to-first-frame - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/logo-sting
- 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 Sting by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
The final logo or shape contracts into exactly the pose the film opened on; one flash or chrome glint hides the joint.
When: Short social cuts (6–20 s) that autoplay on loop in feeds.
Watch out: Do not end on a hard black frame; the loop then reads as a restart, not a continuation.
Timing: Match the first and last 3–5 frames exactly; place the joint on a downbeat.
Also called: seamless loop ending, loop outro, boomerang logo
In FFmpeg
# compare first and last frame
ffmpeg -i out.mp4 -vf "select=eq(n\,0)" -frames:v 1 first.png
ffmpeg -sseof -0.04 -i out.mp4 -frames:v 1 last.png
In HyperFrames
npx hyperframes add logo-sting
Author the open and close from the same keyframe values; check with npx hyperframes snapshot at t=0 and t=end.
In Remotion
const t = frame / durationInFrames; // 0→1
const pose = interpolate(t,[0,0.1,0.9,1],[A,B,B,A]);
In CapCut
Duplicate the opening 0.5 s, place it at the end, and cross-fade 3–4 frames into it.
Ready-made components
- Logo Sting (hyperframes): npx hyperframes add logo-sting
- Metallic Paint (react-bits): npx shadcn@latest add @react-bits/MetallicPaint-JS-CSS
- Anamorphic Flare (remocn): npx shadcn@latest add @remocn/anamorphic-flare
Where this comes from
Use when
- Short social cuts (6–20 s) that autoplay on loop in feeds.
Not for
- Do not end on a hard black frame; the loop then reads as a restart, not a continuation.
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/d7c780c24cc4/take-loop-to-first-frame.mp4 — The Logo Sting component rendered as installed (npx hyperframes add logo-sting), defaults only (credit: Rendered by varg · HyperFrames Logo Sting, https://hyperframes.heygen.com/catalog/components/logo-sting)
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.
- Store Badges Close: A short headline settles above equal-size App Store and Google Play badges, often beside a phone.
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