# Split Screen — effect skill for cuts & pacing > **For AI agents:** find the right skill in one call — `curl -s "https://varg.ai/how-to/api/search?q="` 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 `.md` to its path. Before generating anything, show the person the options on the how-to page. Show two or more shots at once in separate panels: comparison, reaction or simultaneous action. - **Type:** [Effect](https://varg.ai/how-to/effects.md) · [Cuts & pacing](https://varg.ai/how-to/browse/skills/cuts.md) - **Slug:** `split-screen` - **Status:** live - **Publisher:** HeyGen (community) - **License:** Apache-2.0 - **Source:** https://github.com/heygen-com/hyperframes/tree/main/registry/components/comparison-split - **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 [Comparison Split](https://github.com/heygen-com/hyperframes/tree/main/registry/components/comparison-split) by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's. The frame divides into halves, thirds or a grid, each panel playing its own clip. **When:** Before/after, reaction videos, duets, comparisons, phone calls. **Watch out:** Panels with the important subject cropped off at the divider; reframe each clip for its panel. **Timing:** Panels can slide in over 8–12 frames, then hold **Also called:** split-screen, side by side, multi-screen, picture grid, triptych ### In FFmpeg Left/right halves at 1920×1080 (each clip cropped to its centre half): ```bash ffmpeg -i a.mp4 -i b.mp4 -filter_complex \ "[0:v]crop=iw/2:ih,scale=960:1080[l];[1:v]crop=iw/2:ih,scale=960:1080[r];\ [l][r]hstack=inputs=2[v]" -map "[v]" -map 0:a -shortest out.mp4 ``` For grids use `xstack=inputs=4:layout=0_0|w0_0|0_h0|w0_h0`. ### In HyperFrames Two clips on separate tracks clipped with CSS (`clip-path` or half-width wrappers); animated dividers: `comparison-split`, `before-after-wipe`. ### In Remotion ```tsx
``` ### In CapCut Stack clips on overlay tracks and set Position/Scale per panel, or use a split-screen layout/template. ### Ready-made components - [Comparison Split](https://skills.varg.ai/component/hf.comparison-split/) (hyperframes): npx hyperframes add comparison-split - [Before After Wipe](https://skills.varg.ai/component/hf.before-after-wipe/) (hyperframes): npx hyperframes add before-after-wipe - [Anime Triple Split](https://skills.varg.ai/component/varg.anime-triple-split/) (varg): git clone https://github.com/vargHQ/code2video-templates && cd code2video-templates/anime-triple-split && bash make.command - [Comic Panels](https://skills.varg.ai/component/remocn.comic-panels/) (remocn): npx shadcn@latest add @remocn/comic-panels ### Where this comes from - [Wikipedia: split screen](https://en.wikipedia.org/wiki/Split_screen_(video_production)) - [FFmpeg filters: xstack](https://ffmpeg.org/ffmpeg-filters.html#xstack) ## Use when - Before/after, reaction videos, duets, comparisons, phone calls. ## Not for - Panels with the important subject cropped off at the divider; reframe each clip for its panel. ## 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/4a4d7640e342/take-split-screen.mp4 — split between two shots, with the timeline strip of the edit. Footage: Tears of Steel (2012), (CC) Blender Foundation | mango.blender.org, CC BY 3.0; Charge (2022), Blender Studio | studio.blender.org, CC BY 4.0. (credit: Rendered by varg · Tears of Steel (2012) + Charge (2022)) ## More cuts & pacing skills - [SmartCut (capcut-ai-editor)](https://varg.ai/how-to/skills/capcut-smartcut-mcp.md): MCP that reads CapCut auto-captions to cut silences and duplicate takes right inside your CapCut project. - [Auto-Editor](https://varg.ai/how-to/skills/auto-editor.md): CLI that cuts dead space by loudness or motion and exports MP4 or editor timelines; now also an agent skill. - [AutoCut](https://varg.ai/how-to/skills/autocut.md): Edit video in a text editor: Whisper transcribes, you delete lines in Markdown, AutoCut cuts the video. - [Cut Video](https://varg.ai/how-to/skills/cut-video.md): Claude Code skill that tightens long recordings with forced-aligned cuts, keeping laughs and comedic pauses. - [Videogrep](https://varg.ai/how-to/skills/videogrep.md): Search spoken words across videos and auto-build supercuts of every match. - [PySceneDetect](https://varg.ai/how-to/skills/pyscenedetect.md): Find cuts, fades and scene changes in a video, then split it or export scene lists for the edit. ## 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 -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