--- title: "How Do You Make a Hero Video for Your Website From Your Product UI?" slug: /blog/website-hero-video-from-product-ui publishedAt: "2026-10-14" updatedAt: "2026-10-14" author: ott description: "Build a website hero loop from your real product UI. This guide covers the product-film skill, the two hero routes, the files it writes, and the HTML to embed a muted looping video." --- # How Do You Make a Hero Video for Your Website From Your Product UI? > **TL;DR:** Build the loop from your own interface, not from a screen recording. The open-source product-film skill lets a coding agent draw your components frame by frame, render them with Playwright and cut a short loop with ffmpeg. It writes a web file and a poster for your site. Plan 20 to 30 seconds, a muted autoplay loop and a poster image. The skill needs a local shell with Node and ffmpeg. A hero video earns its place by showing the product doing one thing. A recording of a busy dashboard does not. A drawn loop can show one action, at a size that stays sharp on a large display. --- ## 1) What a good hero loop shows Keep these rules: 1. **One action.** For example: a comment arrives and the page updates. 2. **No sound needed.** Visitors see it muted. 3. **A loop point you do not notice.** The last frame matches the first. 4. **Real UI.** The screens match what a visitor sees after sign-up. 5. **Short.** Product-film's docs give 30 seconds as the typical hero loop and 20 to 25 seconds for a landing section. --- ## 2) The two routes for hero loops product-film is an open-source agent skill under the MIT license. Source: github.com/display-dev/product-film. Two of its routes suit heroes. | Route | Shows | Typical length | Formats | | --------------- | ------------------------------------------------------------------------------------------ | -------------- | --------------------------------- | | A: with footage | Product beats cut against licensed live-action footage, for hero loops with people in them | 30 s loop | 16:9, and 9:16 as a separate pass | | B: product only | Product beats on a plate with a moving camera, for landing sections and teasers | 20 to 25 s | 16:9, and 9:16 as a separate pass | Route A needs footage that you license yourself. The skill uses no stock footage by default. --- ## 3) How the loop gets made 1. You describe the film: "A 25-second hero loop for the new share dialog." 2. The agent builds one HTML page. It copies your components from your production code, or captures live screens from your running app with fictional data. 3. Playwright screenshots every frame at device scale 2. 4. ffmpeg encodes the frames and writes a master file, a web file, a review file, a poster and a contact sheet. 5. The agent publishes a review page to Display. Your team comments on the cut. Each round becomes a new version of the same page. 6. You hand the web file and the poster to your site's video pipeline. Because every frame is drawn from code, a note like "hold the result longer" changes one number. The rest of the film does not change. --- ## 4) What you need - A local shell where your agent can run commands. - Node 18 or later. Playwright installs per film folder. Chromium downloads once, about 100 MB. - ffmpeg with libx264. - Your front end: components or a dev server to capture. Install: ```bash npx skills add display-dev/product-film --skill product-film ``` A hosted chat app without a shell can plan the loop. It cannot render it. --- ## 5) Put the loop on your page Use plain HTML. Browsers allow autoplay for muted video. ```html ``` Notes: - Keep the poster image. It shows while the file loads and when autoplay is blocked. - Keep the file small. Use the web file from the skill, not the master. - Honor reduced-motion settings. Give visitors who ask for less motion the poster only. - Add a text alternative near the video that says what the loop shows. --- ## 6) Compare the options We checked each tool on its own site on 14 October 2026. | Option | Strength | Weakness | | -------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | | product-film | Real UI, sharp at close zoom. Recut by changing a number | Needs a shell, Node, ffmpeg and a coded front end | | HyperFrames | General HTML-to-video engine for agents. Apache 2.0. Needs Node 22 or later and ffmpeg | Not specific to product UI. You write the product scenes | | Remotion with agent skills | Video as React code | Companies of 4 or more people need a license. It starts at $25 per month per seat on the Creators plan | | Screen recorder | Fast and familiar | Text softens when you zoom, and each product change needs a new take | We built product-film, so weigh our view. --- ## 7) Limits - Setup takes longer and needs more steps than a screen recorder. - The skill makes silent films unless you supply music. A hero loop usually needs none. - It does not generate people or scenes with a model. Route A needs licensed footage. - Fictional data replaces real names on screen. Approve the story file before you publish the loop. - Outside guests can view a review page you share. They cannot comment on it yet. --- ## 8) Who this suits It suits a team with a web front end, a developer or agent who can run a render, and a site that changes often. It does not suit a team with no UI code to capture, or one that needs a one-off video this week. 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. For the broader method, read [how to make a product demo video with an AI agent](/blog/make-a-product-demo-video-with-an-ai-agent). --- *We checked product-film in its docs on 14 October 2026, HyperFrames on its GitHub page and Remotion on its license page. Versions and prices change. Check each vendor before you decide.* --- ## 9) FAQ **How long should a website hero video be?** Product-film's docs give 30 seconds for a hero loop and 20 to 25 seconds for a landing section. Shorter loops load faster. **Should a hero video have sound?** No. Browsers autoplay only muted video, and most visitors never turn sound on. **Can I make a hero video from a screen recording?** Yes. Text softens when you zoom, and every UI change needs a new recording. A film drawn from code avoids both. **Does product-film use an AI video model?** No. It draws frames from your UI code. It uses no image, video or audio models by default. **Does the skill host the video?** No. It writes the web file and the poster. You hand them to your own site pipeline. **Where do reviewers see the cut?** On a review page the agent publishes to Display. Each cut is a new version. Reviewers comment on the page. **Can I make a vertical version?** Yes, as a separate pass for 9:16.