Quote at Reading Pace — 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.
One strong customer sentence reveals word by word, then the name, role and avatar settle under it.
- Type: Effect · Quotes & reviews
- Slug:
quote-at-reading-pace - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/testimonial-card
- 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 Testimonial Card by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
Large serif or grotesque quote on a quiet card; quote marks in the accent color; author line smaller and lighter.
When: Between demo beats, to let a customer say the claim instead of the brand.
Watch out: Do not use a whole paragraph; pick the single strongest 1–2 sentence pull quote.
Timing: Words at 3–4 words/s, author in 0.3 s after, hold = word count ÷ 3 + 1 s.
Also called: testimonial card, customer quote, pull quote card
In HyperFrames
npx hyperframes add testimonial-card
Pass the quote, author and handle through data-variable-values; size data-duration from the word count (words/3 + 2 s).
In Remotion
const words = quote.split(' ');
words.map((w,i)=>{const o=interpolate(frame,[i*8,i*8+8],[0,1],{extrapolateLeft:'clamp',extrapolateRight:'clamp'}); return <span style={{opacity:o, filter:`blur(${(1-o)*6}px)`}}>{w} </span>})
In CapCut
Text → Text templates → "quote"; Animation In: "Typewriter" or "Fade in by word"; author line as a second text layer 0.3 s later.
Ready-made components
- Testimonial Card (hyperframes): npx hyperframes add testimonial-card
- Testimonial Proof Card (hyperframes): npx hyperframes add testimonial-proof-card
- Text Generate Effect (aceternity): npx shadcn@latest add @aceternity/text-generate-effect
Where this comes from
- Morphic: how to make a customer testimonial video
- CapCut: turn testimonials into quote graphics for short-form
- Text animation for readability: kinetic type without overcomplication
Use when
- Between demo beats, to let a customer say the claim instead of the brand.
Not for
- Do not use a whole paragraph; pick the single strongest 1–2 sentence pull quote.
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/d939b220f16f/take-quote-at-reading-pace.mp4 — The Testimonial Card component rendered as installed (npx hyperframes add testimonial-card), defaults only (credit: Rendered by varg · HyperFrames Testimonial Card, https://hyperframes.heygen.com/catalog/components/testimonial-card)
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.
- 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.
- 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