> ## Documentation Index
> Fetch the complete documentation index at: https://docs.origami.techmitten.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Record Your Screen with Cinematic Smart Auto-Zoom Now
> Capture browser tabs or desktop windows with cinematic auto-zoom that follows your cursor — no post-production editing required to get a polished result.
This guide explains how to record your screen in Origami AI and get the most out of the **smart auto-zoom** feature. During idle moments in your recording, Origami AI automatically applies a smooth, cinematic zoom toward your last cursor position — turning a plain screen capture into a polished, camera-directed demo with zero post-production effort.
***
## Before You Start
Screen recording and auto-zoom require **Chrome 113+ or Edge 113+** for full support. Firefox Nightly and Safari 18+ work for basic recording but have limited support for some WebCodecs features.
Verify hardware acceleration is enabled — this is required for smooth auto-zoom compositing:
* **Chrome:** Go to `chrome://settings/system` and confirm **Use hardware acceleration when available** is turned on.
* **Edge:** Go to `edge://settings/system` and confirm the same.
If you're running Origami AI locally, always start it with `npm run dev` and open **[http://localhost:3006](http://localhost:3006)** — do not open the built `index.html` file directly in your browser. The dev server sets the required `Cross-Origin-Opener-Policy` and `Cross-Origin-Embedder-Policy` headers that the screen recorder and video renderer depend on. Opening the file directly will cause those features to fail silently.
The Origami AI Chrome extension provides **DOM-level cursor, click, and scroll telemetry** — giving the auto-zoom engine far more precise data about where you're interacting on the page.
Without the extension, Origami AI falls back to an in-page window-level cursor tracker, which is functional but less precise. See [Installing the Chrome Extension](#installing-the-chrome-extension) below for setup steps.
***
## Recording
Click **Record** in the Origami AI navigation menu to open the screen recording panel.
Your browser will prompt you to allow screen capture access. Click **Allow** (or **Share**). If you accidentally dismissed the prompt, reload the page to trigger it again.
Origami AI only captures what you explicitly share — no audio, camera, or other browser data is captured without your action.
Select what you want to record from the browser picker:
* **Browser tab** — captures a single tab cleanly, ideal for web app demos
* **Desktop window** — captures a specific application window
* **Entire screen** — captures everything visible on a monitor
For demos of web-based tools, **browser tab** capture gives the cleanest, highest-fidelity result.
Click **Start Recording** and run through your content. Origami AI continuously tracks your cursor activity in the background. Move naturally — the auto-zoom reacts to your real pace, not a scripted path.
Click **Stop** when you're finished. Origami AI processes the recorded stream and cursor telemetry, then loads your recording into the editor with auto-zoom applied.
***
## Auto-Zoom Explained
Origami AI's auto-zoom works by detecting **idle periods** — moments when your mouse hasn't moved for a set duration.
**Default behavior:**
* After **2 seconds** of no mouse movement, Origami AI applies a smooth cinematic zoom toward your last cursor position.
* When you move the cursor again, the view smoothly returns to normal zoom.
* Panning follows the cursor as you move around the screen.
This mimics a camera operator zooming in when the presenter pauses and pulling back when they move to a new area — creating a professional, directed look from an unedited capture.
**To adjust idle threshold and zoom level:**
Open **⚙️ Settings → General → Screen Recording** to configure:
| Setting | Description |
| ----------------- | ------------------------------------------------------------------ |
| **Idle Duration** | Time in milliseconds before auto-zoom activates (default: 2000 ms) |
| **Zoom Level** | How far in the camera zooms when idle is detected |
Lower idle values zoom in faster and more aggressively; higher values produce fewer, more deliberate zooms.
For fast-paced demos with lots of mouse movement, try setting the idle threshold to **3000–4000 ms** so auto-zoom only kicks in on deliberate pauses, not brief hesitations.
***
## Installing the Chrome Extension
The Chrome extension is optional but significantly improves the accuracy of auto-zoom by providing DOM-level cursor, click, and scroll data. You can install it from the repository or download it directly from within Origami AI.
Type `chrome://extensions` in your address bar and press Enter.
Toggle **Developer mode** on using the switch in the top-right corner of the Extensions page. This unlocks the ability to load unpacked extensions from your local file system.
Click **Load unpacked** and navigate to the `chrome-extension/` folder inside the Origami AI repository. Select that folder and click **Open**.
Alternatively, download a pre-packaged ZIP from inside the app: go to **header menu → Download Chrome Extension** (or the **Slide Media** tab in the Slide Editor). Unzip it, then load the resulting folder the same way using **Load unpacked**.
Switch back to your Origami AI tab and reload it. The extension is now active and will begin collecting DOM-level telemetry when you start a recording session.
The Chrome extension can only inject telemetry into **regular web pages**. It does not work on privileged browser pages such as `chrome://`, `about:`, or other extension pages — those pages block content script injection by design. If you need to record browser UI itself, use window or desktop capture mode instead.