Tool Calls as Status Rows — effect skill for AI agent flows
For AI agents: find the right skill in one call —
curl -s "https://varg.ai/how-to/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://varg.ai/how-to/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.
Each tool call appears as a row with an icon and label that goes spinner → check, building a visible plan.
- Type: Effect · AI agent flows
- Slug:
tool-calls-status-rows - Status: live
- Publisher: Kapish Dima · remocn (community)
- License: MIT
- Source: https://remocn.dev/r/agent-run.json
- 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 Agent Run by Kapish Dima (remocn), MIT. The write-up and recipes below are varg's.
Rows like "Searching docs…", "Reading 3 files", "Running tests" with a shimmer while running and a green check when done; planned steps greyed.
When: Explain what an agent does without raw logs; make autonomy legible.
Watch out: Do not dump JSON or full logs on screen; one plain-language line per step.
Timing: Row in 0.2 s; running shimmer 0.6–1.2 s; check pop 0.2 s; next row starts on the check.
Also called: agent steps, tool use trace, run log
In HyperFrames
npx hyperframes add state-chip-rail
One row per step; tween data-state running → done on cue times.
In Remotion
// npx shadcn@latest add @remocn/agent-run
<AgentRun steps={[{label:'Searching docs',doneAt:30},{label:'Writing scene',doneAt:60}]}/>
In CapCut
Text rows with Animation In "Fade in"; a spinner sticker then a ✓ sticker per row.
Ready-made components
- Agent Run (remocn): npx shadcn@latest add @remocn/agent-run
- State Chip Rail (hyperframes): npx hyperframes add state-chip-rail
- Text Shimmer (motion-primitives): npx motion-primitives@latest add text-shimmer
Where this comes from
- Trace visualization: showing users what your AI agent is doing
- Glama: designing tool-enabled chat interfaces
Use when
- Explain what an agent does without raw logs; make autonomy legible.
Not for
- Do not dump JSON or full logs on screen; one plain-language line per step.
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/2fb8558b8450/lib-motion-primitives-text-shimmer.mp4 — Preview of the Text Shimmer component that builds this take (credit: Captured from the library’s own demo page (Motion Primitives), https://motion-primitives.com/docs/text-shimmer)
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.
- Nodes Wire Up on a Canvas: Nodes pop onto a canvas and connectors draw between them as the camera pulls back to show the whole pipeline.
- 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