VideoOverlayKit

What you can make · portrait + landscape

Four building blocks.
Same spec, both orientations.

Each component below shipped at 1080×1920 (portrait, for Reels / TikTok / Shorts) and at 1920×1080 (landscape, for YouTube / desktop / TV). Same scene spec, the kit auto-flips the layout based on canvas aspect.

`list-reveal`

A title at the top, then 1 to 5 rows revealing on cue. Each row has an icon and a label. The most common shape.

list-reveal landscape — Landscape · 1920×1080

portrait spec portrait mp4 landscape spec landscape mp4

`flow`

A process from A to B to C. Each node appears, an arrow draws between them, the next node appears. Vertical in portrait, horizontal in landscape.

portrait spec portrait mp4 landscape spec landscape mp4

`comparison`

Two icons with a configurable divider between them. Old way vs new way. Cyber security vs AI security. Manual vs automated.

comparison landscape — Landscape · 1920×1080

portrait spec portrait mp4 landscape spec landscape mp4

`hub`

A central concept with 2 to 4 satellites that connect in via lines. Circular in portrait, elliptical in landscape so satellites use the wider canvas.

portrait spec portrait mp4 landscape spec landscape mp4

Start here

Paste this into your agent.
You're done in 90 seconds.

The agent clones the repo, installs deps, wires the MCP into your config, verifies the server boots, and is ready to render videos when you ask.

The prompt

Set up github.com/alichherawalla/video-overlay-kit as an
MCP server in my coding agent.

1. Clone the repo to ~/code/video-overlay-kit (or ask me
   where to put it if that path is taken).
2. Run `npm install` inside the cloned directory.
3. Add a `video-overlay-kit` entry to my MCP config that
   runs `node <absolute-cloned-path>/bin/mcp.mjs`. Use
   the project's .mcp.json if I'm currently inside a git
   repo, otherwise my global ~/.claude/mcp_settings.json.
   Preserve any existing MCP servers.
4. Verify the server starts by sending it a tools/list
   JSON-RPC request over stdio and confirming the tools
   list_icons, validate_scene, and render_scene come back.
5. Tell me to restart my agent so the new MCP server
   is picked up.

After setup, read the README at the cloned repo so you
know how to author scene specs. Default to the Wednesday
Solutions light theme and 5-second duration unless I say
otherwise.

Then ask for a video

In plain English. No JSON editing.

"Make me a 5-second overlay titled A runbook for every incident with three rows: drift, prompt injection, exfil attempts."

The agent:

Calls list_icons("alert") to find icons.
Authors the spec.
Calls validate_scene(spec).
Calls render_scene(spec, "./out.mp4").
Returns the file path.

You drop the MP4 into your editor. End-to-end loop: 10 to 20 seconds.

Customize the look

Every default is configurable.
You ask in plain language.

The kit ships polished out of the box, with the Wednesday Solutions palette, an ambient bloom behind every scene, and a sunset gradient on every primary text label. Override any of it.

Tell the agent	What happens
"Render it in dark mode"	`theme: "dark"`
"Use a black background"	`background: "#000000"`
"Flat background, no bloom"	`bloom: false`
"Solid colour title, no gradient"	`titleGradient: false`
"Put the team photo behind it"	`backgroundImage: { source: "team.jpg" }`
"Make the accent red instead of lavender"	`palette: { accent: "#E74C3C" }`
"Transparent background, I'll composite it myself"	`background: "transparent"`

Make b-roll for your
technical videos.

Four building blocks.
Same spec, both orientations.

`list-reveal`

`flow`

`comparison`

`hub`

`list-reveal`

`flow`

`comparison`

`hub`

`list-reveal` · landscape

`flow` · landscape

`comparison` · landscape

`hub` · landscape

Paste this into your agent.
You're done in 90 seconds.

The prompt

Then ask for a video

Every default is configurable.
You ask in plain language.

The fourth path.

Hire an editor

SaaS like Submagic

Learn After Effects