---
title: "Bento UI Motion Grid by James Camarota — AI video effect for grids & carousels"
description: "A silent 24 s bento grid of 24 UI cards that each animate on their own clock, rendered from one HTML file at 120 fps."
url: https://varg.ai/how-to/skills/bento-ui-motion-skill
updated: 2026-11-11
---

# Bento UI Motion Grid by James Camarota — 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 `.md` to its path. Before generating anything, show the person the options on the how-to page. From a terminal: `curl -fsSL https://varg.ai/install | sh` installs the vargai CLI (https://varg.ai/how-to/cli.md): `vargai search` and `vargai install <slug>` with no key, every varg model after `vargai login`.

A silent 24 s bento grid of 24 UI cards that each animate on their own clock, rendered from one HTML file at 120 fps.

- **Type:** [Effect](https://varg.ai/how-to/effects.md) · [Grids & carousels](https://varg.ai/how-to/browse/skills/galleries.md)
- **Slug:** `bento-ui-motion-skill`
- **Status:** beta
- **Publisher:** James Camarota (community)
- **License:** unknown
- **Source:** https://bento-ui-motion-skill.vercel.app/
- **Works in:** Claude Code
- **Requires:** Python 3 with Playwright (Chromium), Pillow and NumPy, FFmpeg
- **Cost:** Free download; renders locally

## What it does

Makes the 'this model can actually design' post: a locked-off 1440×1080 bento grid of about 24 polished UI widgets (music player, clock, map route, chat, kanban, 2FA code, timer, rings, notifications, pricing toggle) on a light background, every card animating continuously on its own clock with from-rest springs, rolling tabular digits and crossfades after a staggered intro. Everything lives in one `index.html` with a pure `draw(t)`; Playwright renders the frames in parallel at 120 fps, ffmpeg encodes a 120 fps master and a 60 fps cut for X, and a frame-diff script finds snaps. The format follows a post by @dominikmartn; the widgets and code are James Camarota's, whose free-skill post had 8.7k views and 214 bookmarks. It is a ZIP download from bento-ui-motion-skill.vercel.app, with no repository or licence yet.

## Use when

- a silent bento grid of animated UI cards for a design flex post
- show off a design system, component library or app concept in 24 seconds
- an ultra-smooth 120 fps UI motion loop from one HTML file
- a portfolio reel for a UI or front-end designer

## Not for

- Camera pushes through one product flow
- Cursor-led tool tours or changelog films
- Fast hard-cut screenshot collages

## Install

Not published as a standalone skill yet. Source: https://bento-ui-motion-skill.vercel.app/

## More grids & carousels skills

- [Bento Feature Grid](https://varg.ai/how-to/skills/bento-feature-grid.md): Features land in a grid of differently sized rounded tiles — one hero tile, smaller supporting ones.
- [Camera Drifts Across a Bento](https://varg.ai/how-to/skills/camera-drifts-bento.md): An oversized grid of screenshots fills the frame and the camera drifts diagonally across it.
- [Tilted Screenshot Wall](https://varg.ai/how-to/skills/tilted-screenshot-wall.md): A wall of screenshots seen at an isometric angle, columns scrolling up and down at different speeds.
- [Stacked Cards Fan Out](https://varg.ai/how-to/skills/stacked-cards-fan.md): A pile of cards or photos shuffles, then fans or settles one forward into focus.
- [App Screens on a Rail](https://varg.ai/how-to/skills/app-screens-on-rail.md): Two to five app screens ride a horizontal rail: one centered and sharp, neighbors smaller and receded.
- [Cards Orbit in a Ring](https://varg.ai/how-to/skills/cards-orbit-ring.md): Image cards ride a circle, larger in front and smaller behind, sweeping fast-slow-fast.

## 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.

- Any agent with a terminal: `curl -fsSL https://varg.ai/install | sh` (Windows: `irm https://varg.ai/install.ps1 | iex`), then `vargai login` and every model is a command — `vargai generate_video …`, `vargai estimate_cost …` (https://varg.ai/how-to/cli/)
- 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