# Product demo URL: https://remocn.dev/docs/guides/product-demo A ~50-second video where your product is on camera doing its job — one flow, start to finish This is the video where your product does the talking. A recreated app screen acts out your core flow — something is clicked, the UI responds, the result lands — pixel-perfect and scripted, which is why it looks better than any screen recording. No cursor hunting for a button, no loading spinners, no stray notifications. In the [Feature announcement](/docs/guides/feature-announcement) this is one beat called the demo; here that beat grows into the whole video. ## The storyboard 1. **The setup** — One line naming who this is for and the job to be done. 2. **The screen appears** — Your app UI slides in, calm, no action yet. Let the viewer see where they are. 3. **Step one** — The flow begins: something is clicked or typed, the UI responds. 4. **Step two** — The next step of the same flow, given room to be seen. 5. **Step three** — The last step; the flow completes on camera. 6. **The payoff** — The outcome on screen, plus one line saying what just happened in the user's terms. 7. **The close** — A terminal types your install command or URL, then your logo. The three flow steps are most of the runtime. Everything else frames them. ## Your words - **Product name** - **Setup line** — Who this is for and the job, one sentence - **The one flow** — Told as three steps, each a short sentence describing what happens on screen ("the user pastes a link", "a preview builds itself", "the share button lights up") - **Payoff line** — What the user just got, in their words - **Install command or URL** — One, not both - **Closing line** - **Accent color** _optional_ — One hex value; the default lime looks good Pick one flow. A demo that shows three features demos none — the viewer should finish the video able to retell the flow from memory. If your product has three flows worth showing, that's three videos. Have a logo? Drop the SVG into the project folder and mention the file name in the prompt. No logo — your agent will use the product name as a wordmark. Struggling with the lines? [Words on screen](/docs/guides/words-on-screen) is the cheat sheet. ## The prompt Paste it into your agent with your words in place of the highlighted blanks. ```text I'm making a product demo video with remocn (remocn.dev). Build a ~50-second, 1920×1080, 30fps demo video for in this Remotion project, using remocn components — install anything you need with `npx shadcn add @remocn/`: 1. Setup — one calm line: "". 2. The screen — a recreated app screen for slides in and settles. No action yet — just the interface at rest. 3. Step one — . Show the interaction and the UI responding. 4. Step two — . Same screen, the flow continuing. 5. Step three — . The flow completes on camera. 6. Payoff — the outcome stays on screen while one line lands: "". 7. Close — a terminal line that types itself: ``, then my logo () with a closing line: "". The app screen is the star: recreate a clean, believable version of my UI and script every interaction — deliberate clicks, typing that a viewer can follow, responses that land with a beat of rest. Give the three flow steps the most screen time. Style: warm dark background (#141318), off-white text, one accent color , Manrope. Keep transitions restrained — the screen holds still, the flow moves. Use my copy exactly as written. ``` ## Directing the result - "Step two goes by too fast — I can't see what was clicked." - "The screen should look more like my app — here's a screenshot." - "Hold the payoff longer before the close." - "The typing is too quick — slow it to a human pace." - "Cut straight from the setup line to the screen." More directing vocabulary: [Directing your agent](/docs/guides/directing-your-agent). ## Get the file You'll get an `.mp4` in the project folder, ready to post.