# Put your real app inside an AI-generated product video Keep your product UI readable in generated footage. Record a real interaction, track it into a laptop screen, then update the demo without regenerating the scene. Author: John Holliman Canonical: https://voyageragent.ai/blog/real-ui-product-video Published: 2026-09-30T09:35:24-07:00 Updated: 2026-09-30 A product launch clip needs two things: a scene worth watching and an interface people can trust. Generate the setting, then put a real screen recording inside it. The buttons, labels and interaction come from your app. This five-second example uses FIELD, a small demo app we built for the tutorial. Its project filter really works. The laptop and sunlit desk are generated. ![The FIELD app filters three project cards to two inside a generated laptop scene.](https://cdn.moda.app/voyager/blog/real-ui-product-video/hero-764939a65ecba762.webp) [Animation: The FIELD app filters three project cards to two inside a generated laptop scene.](https://cdn.moda.app/voyager/blog/real-ui-product-video/result-d3209d0d96bd9ceb.mp4) [Download GIF](https://cdn.moda.app/voyager/blog/real-ui-product-video/result-0df5bfc7e62ceb23.gif) A real filter interaction in a generated setting. The filter changes three project cards to two. ## Give the model a screen you can replace Start with a short shot, a clear screen and no objects passing in front of it. This reusable prompt is adapted from our scene request: ```text Make a five-second product film of a silver laptop on a pale stone desk in warm afternoon light. Keep the camera locked. Show all four inner screen corners throughout. The display is blank dark charcoal, with a thin straight bezel. No hands or objects cross the screen. No text, logos or interface. Let subtle leaf shadows move across the desk. ``` We used [MiniMax H3 Max](https://fal.ai/models/minimax/h3-max/text-to-video) at 1080p, which requires paid generation access. The download includes our background if you want to start without generating one. The prompt asks for a locked camera, but the result still drifts slightly. That matters: a fixed rectangle pasted over the screen would slide off its edges. ## Record one real interaction Capture a clean browser window with demo data. Pick one action the viewer can follow: apply a filter, create an item or change a chart. Leave a beat before clicking and hold the result afterward. Here, clicking **Ready to launch** reduces three project cards to two. Record at a resolution high enough for the final screen insert; this example uses 1200×750. Small labels become smaller inside a laptop, so keep the important action large. ## Fit the recording to the screen A corner pin maps the recording's four corners onto the laptop display. Track those points across the shot, then reuse the track for every version of the recording. For this example, MiniMax generated the background. A Python script using OpenCV handled the screen insert: we marked the inner display corners on the first frame, tracked features on the bezel with optical flow, and smoothed the resulting corner positions. For each frame, a perspective transform fitted the real recording into those four corners, with a mask preserving the surrounding laptop. FFmpeg encoded the finished video. Give a coding agent the two clips and this instruction: ```text Composite screen-v1.mp4 into the laptop display in background.mp4. Follow the four inner screen corners in every frame. Keep the bezel visible and preserve the recording's aspect ratio. Save the corner coordinates and an editable compositor alongside the export. Check the whole clip for drift, edge gaps and flashes. Do not regenerate the scene or redraw the interface. ``` The downloadable example includes the corner data and compositor. Start with its included clips before replacing them with yours. A new camera shot needs a new track. Hands crossing the display need an additional foreground mask; choose an unobstructed screen for your first attempt. ## Revise the product, keep the scene ![Reviewing the laptop composite in Voyager, pinning a heading change and showing the revised result.](https://cdn.moda.app/voyager/blog/real-ui-product-video/demo-poster-741d1f23ce57fb86.webp) [Video: Reviewing the laptop composite in Voyager, pinning a heading change and showing the revised result.](https://cdn.moda.app/voyager/blog/real-ui-product-video/demo-30b93ffc24e2ebcf.mp4) 21-second edit: original output, real Voyager playback, a held view of the actual pinned request, then the revised output. Waits are removed. The FIELD dashboard begins with Studio overview. Voyager plays the real composite. A note pinned at 2.50 seconds requests Ready for launch. The revised recording uses the same background and corner track. Voyager, the desktop creative agent our team builds, keeps the generated shot, recording and compositor in one project. With an agent provider configured, open the result in Files and pin a note to the screen you want changed. Here is a reusable revision prompt: ```text Change the app heading from “Studio overview” to “Ready for launch”. Record the same filter interaction again. Replace only the screen recording in the existing composite. Reuse the background and corner track, preserve v1, and export v2. ``` The revised recording says **Ready for launch** and still performs the same filter action. The background file and corner data are unchanged. The useful shortcut is the connection between reviewing the video and editing the files that produced it. The scene does not need another generation when a label changes. You can use the same technique in another editor or coding harness; Voyager keeps the source, preview and revision conversation in one place. [Download the editable project](https://cdn.moda.app/voyager/blog/real-ui-product-video/real-ui-project-5e791ac8debb7206.zip). Unzip it and open `index.html` to compare the clips offline. The source includes the working demo app, recording script and composition instructions. ## Make your next project in Voyager Create an account, download Voyager, and start making. [Sign up](/sign-up)