# AI use cases for Agentic Product Demo (Alexwtlf/agentic-product-demo) Repo: [Alexwtlf/agentic-product-demo](https://github.com/Alexwtlf/agentic-product-demo) | Use cases: 4 | Page: https://dedupedai.com/use-cases/alexwtlf-agentic-product-demo/ A TypeScript Remotion project that builds product demo videos as React code, driven by a coding agent and a frame gate that checks renders. This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL. - Render a product demo video from React code: https://dedupedai.com/use-cases/alexwtlf-agentic-product-demo/render-product-demo-video/ - Have a coding agent build a demo clip for your product: https://dedupedai.com/use-cases/alexwtlf-agentic-product-demo/agent-builds-demo-clip-for-product/ - Match demo colours and easing to your product stylesheet: https://dedupedai.com/use-cases/alexwtlf-agentic-product-demo/match-demo-colors-to-product-stylesheet/ - Ship a muted page loop or a scored launch video: https://dedupedai.com/use-cases/alexwtlf-agentic-product-demo/build-muted-loop-or-scored-launch-video/ ## How to render a product demo video from React code with Agentic Product Demo Repo: [Alexwtlf/agentic-product-demo](https://github.com/Alexwtlf/agentic-product-demo) | Difficulty: Intermediate | Time: 60 minutes | Basis: From the README Install the repo and render the included 16-second demo as an mp4 without a screen recording. **Who it is for:** A developer or founder who needs a product demo video for a landing page or launch and has no screen recorder footage they want to use. **The problem:** Screen recordings of a real app show every state change as a jump between frames, which looks unpolished. **The outcome:** An mp4 and poster frame in out/, produced from a composition where every motion is derived from the frame number. ### Steps 1. Run `npm install` 2. Run `npm run studio` and open localhost:3000 to preview the example composition 3. Run `npm run preview` to get stills on every beat and a contact sheet 4. Run `npm run render` to render, stitch and gate the result into out/ ### Prompt to paste into your agent ```text In the repo Alexwtlf/agentic-product-demo, run `npm install` then `npm run render`. Confirm the output mp4 and poster frame are written to out/ and that the frame gate passes. Report the output file paths. ``` ### Caveat The frame gate measures two numbers per frame and cannot judge whether the picture looks right, so look at the preview stills before trusting a render. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/alexwtlf-agentic-product-demo/render-product-demo-video/ ## How to have a coding agent build a demo clip for your product with Agentic Product Demo Repo: [Alexwtlf/agentic-product-demo](https://github.com/Alexwtlf/agentic-product-demo) | Difficulty: Intermediate | Time: 60 minutes | Basis: From the README Point Claude Code or Cursor at your product and let the skill file drive a shot list and render. **Who it is for:** A product lead or developer with an existing product codebase who wants a coding agent to draft and render the demo. **The problem:** Writing a demo composition by hand needs knowledge of the motion rules and the render steps, which slows down a first version. **The outcome:** A new composition named after your product, a preview contact sheet and a rendered mp4, with the agent showing its shot list before it writes code. ### Steps 1. Clone the repo and run `npm install` 2. Open the repo in Claude Code or Cursor so it reads AGENTS.md and the product-demo skill 3. Point the agent at your product source and let it propose a shot list 4. Correct the shot list, then let the agent write the composition 5. Run `sh scripts/preview.sh ` to check the stills, then `sh scripts/render.sh ` (inferred, check the README) ### Prompt to paste into your agent ```text In the repo Alexwtlf/agentic-product-demo, read AGENTS.md and the product-demo skill, then read the product at and propose a shot list before writing code. After approval, build a composition named , render it, and output out/.mp4 and out/-preview/contact.jpg. Verify that the frame gate passes and that button labels match the real UI. ``` ### Caveat The README says the agent should be corrected at the shot list stage, so an unchecked run can produce a flow or copy that the real product does not have. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/alexwtlf-agentic-product-demo/agent-builds-demo-clip-for-product/ ## How to match demo colours and easing to your product stylesheet with Agentic Product Demo Repo: [Alexwtlf/agentic-product-demo](https://github.com/Alexwtlf/agentic-product-demo) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README Use the adopt script to copy your app's design tokens into the demo theme. **Who it is for:** A designer or developer whose demo video should look like the same product as the app it shows. **The problem:** A demo built with generic colours and easing looks like a different product from the app it promotes. **The outcome:** A src/theme.css snapshot of your tokens, a report of what matched and what did not, and optionally your cubic-bezier easings in src/motion.ts. ### Steps 1. Run `npm run adopt` to find your stylesheet 2. Run `npm run adopt ../src/app/globals.css --curves --dry-run` to preview the matches without writing (inferred, check the README) 3. Run `npm run adopt ../src/app/globals.css` to write src/theme.css 4. Replace the font in src/fonts.ts by hand 5. Run `npm run preview` to check the palette on every beat ### Prompt to paste into your agent ```text In the repo Alexwtlf/agentic-product-demo, run `npm run adopt ../src/app/globals.css --curves --dry-run` and report which tokens matched, which were derived and which are placeholders. Do not write files until the report is reviewed. Verify that no placeholder token appears in the preview stills. ``` ### Caveat The adopt script copies tokens rather than linking them, so a colour you change later in the app needs a rerun and hand edits to src/theme.css are overwritten. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/alexwtlf-agentic-product-demo/match-demo-colors-to-product-stylesheet/ ## How to ship a muted page loop or a scored launch video with Agentic Product Demo Repo: [Alexwtlf/agentic-product-demo](https://github.com/Alexwtlf/agentic-product-demo) | Difficulty: Advanced | Time: 90 minutes | Basis: From the README Choose the silent mp4 for autoplay or add a sound pass for a launch video. **Who it is for:** A marketing owner who needs a demo clip for a web page loop or a launch post where sound is part of the message. **The problem:** A scored file will not autoplay in a page, but a silent file gives no sound for a launch video. **The outcome:** A silent mp4 for autoplay on a page, or an extra out/-sound.mp4 with sound added over the rendered video. ### Steps 1. Render the clip with `sh scripts/render.sh ` (inferred, check the README) 2. For a page loop, use the silent mp4 in out/ as the deliverable 3. Write beat files in scripts/beats/ against the beat-sheet constants at the top of your composition 4. Run `bash scripts/add-sfx.sh ` to write out/-sound.mp4 (inferred, check the README) ### Prompt to paste into your agent ```text In the repo Alexwtlf/agentic-product-demo, render the composition and confirm the silent mp4 exists in out/. If a launch video is needed, write beat files in scripts/beats/ and run `bash scripts/add-sfx.sh `. Verify that out/.mp4 is unchanged and that out/-sound.mp4 exists. ``` ### Caveat The README says browsers block autoplay with audio, so a scored file should not be used as a page autoplay loop. Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/ URL: https://dedupedai.com/use-cases/alexwtlf-agentic-product-demo/build-muted-loop-or-scored-launch-video/