Reviews Arrive as Notifications — effect skill for quotes & reviews
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.
Short reviews land as system notifications that stack and push each other down.
- Type: Effect · Quotes & reviews
- Slug:
reviews-as-notifications - Status: live
- Publisher: Magic UI (community)
- License: MIT
- Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/animated-list.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 Animated List by magic-ui, MIT. The write-up and recipes below are varg's.
iOS/macOS-style banners with app icon, name and one line each; new ones spring in at the top, older ones slide down and dim.
When: Show momentum: sign-ups, five-star reviews, payments or "new message" pings piling up.
Watch out: Do not let the stack grow past 4–5 cards; older ones should leave the frame.
Timing: One every 0.4–0.8 s, accelerating slightly; each card spring (damping ~14).
Also called: notification stack, toast proof, incoming reviews
In HyperFrames
npx hyperframes add notification-cascade
Or notification-stack for 1–5 token-driven cards on cue times.
In Remotion
// npx shadcn@latest add @magicui/animated-list (frame-driven)
const visible = items.filter((_,i)=> frame > i*15).slice(-4);
In CapCut
Text → Text templates → search "notification"; stagger 3–4 copies 0.5 s apart with Animation In "Slide down".
Ready-made components
- Animated List (magic-ui): npx shadcn@latest add @magicui/animated-list
- Notification Cascade (hyperframes): npx hyperframes add notification-cascade
- Notification Stack (hyperframes): npx hyperframes add notification-stack
Where this comes from
- Bohdan Motion: X launch video, 40% of runtime on real UI
- CapCut: turn testimonials into quote graphics for short-form
Use when
- Show momentum: sign-ups, five-star reviews, payments or "new message" pings piling up.
Not for
- Do not let the stack grow past 4–5 cards; older ones should leave the frame.
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/52e51fc6e447/lib-magic-ui-animated-list.mp4 — Preview of the Animated List component that builds this take (credit: Captured from the library’s own demo page (Magic UI), https://magicui.design/docs/components/animated-list)
More quotes & reviews skills
- Tweet as Proof Card: A real post from a user animates in as a card: avatar, name, text, then counts tick up.
- Quote at Reading Pace: One strong customer sentence reveals word by word, then the name, role and avatar settle under it.
- Star Rating Sweep: Five stars fill left to right to the real score while the number counts up beside them.
- Wall of Love Marquee: Two or three rows of review cards drift in opposite directions, fading at the edges.
- Community Post as Proof: A real community post or comment card pops over the footage with its upvotes counting up.
- Pull Quote Beside the Speaker: While a customer talks on camera, their key sentence appears as large type in the empty side of the frame.
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