Stacked Cards Fan Out — effect skill for grids & carousels
For AI agents: find the right skill in one call —
curl -s "https://skills.varg.ai/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://skills.varg.ai/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.
A pile of cards or photos shuffles, then fans or settles one forward into focus.
- Type: Effect · Grids & carousels
- Slug:
stacked-cards-fan - Status: live
- Publisher: Codrops (community)
- License: MIT (per demo repo)
- Source: https://github.com/codrops/ImageStackGrid
- 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 Image Stack Intro Animation by codrops, MIT (per demo repo). The write-up and recipes below are varg's.
Slightly rotated stacked cards with shadows; the top card lifts, others fan behind it, then one lands framed.
When: Show several examples or customers, then pick one to explore.
Watch out: Do not rotate cards more than ±8°; heavy rotation looks messy, not playful.
Timing: Shuffle 0.6–1 s, fan 0.5 s with 50 ms stagger, settle 0.4 s back.out(1.3).
Also called: card stack, image stack, shuffle
In HyperFrames
npx hyperframes add keyframe-scrub-stack
In Remotion
// npx shadcn@latest add @remocn/reel
cards.map((c,i)=>{const p=spring({frame:frame-i*2,fps,config:{damping:16}}); return <Img src={c} style={{transform:`rotate(${(i-2)*4*p}deg) translateY(${-i*6}px)`}}/>})
In CapCut
Stack image overlays with small rotations; keyframe Position/Rotation outward with offsets.
Ready-made components
- Image Stack Intro Animation (codrops): git clone https://github.com/codrops/ImageStackGrid
- Keyframe Scrub Stack (hyperframes): npx hyperframes add keyframe-scrub-stack
- Reel (remocn): npx shadcn@latest add @remocn/reel
Where this comes from
Use when
- Show several examples or customers, then pick one to explore.
Not for
- Do not rotate cards more than ±8°; heavy rotation looks messy, not playful.
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/8076b8d8b942/lib-codrops-image-stack-intro.mp4 — Preview of the Image Stack Intro Animation component that builds this take (credit: From the library’s repo (Codrops — Manoela Ilic), https://tympanus.net/Development/ImageStackGrid/)
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.
- App Screens on a Rail: Two to five app screens ride a horizontal rail: one centered and sharp, neighbors smaller and receded.
- Cards Orbit in a Ring: Image cards ride a circle, larger in front and smaller behind, sweeping fast-slow-fast.
- 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