Tilted Screenshot Wall — 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.
A wall of screenshots seen at an isometric angle, columns scrolling up and down at different speeds.
- Type: Effect · Grids & carousels
- Slug:
tilted-screenshot-wall - Status: live
- Publisher: Aceternity UI (community)
- License: Aceternity License (free components)
- Source: https://ui.aceternity.com/components/3d-marquee
- 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 3D Marquee by aceternity, Aceternity License (free components). The write-up and recipes below are varg's.
Dozens of product screenshots in rotated columns; alternating scroll directions; a dark gradient fades the wall at the top and bottom.
When: Show breadth — many templates, pages or outputs — behind a title or CTA.
Watch out: Do not put readable claims on the tiles; the wall is texture, the headline is the message.
Timing: Columns move 20–60 px/s, alternating directions; tilt ~55° X, −45° Z.
Also called: 3D marquee, isometric wall, screenshot wall
In HyperFrames
npx hyperframes add perspective-marquee
Apply transform: rotateX(55deg) rotateZ(-45deg) on the wall wrapper and tween each column's y with ease:"none".
In Remotion
// npx shadcn@latest add @aceternity/3d-marquee (replace its motion with frame-driven translateY per column)
const y = (i%2? 1:-1) * frame * 1.2;
In CapCut
Collage screenshots into columns, apply Basic → 3D rotate, keyframe Position Y; or use a 3D marquee template.
Ready-made components
- 3D Marquee (aceternity): npx shadcn@latest add @aceternity/3d-marquee
- Perspective Marquee (hyperframes): npx hyperframes add perspective-marquee
Where this comes from
Use when
- Show breadth — many templates, pages or outputs — behind a title or CTA.
Not for
- Do not put readable claims on the tiles; the wall is texture, the headline is the message.
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/cc6052dd4318/lib-aceternity-3d-marquee.mp4 — Preview of the 3D Marquee component that builds this take (credit: Rendered by varg from the library’s own code (Aceternity UI), https://ui.aceternity.com/components/3d-marquee)
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.
- 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.
- 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