Camera Drifts Across a Bento — 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.
An oversized grid of screenshots fills the frame and the camera drifts diagonally across it.
- Type: Effect · Grids & carousels
- Slug:
camera-drifts-bento - Status: live
- Publisher: Kapish Dima · remocn (community)
- License: MIT
- Source: https://remocn.dev/r/infinite-bento-pan.json
- 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 Infinite Bento Pan by Kapish Dima (remocn), MIT. The write-up and recipes below are varg's.
Grid larger than the frame, slight tilt, vignette on edges; tiles may lift as the camera passes.
When: Montage of many outputs (templates, generated images, user projects) behind a headline.
Watch out: Do not drift too fast; at more than ~5% of frame width per second, nothing registers.
Timing: Constant drift 3–6 s, linear or sine.inOut; vignette 30–40% at the edges.
Also called: bento pan, infinite grid pan, 3D grid fly
In HyperFrames
npx hyperframes add pan-stations
Or animate a large grid wrapper x/y with ease:"none" for the whole clip.
In Remotion
// npx shadcn@latest add @remocn/infinite-bento-pan
const x = interpolate(frame,[0,durationInFrames],[0,-400]);
const y = interpolate(frame,[0,durationInFrames],[0,-240]);
In CapCut
Make a big grid image; keyframe Position diagonally over the clip; add a vignette effect.
Ready-made components
- Infinite Bento Pan (remocn): npx shadcn@latest add @remocn/infinite-bento-pan
- On-Scroll 3D Grid Animations (codrops): git clone https://github.com/codrops/Scroll3DGrid
- Pan Stations (hyperframes): npx hyperframes add pan-stations
Where this comes from
Use when
- Montage of many outputs (templates, generated images, user projects) behind a headline.
Not for
- Do not drift too fast; at more than ~5% of frame width per second, nothing registers.
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/cf9bd20c1ab9/lib-codrops-scroll-3d-grid.mp4 — Preview of the On-Scroll 3D Grid Animations component that builds this take (credit: From the library’s repo (Codrops — Manoela Ilic), https://tympanus.net/Development/Scroll3DGrid/)
More grids & carousels skills
- Bento Feature Grid: Features land in a grid of differently sized rounded tiles — one hero tile, smaller supporting ones.
- 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.
- 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