Star Rating Sweep — 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.
Five stars fill left to right to the real score while the number counts up beside them.
- Type: Effect · Quotes & reviews
- Slug:
star-rating-sweep - Status: live
- Publisher: HeyGen (community)
- License: Apache-2.0
- Source: https://github.com/heygen-com/hyperframes/tree/main/registry/components/star-rating-fill
- 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 Star Rating Fill by HeyGen (HyperFrames), Apache-2.0. The write-up and recipes below are varg's.
A row of outline stars; the fill layer sweeps to 4.8 and keeps the partial last star; "4.8 · 2,300 reviews" beside it.
When: App and marketplace products; end of a testimonial run; pricing scenes.
Watch out: Do not round up to a perfect 5.0; buyers distrust it and purchase likelihood peaks around 4.2–4.5.
Timing: Sweep 0.8–1.0 s, power2.out; number counts in the same window; hold 1.5 s.
Also called: rating stars, review score, app store rating
In HyperFrames
npx hyperframes add star-rating-fill
Set data-variable-values='{"rating":4.8,"count":"2,300 reviews"}'; the fractional star is preserved.
In Remotion
const r = interpolate(frame,[0,24],[0,4.8],{extrapolateRight:'clamp',easing:Easing.out(Easing.cubic)});
<div style={{width:`${r/5*100}%`, overflow:'hidden'}}>★★★★★</div>
In CapCut
Stickers → search "5 stars"; reveal with Mask → Linear keyframed left to right; add a Text counter manually per frame or use a counter text template.
Ready-made components
- Star Rating Fill (hyperframes): npx hyperframes add star-rating-fill
- Social Proof Card (hyperframes): npx hyperframes add social-proof-card
- Counter (animata): npx shadcn@latest add https://animata.design/r/text/counter.json
Where this comes from
- PowerReviews / Spiegel Research Center: from reviews to revenue
- Retail TouchPoints: purchase likelihood peaks at 4.2–4.5 stars
Use when
- App and marketplace products; end of a testimonial run; pricing scenes.
Not for
- Do not round up to a perfect 5.0; buyers distrust it and purchase likelihood peaks around 4.2–4.5.
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/56bf7c1b5c82/take-star-rating-sweep.mp4 — The Star Rating Fill component rendered as installed (npx hyperframes add star-rating-fill), defaults only (credit: Rendered by varg · HyperFrames Star Rating Fill, https://hyperframes.heygen.com/catalog/components/star-rating-fill)
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.
- 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