Product demo and app promo videos your agent renders from your screens
A demo video has to show your product working, read clearly on a phone and stay short. With these skills your agent builds each scene from your screenshots, your site or a short brief, times every click to a soundtrack and renders the MP4 on your machine, so nothing is screen-recorded and every caption and typed word comes from your brief.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
Product demo video examples, by kind of product
From the Lookbk catalog only: skills whose film walks through a product rather than announcing it. Web app demos come first, then a mobile app promo and a developer-tool film; each pick says what it takes from you. All of them render with HyperFrames on your own machine and need Node.js 22 or newer and FFmpeg, and each card plays a film the skill rendered from its own example. All of them are Pro skills. The install steps below use Kinetic Title Drop, a free video skill on the same renderer.
- Zoom Cam WalkthroughClaude CodeCodexCursor+3 more agents
01 · Launch & Demo Films · Pro
Zoom Cam Walkthrough
MP4 · 40–60 s · 1080p or 4K · with music
Web app demo: the polished screen-recording look without recording anything. Your app sits in a window, and a virtual camera glides and zooms to every action while a cursor clicks, text types and menus open, with numbered chapters and captions. It takes your screenshots, or a mock of your screen your agent draws from your site, and a list of steps.
Worth knowing: 16:9 only, and it draws a desktop window; for a phone app use App Preview Film.
Needs: Node.js 22+ and FFmpeg
See what Zoom Cam Walkthrough makes - Dashboard Flow FilmClaude CodeCodexCursor+3 more agents
02 · Launch & Demo Films · Pro
Dashboard Flow Film
MP4 · 29 s · 1080p or 4K · with music
Web app demo for a product built around a dashboard: the window builds tile by tile, numbers roll up, the camera pushes into a streaming chart and dives into an alert. It takes a brief of words and numbers and draws every chart from them, in 29 seconds with its own techno soundtrack.
Worth knowing: It redraws your dashboard from numbers; it does not show a screenshot of it.
Needs: Node.js 22+ and FFmpeg
See what Dashboard Flow Film makes - Sign-up Flow FilmClaude CodeCodexCursor+3 more agents
03 · Launch & Demo Films · Pro
Sign-up Flow Film
MP4 · 24–26 s · 1920×1080 or 1080×1920 · with music
Web app demo of onboarding: a sign-up card fills itself in field by field, with a strength meter, a one-time code and a plan picked, then opens into your product’s first screen. It takes your fields and a screenshot of that first screen, and one brief renders a wide and a tall film.
Worth knowing: Up to four pages of up to three fields each.
Needs: Node.js 22+ and FFmpeg
See what Sign-up Flow Film makes - Cursor WalkthroughClaude CodeCodexCursor+3 more agents
04 · Product Updates · Pro
Cursor Walkthrough
MP4 · 9 to 15 s · 1920×1080
Web app demo for social: a 9 to 15 second walkthrough cut hard on the downbeat, framed close enough that the interface text reads. Your agent draws the app, a sidebar, a top bar and a board of cards, in your colors from a brief of three or four steps; nothing is recorded.
Worth knowing: It draws a board-style interface, not your real app, and it is 16:9 only.
Needs: Node.js 22+, FFmpeg on the PATH, and Chrome (HyperFrames downloads its own headless Chrome on first render). Network access to Google Fonts and jsDelivr.
See what Cursor Walkthrough makes - Glass UI Tour FilmClaude CodeCodexCursor+3 more agents
05 · Launch & Demo Films · Pro
Glass UI Tour Film
MP4 · 27.5 or 32.5 s · 1080p or 4K · with music
Web app demo in liquid glass: frosted panels float over a moving background film, and widgets dock and morph into full panels of your UI while numbers roll and toggles flip. Each beat is a screenshot or a small HTML panel built from your real numbers and labels.
Worth knowing: Three or four features, each on screen for one 4-second panel.
Needs: Node.js 22+ and FFmpeg
See what Glass UI Tour Film makes - App Preview FilmClaude CodeCodexCursor+3 more agents
06 · Launch & Demo Films · Pro
App Preview Film
MP4 · 25 s · 1080×1920 · with music
Mobile app promo: a 25-second vertical film of a phone turning in a studio while your screens play four or five scenes, each with a tap, swipe or scroll and a caption on the beat, ending on your icon and a download button. It takes real screenshots from the phone, or captures of a mobile web app, and your app icon.
Worth knowing: Vertical 1080 × 1920 only, and it animates still screenshots, not screen recordings.
Needs: Node.js 22+ and FFmpeg
See what App Preview Film makes - Terminal Launch FilmClaude CodeCodexCursor+3 more agents
07 · Launch & Demo Films · Pro
Terminal Launch Film
MP4 · 36 s · 1080p or 4K · with music
Developer tool demo: your real command types out in a terminal and prints its output, the URL opens into a browser with your product, a diff and an API request follow, and it ends on your install command. It takes the command, its output and a screenshot of the page it produces.
Worth knowing: One command per film, and 16:9 only.
Needs: Node.js 22+ and FFmpeg
See what Terminal Launch Film makes
Demo vs launch film vs explainer
They answer different questions, and most launches want more than one. A demo shows how the product is used. A launch film tells people it exists and why to look now. An explainer shows how something works, often without the interface at all.
01
A demo
The clicks, the screens and the result, in order. It belongs on the landing page and in onboarding, and it can run a little longer because the viewer already cares.
02
A launch film
A hook, a few features and where to go, cut for attention in the first seconds of a feed. See the best skills for launch videos.
03
An explainer
The idea before the product: how the system works, step by step, in drawn or built scenes rather than your interface. See the explainer video skills.
Install
Install a pick with your agent
Every pick is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Kinetic Title Drop, which is free; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Kinetic Title Drop" skill from Lookbk (https://lookbk.dev/skills/kinetic-title-drop). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop 2. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add kinetic-title-drop2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/kinetic-title-drop
- Codex
- ~/.agents/skills/kinetic-title-drop
- Cursor
- ~/.agents/skills/kinetic-title-drop
3. Ask for the result
Describe it in plain words, for example:
Make a 6-second kinetic title drop that says "Ship / it / today." in our brand orange, 1080p, for an X post.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesDo I need to screen-record my app?
No. These skills animate screenshots or redraw your interface from a brief, and the camera moves, clicks and typing are scripted, so there are no fumbled keystrokes, stray notifications or shaky cursor. Several include a script that reads your site and takes the screenshots with Chrome.
How long should a product demo video be?
As long as the steps take and no longer. These run from 9 to 15 seconds for a social cut (Cursor Walkthrough), through 24 to 36 seconds for one flow from start to finish, to 40 to 60 seconds for a walkthrough of two to five tasks (Zoom Cam Walkthrough).
Is music included?
Yes. Each one writes an original soundtrack on your machine, timed to the same beat as the picture, so clicks and key taps land on the music and there is no track to license. Most also take a licensed track of your own instead.
Can I make a vertical version?
App Preview Film is vertical only, and Sign-up Flow Film renders a wide and a tall film from one brief. The others render 16:9.