Thinking… Shimmer Label — 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.
A muted "Thinking…" label with a moving shine shows the model working between prompt and answer.
- Type: Effect · AI agent flows
- Slug:
thinking-shimmer-label - Status: live
- Publisher: Elliot Sutton (community)
- License: MIT + Commons Clause
- Source: https://github.com/imskyleen/animate-ui/blob/main/packages/react/src/primitives/texts/shimmering/index.tsx
- 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 Shimmering Text by animate-ui, MIT + Commons Clause. The write-up and recipes below are varg's.
Small grey text with a light band sweeping through it, or three bouncing dots, placed exactly where the answer will appear.
When: Short waits in AI demos; it marks time without dead air.
Watch out: Do not hold it longer than ~1.5 s in a film; cut the real wait down.
Timing: Sweep period 1.2–1.6 s; show for 0.6–1.5 s total.
Also called: thinking indicator, generating label, typing dots
In HyperFrames
npx hyperframes add typing-indicator
Or text-shimmer on a muted label for the "Generating…" look.
In Remotion
const x = ((frame % 40) / 40) * 160 - 30;
<span style={{backgroundImage:`linear-gradient(90deg,#666 ${x-15}%,#eee ${x}%,#666 ${x+15}%)`,WebkitBackgroundClip:'text',color:'transparent'}}>Thinking…</span>
In CapCut
Text "Thinking…" in grey; Effects → "Shine" or Animation Loop "Flicker" gently.
Ready-made components
- Shimmering Text (animate-ui): npm install @animate-ui/react motion
- Text Shimmer (motion-primitives): npx motion-primitives@latest add text-shimmer
- Typing Indicator (hyperframes): npx hyperframes add typing-indicator
- UI Typing Indicator (remocn): npx shadcn@latest add @remocn/typing-indicator
Where this comes from
Use when
- Short waits in AI demos; it marks time without dead air.
Not for
- Do not hold it longer than ~1.5 s in a film; cut the real wait down.
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/25a0d11eb722/lib-animate-ui-shimmering-text.mp4 — Preview of the Shimmering Text component that builds this take (credit: Captured from the library’s own demo page (Animate UI), https://animate-ui.com/docs/primitives/animate-ui/shimmering-text)
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.
- 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.
- 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