Cards Orbit in a Ring — effect skill for grids & carousels
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.
Image cards ride a circle, larger in front and smaller behind, sweeping fast-slow-fast.
- Type: Effect · Grids & carousels
- Slug:
cards-orbit-ring - Status: live
- Publisher: Daniel Petho (community)
- License: MIT
- Source: https://github.com/danielpetho/fancy/blob/main/src/fancy/components/blocks/circling-elements.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 Circling Elements by fancy, MIT. The write-up and recipes below are varg's.
Cards upright on an elliptical path with depth scaling and fade; the front card pauses briefly at center.
When: Showcase outputs, templates or styles in a playful but tidy way.
Watch out: Do not use more than ~10 cards; the back of the ring becomes noise.
Timing: One sweep 2–4 s with a slow-in at the front; depth scale 0.6–1.0.
Also called: circle carousel, ring gallery, orbit carousel
In HyperFrames
npx hyperframes add carousel-circle-1
In Remotion
const a = interpolate(frame,[0,90],[0,Math.PI*2]);
cards.map((c,i)=>{const t=a+i*2*Math.PI/cards.length; const z=(Math.cos(t)+1)/2; return <Img src={c} style={{transform:`translateX(${Math.sin(t)*500}px) scale(${0.6+z*0.4})`, zIndex:Math.round(z*100), opacity:0.4+z*0.6}}/>})
In CapCut
Hard natively; render in Remotion/HyperFrames, or use a "3D carousel" template from Templates.
Ready-made components
- Circling Elements (fancy): npx shadcn add @fancy/circling-elements
- Circle Carousel 1 (hyperframes): npx hyperframes add carousel-circle-1
- Box Carousel (fancy): npx shadcn add @fancy/box-carousel
Where this comes from
Use when
- Showcase outputs, templates or styles in a playful but tidy way.
Not for
- Do not use more than ~10 cards; the back of the ring becomes noise.
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/5101dbbde2da/lib-fancy-circling-elements.mp4 — Preview of the Circling Elements component that builds this take (credit: Captured from the library’s own demo page (Fancy Components), https://www.fancycomponents.dev/docs/components/blocks/circling-elements)
More grids & carousels skills
- Bento Feature Grid: Features land in a grid of differently sized rounded tiles — one hero tile, smaller supporting ones.
- Camera Drifts Across a Bento: An oversized grid of screenshots fills the frame and the camera drifts diagonally across it.
- Tilted Screenshot Wall: A wall of screenshots seen at an isometric angle, columns scrolling up and down at different speeds.
- Stacked Cards Fan Out: A pile of cards or photos shuffles, then fans or settles one forward into focus.
- App Screens on a Rail: Two to five app screens ride a horizontal rail: one centered and sharp, neighbors smaller and receded.
- Rapid Screenshot Burst: Full-screen images slam in one on top of another on the beat, landing on the final hero shot.
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