Answer Streams In — 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.
The assistant's reply arrives in uneven token bursts, the way a real model streams.
- Type: Effect · AI agent flows
- Slug:
answer-streams-in - Status: live
- Publisher: Miao Yang · HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/streaming-text
- 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 Streaming Text by Miao Yang (hyperframes), Apache-2.0. The write-up and recipes below are varg's.
Words appear in short irregular bursts with a soft caret; markdown headings and lists form as they stream.
When: Chat assistants and any feature whose output is text.
Watch out: Do not reveal at a perfectly even rate; real streams come in bursts and that rhythm sells authenticity.
Timing: Bursts of 2–6 tokens every 40–120 ms; total ≤ 3 s on screen, then hold.
Also called: streaming text, token stream, AI reply
In HyperFrames
npx hyperframes add streaming-text
Use a fixed seed for burst sizes so every render streams identically.
In Remotion
const bursts = useMemo(()=>seededBursts(text, 42),[]); // [{at,frame,upto}]
const upto = bursts.filter(b=>b.frame<=frame).at(-1)?.upto ?? 0;
<Markdown>{text.slice(0,upto)}</Markdown>
In CapCut
Record the real stream; or Text → Animation In "Typewriter" with a long duration on a pasted answer.
Ready-made components
- Streaming Text (hyperframes): npx hyperframes add streaming-text
- Claude Exchange (hyperframes): npx hyperframes add claude-exchange
- Text Generate Effect (aceternity): npx shadcn@latest add @aceternity/text-generate-effect
Where this comes from
- Glama: designing tool-enabled chat interfaces
- Trace visualization: showing users what your AI agent is doing
Use when
- Chat assistants and any feature whose output is text.
Not for
- Do not reveal at a perfectly even rate; real streams come in bursts and that rhythm sells authenticity.
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/templates/promoted/254fe4bd8a3f00c1e70ac5e38a1bce25060f7590/claude-exchange/preview.mp4 — Preview of the Claude Exchange component that builds this take (credit: Claude Exchange · hyperframes, https://hyperframes.heygen.com/catalog/blocks/claude-exchange)
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.
- 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.
- 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