{ "kind": "title-overlay", "id": "agenda", "text": "How to control AI traffic", "startFrame": 0, "endFrame": 150 } ``` ### `list-reveal` A vertical list of 1 to 5 rows. Each row gets an optional icon and reveals on a frame you specify. Use this when you have a list of things to show, between 1 and 5 of them.

list-reveal preview

```jsonc { "kind": "list-reveal", "id": "outcomes", "position": { "x": 0.5, "y": 0.55 }, "startFrame": 20, "endFrame": 150, "rows": [ { "text": "One gateway in front of every model", "iconName": "IconShield", "revealAtFrame": 0 }, { "text": "Input policy. Output policy.", "iconName": "IconFilter", "revealAtFrame": 35 }, { "text": "Every prompt, every dollar, every output", "iconName": "IconChartBar", "revealAtFrame": 70 } ] } ``` ### `flow` A horizontal sequence of 2 to 5 nodes. Each node appears, an arrow draws toward the next one, the next node appears. Use this when the meaning is in the sequence. Incident detected leads to runbook activated leads to contained.

flow preview

```jsonc { "kind": "flow", "id": "incident-flow", "startFrame": 20, "endFrame": 150, "nodes": [ { "iconName": "IconAlertOctagon", "label": "Incident" }, { "iconName": "IconBook2", "label": "Runbook" }, { "iconName": "IconCircleCheck", "label": "Contained" } ] } ``` ### `comparison` Two icons side by side with a configurable divider in the middle. Each side has a label and an optional sub-label. Use this for binary contrasts. Old way against new way is the canonical example. The divider word is configurable. `"vs"` is the default for opposition; swap to `"+"` or `"→"` when the relationship is additive or transitional.

comparison preview

```jsonc { "kind": "comparison", "id": "old-vs-new", "startFrame": 20, "endFrame": 180, "left": { "iconName": "IconClockHour3", "label": "Old way", "subLabel": "Manual review" }, "right": { "iconName": "IconBolt", "label": "New way", "subLabel": "Automated checks" }, "divider": { "label": "vs", "showLine": true } } ``` ### `hub` A central icon with 2 to 4 satellites around it. The center appears first, then each satellite reveals with a line drawing in from the center. Use this when one thing is at the centre and other things hang off it. A gateway that controls policy, logging, cost, and swap is a hub.

hub preview

```jsonc { "kind": "hub", "id": "gateway-hub", "startFrame": 20, "endFrame": 150, "center": { "iconName": "IconShield", "label": "Gateway" }, "satellites": [ { "iconName": "IconLock", "label": "Policy" }, { "iconName": "IconActivity", "label": "Logging" }, { "iconName": "IconCoin", "label": "Cost" }, { "iconName": "IconRefresh", "label": "Swap" } ] } ``` ### `icon`, `text`, `lottie` The escape hatches. Drop a single Tabler icon anywhere on the canvas, a free-position text block, or a pre-animated Lottie animation. Use these when the composite components above don't fit. ```jsonc { "kind": "icon", "id": "hero", "name": "IconShieldCheck", "position": { "x": 0.5, "y": 0.45 }, "sizePx": 240, "startFrame": 10, "endFrame": 150 } ``` Most users never read the full field reference for these. The agent reads the schema for you. If you want every field listed out, jump to the [reference section](#reference). --- ## Customize the look The kit ships with the Wednesday Solutions palette. Lavender accent on a warm off-white canvas. Every scene also gets an ambient bloom gradient behind the tracks and a sunset gradient on the title text by default. This is what "polished" looks like out of the box. Everything is configurable through the scene spec. You don't edit JSON, you ask the agent in plain language. | Tell the agent | What happens in the spec | |---|---| | "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"` | The codec auto-switches. Solid backgrounds render as H.264 MP4. The `transparent` setting renders as ProRes 4444 MOV with a real alpha channel. If you want to change the default theme for every scene without saying so each time, edit `src/scene/theme.ts`. The palette is one object. Change the hex values and every component picks them up. --- ## Manual setup Skip this if you used the one-shot prompt above. ```bash git clone git@github.com:alichherawalla/video-overlay-kit.git cd video-overlay-kit npm install ``` Add the kit to your project's `.mcp.json` or your global `~/.claude/mcp_settings.json`: ```json { "mcpServers": { "video-overlay-kit": { "command": "node", "args": ["/absolute/path/to/video-overlay-kit/bin/mcp.mjs"] } } }

video-overlay-kit

Installation