# Device mockups: agent skills for phone, laptop and browser mockup animations

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

Phones, laptops, browser windows and tablets: how the device enters, holds the screen and turns in 3D. 11 skills for Claude Code, Codex and Grok, by type: workflows take a brief to a finished video, effects and styles change how it looks, prompts and guides teach the agent the craft, models run the generation.

## Skills (11)

### Effects (10)

- [Browser Window Frame](https://varg.ai/how-to/skills/browser-window-frame.md) — Magic UI: The web app plays inside a clean browser window with traffic lights and a URL bar on a soft backdrop.
- [Phone Frame with Live Screen](https://varg.ai/how-to/skills/phone-frame-live-screen.md) — Magic UI: A screen recording plays edge to edge inside a realistic phone frame with Dynamic Island.
- [Laptop Lid Opens to Screen](https://varg.ai/how-to/skills/laptop-lid-opens.md) — Aceternity UI: A laptop lid tilts open and the screen content lifts toward the viewer, then becomes the full frame.
- [3D Phone Turn](https://varg.ai/how-to/skills/3d-phone-turn.md) — HeyGen: A real 3D phone model turns in space with the app playing on its screen, then faces the camera.
- [Phone, Tablet and Laptop Splay](https://varg.ai/how-to/skills/multi-device-splay.md) — HeyGen: Phone, tablet and laptop fan out from one stack into a proud row, each showing the same product.
- [Push Through the Screen](https://varg.ai/how-to/skills/push-through-the-screen.md) — HeyGen: A phone rises into view, then the camera pushes through its screen into the full-frame UI.
- [Foldable Two-Screen Reveal](https://varg.ai/how-to/skills/foldable-two-screen.md) — varg: A foldable phone opens to show two screens side by side — before and after, or app and result.
- [Phone in Hand Insert](https://varg.ai/how-to/skills/phone-in-hand-insert.md) — HeyGen · HeyGen: A portrait phone held in frame shows a lock screen or app moment, as if filmed by a person.
- [Floating Device with Soft Bob](https://varg.ai/how-to/skills/floating-device-bob.md) — Daniel Petho: The device hangs in space and bobs and tilts very slightly so a still shot never feels frozen.
- [macOS Desktop Stage](https://varg.ai/how-to/skills/macos-desktop-stage.md) — HeyGen: A full Mac desktop with menu bar, dock and app windows sets the stage for a desktop app demo.

### Guides (1)

- [Video editing skills for Claude Code and AI agents](https://varg.ai/how-to/skills/varg-video-edit-library.md) — varg: 206 named edits with recipes for FFmpeg, HyperFrames, Remotion and CapCut: cuts, transitions, titles, UI, numbers.