Code skill · free
Device Mockup Promo
Screenshots in, a promo video with your app in a phone or laptop out. Free, renders locally.
Download the skill
Install it in Claude Code, Codex, Cursor and run it on your own computer.
Download .zipInstall
- Download the .zip above and unzip it.
- Put the
device-mockup-promofolder in your agent's skills folder, for example~/.claude/skills/device-mockup-promofor Claude Code. - Ask your agent for the video. The skill's SKILL.md tells it what to collect and which script to run.
Inputs
Screenshots (image)
1 to 5 screenshots of your app or site. Tall full-page captures scroll inside the screen.
Headline and captions (text)
A headline up to 60 characters, and an optional short caption for each screen.
Device (choice, optional)
A phone with a 19.5:9 screen or a laptop with a 16:10 screen, drawn in code.
Call to action and URL (text, optional)
The button text and address shown at the end.
Seconds per screen (number, optional)
2.5 to 8 seconds; 3.5 by default.
Format (choice, optional)
Landscape 1920x1080, portrait 1080x1920 or square 1080x1080.
Made with
- Engine
- HyperFrames
- Output
- video
- Cost per run
- Free: renders on your computer
Most app and website promos follow one pattern: the product’s real screens inside a device, one feature at a time, then a button. Building it in a video editor means a mockup template, masks and keyframes for every screen.
This skill gives your coding agent that pattern as a recipe. Give it your screenshots and a few lines of text, and HyperFrames renders the promo to an MP4 on your machine.
What the clip looks like
- The headline comes in word by word while the phone or laptop rises into view and turns slowly.
- Each screenshot slides in over the last one and scrolls down if it is a tall capture, with a numbered caption beside the device.
- It ends on your call to action and URL.
The sample above shows three real screenshots of this site on a phone.
How it works
- Download the skill and put it in your agent’s skills folder (the steps are above).
- Ask, for example: “Make a 15-second phone promo from these three screenshots, headline Budgeting in one tap, ending on Download free and our App Store link.”
- The agent checks a few still frames, then renders the MP4.
Swap a screenshot when your app changes and render again; the motion stays the same.
Questions
- Is the device mockup promo free?
- Yes. The skill is free to download and renders on your own computer with HyperFrames, so there is no API key and no cost per video.
- Do I need a mockup template or design tool?
- No. The phone and laptop are drawn in code, so any screenshot fits. They are generic shapes, not a copy of any maker's device.
- What screenshots work best?
- Real screenshots at the device's width. A tall full-page capture scrolls inside the screen, up to one and a half screens, so crop it to the part you want to show.
- Can I make a vertical video for Reels or the App Store?
- Yes. Pick the portrait format and the headline sits above the device.
- How long does a render take?
- Our fourteen-second 1080p sample rendered in about 53 seconds on a 4-core computer.