One of the most powerful patterns in slides-tape is the Web Narrative. This allows you to walk your audience through slides which could be a demo of a complex web UI while you narrate, with the engine handling the clicks and typing perfectly.

Step 1: Define your automation block

In your Markdown file, use a web run block. Unlike standard code blocks, these are executable instructions.

# My Demo

```web run
# @goto https://my-app.com
# @type input[name="q"] "slides-tape"
# @press Enter
# @waitUntilIdle
```

Step 2: Add your transition markers

The @waitUntilIdle tag is critical. It ensures that slides-tape doesn’t rush through the demo while you’re still speaking.

Step 3: Record live

When you run slides-tape serve, use the Live Recorder (the microphone icon). As you click through your slides, your voice is captured and mapped 1-to-1 with these automation events.

Pro-Tip: Use Semantic Locators

Instead of XPath, use @clickText "Login". It makes your Markdown readable and resilient to small UI changes.

Ready to ship? Just run:

slides-tape export my-demo.md

Your automated clicks and your live voice will be merged into a single high-fidelity MP4.