---
title: "webreel — AI video effect for UI walkthroughs"
description: "Scripted browser demo videos from a JSON config: clicks, typing, drags and scrolls with cursor and keystroke overlays. Install in Claude Code, Codex and Grok with one command."
url: https://varg.ai/how-to/skills/webreel
updated: 2026-11-11
---

# webreel — effect skill for UI walkthroughs

> **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`.

Scripted browser demo videos from a JSON config: clicks, typing, drags and scrolls with cursor and keystroke overlays.

- **Type:** [Effect](https://varg.ai/how-to/effects.md) · [UI walkthroughs](https://varg.ai/how-to/browse/skills/ui.md)
- **Slug:** `webreel`
- **Status:** live
- **Publisher:** Vercel Labs (vendor, verified)
- **License:** Apache-2.0
- **Source:** https://github.com/vercel-labs/webreel
- **Works in:** Claude Code, Codex, Cursor, Gemini CLI
- **Requires:** Node.js, webreel npm package (npm install webreel), Chrome headless shell and ffmpeg (downloaded to ~/.webreel on first run)
- **Cost:** Free, Apache-2.0: records locally
- **Adoption:** 283 installs, 966 GitHub stars (skills.sh, 2026-11-10)

## What it does

webreel records scripted browser demos as MP4, GIF or WebM. You describe steps in a JSON config (navigate, click, type, key combos, drag, scroll, pause, screenshot), and it drives headless Chrome, captures frames at about 60 fps and encodes with ffmpeg, adding an animated cursor, a keystroke overlay and click and key sound effects. One config can hold several videos and shared setup steps, and `npx webreel preview` shows a run before recording. The skill teaches the agent to write and debug those configs, so a demo can be re-recorded whenever the UI changes. It is a Vercel Labs experiment.

## Use when

- record a scripted product or feature demo of a web app
- a browser walkthrough with cursor motion, keystroke HUD and click sounds
- re-record a demo after the UI changes, from the same JSON config
- MP4, GIF or WebM demo clips at desktop or mobile viewport sizes

## Not for

- Recording a real screen or desktop app: it drives headless Chrome only
- Editing existing footage

## Install

- Claude Code: `npx skills add vercel-labs/webreel --skill webreel -a claude-code`
- Codex: `npx skills add vercel-labs/webreel --skill webreel -a codex`
- Cursor: `npx skills add vercel-labs/webreel --skill webreel -a cursor`
- Gemini CLI: `npx skills add vercel-labs/webreel --skill webreel -a gemini-cli`
- Any agent, with the vargai CLI: `vargai install webreel`

## Example output

https://s3.varg.ai/files/4325c578-378d-4c43-ae53-3cc3218df1ea/file_2a0980076a13.mp4 — The drag-and-drop example from the webreel docs: a card dragged across a kanban board with the animated cursor, recorded by webreel (credit: Vercel Labs (webreel examples), https://webreel.dev/examples)

## More UI walkthroughs skills

- [Zoom to the Action](https://varg.ai/how-to/skills/zoom-to-the-action.md): The full app establishes, then the camera pushes 1.5–2× into the part being used and eases back out.
- [3D Tilted Dashboard Reveal](https://varg.ai/how-to/skills/tilted-dashboard-reveal.md): The dashboard rises from a steep 3D tilt to flat, like a screen lifting toward the viewer.
- [Floating UI Panels in Depth](https://varg.ai/how-to/skills/floating-ui-panels.md): The interface splits into its panels, which float apart in depth with parallax, then snap back.
- [UI Builds Itself Piece by Piece](https://varg.ai/how-to/skills/ui-builds-itself.md): Grey skeleton blocks pulse once, then real cards, charts and text fill in with a stagger.
- [Before/After UI Wipe](https://varg.ai/how-to/skills/before-after-ui-wipe.md): A divider sweeps across one screen, turning the old version into the new one underneath.
- [Card Expands Into Detail](https://varg.ai/how-to/skills/card-expands-to-detail.md): A small card grows into a full detail panel in one continuous shape change.

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