Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.

UI Demo Video Recorder Record polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow. When to Use User asks for a "demo video", "screen recording", "walkthrough", or "tutorial" User wants to showcase a feature or workflow visually User needs a video for documentation, onboarding, or stakeholder presentation Three Phase Process Every demo goes through three phases: Discover Rehearse Record . Never skip straight to recording. Phase 1: Discover Before writing any script, explore the target pages to understand what is actually there. Why You cannot script what you have not seen. Fields may be <input not <textarea , dropdowns may be custom components not <select , and comment boxes may support @mentions or tags . Assumptions break recordings silently. How Navigate to each page in the flow and dump its interactive elements: What to look for Form fields : Are they <select , <input , custom dropdowns, or comboboxes? Select options : Dump option values AND text. Placeholders often have value="0" or value="" which looks non empty. Use Array.from(el.options).map(o = ({ value: o.value, text: o.text })) . Skip options where text includes "Select" or value is "0" . Rich text : Does the comment box support @mentions , tags , markdown, or emoji? Check placeholder text. Required fields : Which fields block form submission? Check required , in labels, and try submitting empty to see validation errors. Dynamic content : Do fields appear after other fields are filled? Button labels : Exact text such as "Submit" , "Submit Request" , or "Send" . Table column headers : For table driven modals, map each input[type="number"] to its column header instead of assuming all numeric inputs mean the same thing. Output A field map for each page, used to write correct selectors in the script. Example: Phase 2: Rehearse Run through all steps without recording. Verify every selector resolves. Why Silent selector failures are the main reason demo recordings break. Rehearsal catches them before you waste a recording. How Use ensureVisible , a wrapper that logs and fails loudly: Rehearsal script structure When rehearsal fails 1. Read the visible element dump. 2. Find the correct selector. 3. Update the script. 4. Re run rehearsal. 5. Only proceed when every selector passes. Phase 3: Record Only after discovery and rehearsal pass should you create the recording. Recording Principles 1. Storytelling Flow Plan the video as a story. Follow user specified order, or use this default: Entry : Login or navigate to the starting point Context : Pan the surroundings so viewers orient themselves Action : Perform the main workflow steps Variation : Show a secondary feature such as settings, theme, or localization Result : Show the outcome, confirmation, or new state 2. Pacing After login: 4s After navigation: 3s After clicking a button: 2s Between major steps: 1.5 2s After the final action: 3s Typing delay: 25 40ms per character 3. Cursor Overlay Inject an SVG arrow cursor that follows mouse movements: Call injectCursor(page) after every page navigation because the overlay is destroyed on navigate. 4. Mouse Movement Never teleport the cursor. Move to the target before clicking: Every call should include a descriptive label for debugging. 5. Typing Type visibly, not instant fill: 6. Scrolling Use smooth scroll instead of jumps: 7. Dashboard Panning When showing a dashboard or overview page, move the cursor across key elements: 8. Subtitles Inject a subtitle bar at the bottom of the viewport: Call injectSubtitleBar(page) alongside injectCursor(page) after every navigation. Usage pattern: Guidelines: Keep subtitle text short, ideally under 60 characters. Use Step N Action format for consistency. Clear the subtitle during long pauses where the UI can speak for itself. Script Template Usage: Checklist Before Recording [ ] Discovery phase completed [ ] Rehearsal passes with all selectors OK [ ] Headless mode enabled [ ] Resolution set to 1280x720 [ ] Cursor and subtitle overlays re injected after every navigation [ ] showSubtitle(page, 'Step N ...') used at major transitions [ ] moveAndClick used for all clicks with descriptive labels [ ] typeSlowly used for visible input [ ] No silent catches; helpers log warnings [ ] Smooth scrolling used for content reveal [ ] Key pauses are visible to a human viewer [ ] Flow matches the requested story order [ ] Script reflects the actual UI discovered in phase 1 Common Pitfalls 1. Cursor disappears after navigation re inject it. 2. Video is too fast add pauses. 3. Cursor is a dot instead of an arrow use the SVG overlay. 4. Cursor teleports move before clicking. 5. Select dropdowns look wrong show the move, then pick the option. 6. Modals feel abrupt add a read pause before confirming. 7. Video file path is random copy it to a stable output name. 8. Selector failures are swallowed never use silent catch blocks. 9. Field types were assumed discover them first. 10. Features were assumed inspect the actual UI before scripting. 11. Placeholder select values look real watch for "0" and "Select..." . 12. Popups create separate videos capture popup pages explicitly and merge later if needed.

ui-demo