Wall of Love Marquee — 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.
Two or three rows of review cards drift in opposite directions, fading at the edges.
- Type: Effect · Quotes & reviews
- Slug:
wall-of-love-marquee - Status: live
- Publisher: Magic UI (community)
- License: MIT
- Source: https://github.com/magicuidesign/magicui/blob/main/apps/www/registry/magicui/marquee.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 Marquee by magic-ui, MIT. The write-up and recipes below are varg's.
Small cards with avatar, name and one line each, in rows moving at slightly different speeds under a short headline.
When: Show breadth of love fast: many voices, none read in full. Good behind a stat like "10,000 teams".
Watch out: Do not expect anyone to read the cards; put the one quote you need read in its own scene.
Timing: Each row loops in 20–40 s; rows at 1×, 0.8×, 1.2× speed. Edge fade 10–15% of width.
Also called: testimonial marquee, review wall, love wall
In HyperFrames
npx hyperframes add perspective-marquee
Drive x from the timeline (tl.to(row,{xPercent:-50,duration:30,ease:"none"},0)) so it stays seek-safe; duplicate the row content for a seamless loop.
In Remotion
// npx shadcn@latest add @magicui/marquee (replace CSS animation with frame-driven x)
const x = -((frame * speed) % rowWidth);
<div style={{transform:`translateX(${x}px)`, maskImage:'linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)'}}>
In CapCut
Export a long strip image of cards, add as Overlay, keyframe Position X from right to left over the clip; duplicate and reverse for the second row.
Ready-made components
- Marquee (magic-ui): npx shadcn@latest add @magicui/marquee
- Perspective Marquee (hyperframes): npx hyperframes add perspective-marquee
- Perspective Marquee (remocn): npx shadcn@latest add @remocn/perspective-marquee
Where this comes from
Use when
- Show breadth of love fast: many voices, none read in full. Good behind a stat like "10,000 teams".
Not for
- Do not expect anyone to read the cards; put the one quote you need read in its own scene.
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/de8904a0ede1/lib-magic-ui-marquee.mp4 — Preview of the Marquee component that builds this take (credit: Captured from the library’s own demo page (Magic UI), https://magicui.design/docs/components/marquee)
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.
- Community Post as Proof: A real community post or comment card pops over the footage with its upvotes counting up.
- Reviews Arrive as Notifications: Short reviews land as system notifications that stack and push each other down.
- 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