Nodes Wire Up on a Canvas — effect skill for AI agent flows
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.
Nodes pop onto a canvas and connectors draw between them as the camera pulls back to show the whole pipeline.
- Type: Effect · AI agent flows
- Slug:
nodes-wire-up-canvas - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/blocks/flowchart
- Works in: Claude Code, Claude.ai, Codex, Cursor, OpenClaw, Gemini CLI, Any MCP client, varg Studio
- Requires: 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 Flowchart by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
Rounded nodes with icons and labels; bezier connectors draw from output to input; a pulse travels the finished path.
When: Workflow builders, multi-step AI pipelines, automations.
Watch out: Do not show the whole graph first; build it in narration order, then reveal the full canvas.
Timing: Node pop 0.25 s, connector draw 0.4–0.6 s, pulse 0.8 s per edge; final pull-back 1 s.
Also called: node graph, workflow canvas, pipeline graph
In HyperFrames
npx hyperframes add flowchart
Or constellation-hub for feature nodes brightening in narration order.
In Remotion
const len = path.getTotalLength();
const off = interpolate(frame,[edge.at,edge.at+15],[len,0],{extrapolateLeft:'clamp',extrapolateRight:'clamp'});
<path d={d} strokeDasharray={len} strokeDashoffset={off}/>
In CapCut
Record the real canvas; zoom on each node as it is added, then a long ease-out zoom to 100% for the overview.
Ready-made components
- Flowchart (hyperframes): npx hyperframes add flowchart
- Constellation Hub (hyperframes): npx hyperframes add constellation-hub
- Hand-Drawn Flowchart (hyperframes): npx hyperframes add hw-pipeline
Where this comes from
Use when
- Workflow builders, multi-step AI pipelines, automations.
Not for
- Do not show the whole graph first; build it in narration order, then reveal the full canvas.
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://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4 — Preview of the Flowchart component that builds this take (credit: Flowchart · hyperframes, https://hyperframes.heygen.com/catalog/blocks/flowchart)
More AI agent flows skills
- Prompt Typed, Then Generate: A real task types into the prompt box, the Generate button is pressed, and the result starts to build.
- Answer Streams In: The assistant's reply arrives in uneven token bursts, the way a real model streams.
- Tool Calls as Status Rows: Each tool call appears as a row with an icon and label that goes spinner → check, building a visible plan.
- Beams Into the Agent Hub: Light pulses run along curved lines from tool icons into a central agent and back out to a result.
- Thinking… Shimmer Label: A muted "Thinking…" label with a moving shine shows the model working between prompt and answer.
- Parallel Agents Side by Side: Several agent cards work at once in lanes or an orbit, each with its own status, then merge into one result.
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