Beams Into the Agent Hub — 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 .md to its path. Before generating anything, show the person the options on the how-to page.

Light pulses run along curved lines from tool icons into a central agent and back out to a result.

What it does

Built on Animated Beam by magic-ui, MIT. The write-up and recipes below are varg's.

App icons on the left, the agent mark in the center, outputs on the right; gradient beams travel along curved paths.

When: Show that an agent connects tools and data (MCP, integrations, sources).

Watch out: Do not run every beam at once; stagger them so the eye follows the flow.

Timing: Beam travel 1.5–3 s per path, 0.2–0.4 s stagger; curvature small (≤ 80 px).

Also called: animated beam, data flow, hub and spokes

In HyperFrames

npx hyperframes add tracing-beam

Draw the paths in SVG; animate a short gradient dash along each with strokeDashoffset on the timeline.

In Remotion

// npx shadcn@latest add @magicui/animated-beam  (props: fromRef, toRef, curvature, duration, delay, reverse)
// make it seek-safe: drive the gradient offset from frame instead of its motion animation

In CapCut

Add icon overlays and line shapes; animate a small glowing dot sticker along each line with Position keyframes.

Ready-made components

Where this comes from

Use when

Not for

Install

Example output

https://s3.varg.ai/how-to/previews/1c410e7c7d56/lib-magic-ui-animated-beam.mp4 — Preview of the Animated Beam component that builds this take (credit: Captured from the library’s own demo page (Magic UI), https://magicui.design/docs/components/animated-beam)

More AI agent flows skills

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.