product-film – an open-source agent skill
A Claude Code video skill that makes product films from your real UI
product-film is an open-source agent skill. Your agent rebuilds your product's screens from your own code and animates them on an HTML timeline. Playwright renders every frame, and ffmpeg cuts the film.
The demo shows an agent publishing a doc to display.dev – from a chat or a terminal – then a teammate opening its URL, selecting Edit, changing a number on the page and saving v2, a colleague commenting on v2, the agent publishing v3 at the same URL and resolving the comment, and the doc being shared with someone outside the company.
Cursor, Codex, Claude Code – any agent that writes a file. Switch agents anytime – your URLs, versions and comments stay put.
Used by top teams at
What is the product-film skill?
product-film is an agent skill that makes short product films from your product's real interface. It works in Claude Code, Cursor, Codex, OpenCode, Hermes and Pi. The agent copies your components into one HTML page and animates them on a timeline. Playwright screenshots every frame. ffmpeg encodes the frames and cuts the film.
It does not record your screen, and it does not use a video model. The skill is free under the MIT license. Display made it for its own product films, then published the source. Version 0.2.0 was current on GitHub on 16 October 2026.
How it works
/product-film and the subject.Why HTML to video works for product UI
- Text stays sharp
- The film shows real text at 2x or 3x scale. Nothing goes soft when the camera moves in.
- Notes become numbers
- A note like "hold the comment longer" changes one number on the timeline. The rest of the film stays the same.
- Recuts are small
- The agent renders again only the beat or frame range that changed. Earlier cuts stay on disk.
- Checks run before people watch
- An audit script finds stuck pointers, one-frame flicker and frames that depend on the frame before them.
Four routes
| Route | What it makes | Good for |
|---|---|---|
| A: with footage | Licensed live-action footage cut against product beats, with a moving camera | Website hero loops |
| B: product only | Product beats on a 3D plate, or a reel cut to the beat of a music track | Landing sections, launch teasers and launch reels |
| C: walkthrough | A pointer drives the product through one story, with captions at close range | Store-listing promos and feature launches |
| D: paper collage | A cut-paper cast tells a story over real product screenshots | Social cuts and explainers |
Each route has a working template with a fictional example product called Tidewell. The first render works before you change a file. You then replace the brand values, the components and the copy with your own.
Install the skill
Run this command in your agent's terminal:
npx skills add display-dev/product-film --skill product-filmThe machine where your agent runs needs:
- Node 18 or later
- ffmpeg
- Python 3, for the paper-collage route only
A chat app with no local shell can read the skill and plan a film. It cannot render one.
Who it suits
Teams with a front end in code. The skill draws your components or captures your running app. If you have no UI code, it has nothing to draw.
Teams that recut often. A product change means a new render, not a new screen recording.
Teams that review in comments. Each cut gets a review page on Display. Your team comments on the page, and the agent answers.
It does not suit a one-off video that nobody will recut. Setup takes longer and needs more steps than a screen recorder.
What it does not do
- It does not record your screen. Every frame comes from code.
- It does not generate video, images or audio with a model. The default cost is only your agent's usage.
- It makes silent films unless you supply a music track. It does not write music or record voice.
- It cannot judge sound. The skill measures loudness. You must listen to the rest.
- It does not host the video. It writes the web file and the poster. You put them on your site.
- It leaves taste to you. The agent shows candidates and frames. You choose the look and license any footage.
product-film compared with HyperFrames and Remotion
| Tool | Approach | License and cost | Best for |
|---|---|---|---|
| product-film | HTML timeline, Playwright frames, ffmpeg. Built for product UI, with a review page on Display | MIT. Free | Films of your own product that you recut often |
| HyperFrames | Plain HTML compositions. Headless Chrome seeks each frame, then FFmpeg encodes. Installs with npx skills add heygen-com/hyperframes | Apache 2.0. Needs Node 22 or later and FFmpeg | General HTML-to-video work for agents |
| Remotion agent skills | Video written as React components. Installs with npx skills add remotion-dev/skills | Free for individuals and companies of up to 3 employees. Larger companies need a license, for example $25 a month per seat on the Creators plan | Teams that write React and want a large ecosystem |
| Screen recorder | Records your real screen | Many options and prices | A quick demo that you will not recut |
Pick HyperFrames if you want a general HTML-to-video engine for any subject. Pick Remotion if your team works in React. Pick product-film if the film is about your own product UI and your team reviews each cut. We made product-film, so weigh our view. *Checked 16 October 2026 on the HyperFrames GitHub page, the Remotion license page and the Remotion skills page. Versions, prices and license limits can change.*
The example film
The public docs show five frames from the example film of the kinetic walkthrough template. The film is about Tidewell, the fictional shared-docs product in the templates. Playwright screenshotted each frame from one HTML page. Nothing in it is a screen recording. See the frames in the docs.
Two guides use the skill:
Review each cut on Display
The agent publishes one review page for each film. Each new cut is a new version at the same link. Your team opens the link with the Google or Microsoft account they already use and comments on the cut. The agent reads the comments and answers each thread.
Without a Display account, the first publish is a preview that stays for 30 days. You can claim it. Outside guests can view a review page that you share with them. They cannot comment on it yet.
Display is the docs workspace for agents and people. Any agent publishes docs and files to a link. Your team opens the link with the account they already use. They comment and edit in-line. Any agent or teammate can publish the next version to the same link.
Get started
- Install product-film with one
npx skills addcommand - Ask your agent for a short film of one feature
- Review each cut on a Display page with your team
Common questions.
Is there a Claude Code skill for making videos?
Yes. product-film is an open-source Claude Code video skill for product films. Other skills exist for general video work, for example HyperFrames and the Remotion agent skills.
Does product-film work outside Claude Code?
Yes. Its README lists Claude Code, Cursor, Codex, OpenCode, Hermes and Pi.
Is product-film free?
Yes. It is under the MIT license and uses no paid models by default. Footage and music that you license are your own cost.
Is product-film a HyperFrames alternative?
For product films, yes. Both render HTML to video with a headless browser and ffmpeg. HyperFrames is a general engine. product-film adds templates, camera and pointer rules, checks and a review loop for product UI.
Is product-film a Remotion alternative?
It does a different job. Remotion writes video as React code and has a license for larger companies. product-film draws your product UI on an HTML timeline under the MIT license.
Does it need a Display account?
No. The skill works on any product. Review pages publish to Display. Without an account, a review page is a 30-day preview that you can claim.
Can I make a vertical video?
Yes. The paper-collage route renders 16:9, 9:16 and 4:5 at once. Routes A and B make a 9:16 cut as a separate pass.
Publish your first artifact in 15 seconds.
Free tier. No credit card. One-time password auth on free, Google + Microsoft SSO on Pro (€49/month flat).