explainroo

https://www.explainroo.com/docs
Admin
explainroo is an open-source tool that enables coding agents and developers to generate programmatic...
Tokens:27,566
Snippets:180
Trust Score:4
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install explainroo with git clone and npm

Source: https://www.explainroo.com/docs/getting-started

Clones the explainroo repository, installs dependencies, and runs the doctor command to check that Node, ffmpeg, and Chrome are present. The doctor also downloads the voice and speech check models from Hugging Face into ~/.cache/explainroo/models on first run.

```bash
git clone https://github.com/vincentsch/explainroo.git
cd explainroo
npm install
node bin/explainroo.js doctor --fetch
```

--------------------------------

### s.code and s.terminal usage example

Source: https://www.explainroo.com/docs/scene-reference

Shows how to display a code window with s.code and a terminal window with s.terminal. The code window uses lang 'js', title 'app.js', and appears at 0.5 seconds. The terminal types the command 'npm install' and shows its output at 1 second.

```javascript
s.code("const res = await fetch(url);", {
  lang: "js",
  title: "app.js",
  at: 0.5,
});
s.terminal(["$ npm install", "added 42 packages in 3s"], { at: 1 });
```

--------------------------------

### Example video.json configuration

Source: https://www.explainroo.com/docs/settings

A minimal video.json file showing the title, theme, voice, and music settings. All settings are optional.

```json
{
  "title": "How DNS finds a website",
  "theme": "chalk",
  "voice": "af_heart",
  "music": "calm"
}
```

--------------------------------

### Example script.md with hook and question scenes

Source: https://www.explainroo.com/docs/writing-the-script

Shows the script format: a title, a hook scene, and a question scene with a hold attribute. The text below each heading is spoken, and blank lines create longer pauses.

```markdown
# How DNS finds a website

## hook

You type {example.com|example dot com}, and a page appears. [#but] Computers don't
find each other by name, though. [#numbers] They use numbers called IP addresses.

## question {hold=1.5}

So before the page can load, [#ask] your browser needs the IP address of the site.

```

--------------------------------

### s.camera(options)

Source: https://www.explainroo.com/docs/scene-reference

Moves the view, for example to zoom in on part of a diagram. Must be the first call in the scene function.

```APIDOC
## s.camera(options)

### Description
Moves the view, for example to zoom in on one part of a diagram. Must be the first call in the scene function.

### Method
s.camera

### Parameters
- **options** (array) - Required - Array of camera keyframes.
  - **at** (number) - Required - Time of the keyframe.
  - **x** (number) - Optional - X position.
  - **y** (number) - Optional - Y position.
  - **zoom** (number) - Optional - Zoom level.
  - **dur** (number) - Optional - Duration of transition.
  - **rotate** (number) - Optional - Rotation angle.

### Example
```js
s.camera([{ at: 0, x: 0, y: 0, zoom: 1 }]);
```
```

--------------------------------

### s.list, s.number, s.bars, s.lineChart, s.pie example

Source: https://www.explainroo.com/docs/scene-reference

Shows how to add a list, a large number, a bar chart, a line chart, and a pie chart to a slide. The list uses a stagger of 1.1 seconds, the number has a suffix, and the charts use the 'at' option to position them. Options for each method are described in the following bullet points.

```javascript
s.list(["Browser cache", "Resolver", "Root server"], {
  x: 360,
  y: 280,
  at: "first",
  stagger: 1.1,
});
s.number(1500000, { suffix: " requests", at: "million", y: 480 });
s.bars(
  [
    { label: "2023", value: 19 },
    { label: "2024", value: 31 },
  ],
  { at: 1, suffix: "k" },
);
s.lineChart([3, 5, 4, 8, 13, 21], {
  labels: ["M", "T", "W", "T", "F", "S"],
  at: 1,
});
s.pie(
  [
    { label: "Images", value: 55 },
    { label: "Other", value: 45 },
  ],
  { donut: 0.55, at: 1 },
);
```

--------------------------------

### Extract still frames with `still` command

Source: https://www.explainroo.com/docs/checking-a-video

Generates PNG stills from a video. A time can be a plain number (seconds), `scene`, `scene@end`, `scene@start`, or `scene@2.4` (seconds into the scene). Output goes to `out/stills/`.

```bash
node bin/explainroo.js still videos/dns                 # the end of each scene
node bin/explainroo.js still videos/dns intro@2.5 12.0  # 2.5 s into "intro", and 12 s into the video
```

--------------------------------

### still [project] [times]

Source: https://www.explainroo.com/docs/commands

Saves PNG pictures of single moments. Times can be like 12.5, scene, scene@2.4, scene@start, or scene@end. Without times, saves the end of every scene.

```APIDOC
## still [project] [times]

### Description
Saves PNG pictures of single moments.

### Usage
`still [project] [times]`

### Arguments
- **project** (string) - Optional - The project folder. Defaults to current folder.
- **times** (string) - Optional - One or more times. A time looks like `12.5`, `scene`, `scene@2.4`, `scene@start` or `scene@end`. Without times, it saves the end of every scene.

```

--------------------------------

### Create a video without an agent using CLI commands

Source: https://www.explainroo.com/docs/getting-started

Runs init to create a starter project with three scenes, preview to show the video in the browser (reloading on script.md or scenes.js changes), and render to produce the final video at videos/hello/out/video.mp4.

```bash
node bin/explainroo.js init videos/hello --theme paper --title "Hello"
node bin/explainroo.js preview videos/hello
node bin/explainroo.js render videos/hello
```

--------------------------------

### init <dir>

Source: https://www.explainroo.com/docs/commands

Creates a new project with a starter script and scenes. Options include --theme, --size, --pace, --voice, and --title.

```APIDOC
## init <dir>

### Description
Creates a new project with a starter script and scenes.

### Usage
`init <dir>`

### Arguments
- **dir** (string) - Required - The directory for the new project.

### Options
- `--theme` - Sets the theme.
- `--size` - Sets the size.
- `--pace` - Sets the pace.
- `--voice` - Sets the voice.
- `--title` - Sets the title.

```

--------------------------------

### s.camera()

Source: https://www.explainroo.com/docs/drawing-scenes

Sets up the camera for the scene. Must be called before other elements.

```APIDOC
## s.camera()

### Description
Sets up the camera for the scene. Must be called before other elements.

### Method
s.camera

### Example
```js
s.camera();
```
```

--------------------------------

### Pronunciation fixes for SQL, CLI, example.com, and v2.1

Source: https://www.explainroo.com/docs/writing-the-script

Shows how to write a word as it should look, then how it should sound, so the voice reads the second part while captions and pictures use the first. Web addresses need this most.

```markdown
{SQL|sequel} {CLI|C L I} {example.com|example dot com} {v2.1|version two point one}

```

--------------------------------

### Agent prompt to create a video

Source: https://www.explainroo.com/docs/getting-started

Copy this prompt into your coding agent, replacing [your topic] with your desired topic. The agent clones explainroo, reads AGENTS.md, and follows the steps to create the video.

```text
Make me a short explainer video about [your topic]. Use explainroo for it: clone https://github.com/vincentsch/explainroo, read its AGENTS.md and follow the steps.
```

--------------------------------

### Using s.icon and s.image to add icons and images

Source: https://www.explainroo.com/docs/scene-reference

Shows how to place Lucide icons with `s.icon` and images from the assets folder with `s.image`. Icon options include size (default 120), color, weight (default 2), bg, bgScale, label, and labelSize. Image options include w, h, fit, frame, url, radius, border, shadow, and kenburns.

```javascript
s.icon("database", {
  x: 1500,
  y: 540,
  size: 140,
  color: "purple",
  at: "database",
});
s.icon("lock", { bg: "circle", color: "green", label: "Encrypted", at: 4 });
s.image("assets/app.png", {
  w: 1100,
  frame: "browser",
  url: "app.example.com",
  at: 0.5,
});
s.image("assets/cables.png", {
  w: 1000,
  frame: "card",
  at: "cables",
  kenburns: true,
});
```

--------------------------------

### image [project] <name> "<prompt>"

Source: https://www.explainroo.com/docs/commands

Makes an AI illustration through OpenRouter and saves it as assets/<name>.png. Options: --model best or --model cheap, --aspect, --ref, --no-style.

```APIDOC
## image [project] <name> "<prompt>"

### Description
Makes an AI illustration through OpenRouter and saves it as `assets/<name>.png`.

### Usage
`image [project] <name> "<prompt>"`

### Arguments
- **project** (string) - Optional - The project folder. Defaults to current folder.
- **name** (string) - Required - The name for the output image file.
- **prompt** (string) - Required - The prompt for the AI illustration.

### Options
- `--model` (string) - Optional - `best` or `cheap`.
- `--aspect` - Optional - Sets the aspect ratio.
- `--ref` - Optional - Reference image.
- `--no-style` - Optional - Disables style.

```

--------------------------------

### preview [project]

Source: https://www.explainroo.com/docs/commands

Opens a live preview in your browser that reloads when you save. --port sets the port, default 4400.

```APIDOC
## preview [project]

### Description
Opens a live preview in your browser that reloads when you save.

### Usage
`preview [project]`

### Arguments
- **project** (string) - Optional - The project folder. Defaults to current folder.

### Options
- `--port` (number) - Optional - Sets the port. Default is 4400.

```

--------------------------------

### Preview the video in the browser with `preview` command

Source: https://www.explainroo.com/docs/checking-a-video

Opens a browser page showing the video, timeline, and scene list. Auto-reloads on saving `script.md` or `scenes.js`. Space toggles play/pause, arrow keys jump seconds, comma/period step frames, and square brackets jump scenes.

```bash
node bin/explainroo.js preview videos/dns
```

--------------------------------

### Create a contact sheet with `sheet` command

Source: https://www.explainroo.com/docs/checking-a-video

Creates a contact sheet image with frames labeled by scene and time. Use `--scene` to focus on one scene over time.

```bash
node bin/explainroo.js sheet videos/dns                  # the whole video
node bin/explainroo.js sheet videos/dns --scene resolver # one scene over time
```

--------------------------------

### Render and verify the final video

Source: https://www.explainroo.com/docs/checking-a-video

Renders the video, then `verify` inspects the MP4 for loudness, peaks, black frames, silence, and voice clarity over music/effects. Results are saved to `out/report.json`.

```bash
node bin/explainroo.js render videos/dns
node bin/explainroo.js verify videos/dns
```

--------------------------------

### Generate and list AI images

Source: https://www.explainroo.com/docs/images

The first command generates an image and saves it to assets/cables.png. The second lists all images made for the project and their costs. Requests and costs are also written to build/images/usage.jsonl.

```bash
node bin/explainroo.js image videos/jump-start cables "Two cars parked nose to nose with their hoods open, jumper cables between the batteries"
node bin/explainroo.js images videos/jump-start
```

--------------------------------

### Set OpenRouter API key in .env

Source: https://www.explainroo.com/docs/images

Required for AI image generation. Put the key in a .env file in the explainroo folder. Git ignores .env. An environment variable with the same name also works.

```plaintext
OPENROUTER_API_KEY=sk-or-...
```

--------------------------------

### verify [project]

Source: https://www.explainroo.com/docs/commands

Checks the finished MP4 for loudness, peaks, black frames, silence and a clear voice. --file checks a different file.

```APIDOC
## verify [project]

### Description
Checks the finished MP4 for loudness, peaks, black frames, silence and a clear voice.

### Usage
`verify [project]`

### Arguments
- **project** (string) - Optional - The project folder. Defaults to current folder.

### Options
- `--file` (string) - Optional - Checks a different file.

```

--------------------------------

### render [project]

Source: https://www.explainroo.com/docs/commands

Saves the video as out/video.mp4. Options: --draft for quick half-size draft, --from and --to to render part, --workers for parallel Chrome pages, --out to set file.

```APIDOC
## render [project]

### Description
Saves the video as `out/video.mp4`.

### Usage
`render [project]`

### Arguments
- **project** (string) - Optional - The project folder. Defaults to current folder.

### Options
- `--draft` - Makes a quick half-size `out/draft.mp4`.
- `--from` (number) - Optional - Start time in seconds.
- `--to` (number) - Optional - End time in seconds.
- `--workers` (number) - Optional - Sets how many Chrome pages draw at the same time.
- `--out` (string) - Optional - Sets the output file.

```

--------------------------------

### s.list(items, options)

Source: https://www.explainroo.com/docs/scene-reference

Shows a list of items with optional icons, colors, and staggered entry. Each item can have its own timing and exit behavior.

```APIDOC
## s.list(items, options)

### Description
Shows a list of items. Each item is text or an object with text, at, icon, color, and out properties.

### Method
s.list

### Parameters
- **items** (array) - Required - List of items. Each item is a string or an object with properties: text (string), at (number), icon (string), color (string), out (boolean).
- **options** (object) - Optional - Configuration options:
  - **x** (number) - Optional - Left edge of the list.
  - **y** (number) - Optional - Top of the list.
  - **size** (number) - Optional - Font size, default 50.
  - **width** (number) - Optional - Width of the list.
  - **gap** (number) - Optional - Gap between items.
  - **bullet** (string) - Optional - Bullet style: 'dot', 'dash', 'number', 'check', 'arrow', or an icon name.
  - **bulletColor** (string) - Optional - Color of the bullet.
  - **at** (number or array) - Optional - Start time, or one time per item.
  - **stagger** (number) - Optional - Seconds between items, default 0.7.
  - **enter** (string) - Optional - Enter animation.

### Notes
Each item plays a note, and the notes go up as the list grows.
```

--------------------------------

### Set element appearance with at values

Source: https://www.explainroo.com/docs/drawing-scenes

Shows the three kinds of values accepted by the `at` option: seconds, word cues, and markers. Word cues ignore capitalization and punctuation; if a word is not in the narration, explainroo stops with an error and lists the closest words.

```javascript
s.box("Resolver", { at: 2.4 }); // seconds after the scene starts
s.box("Resolver", { at: "resolver" }); // when the voice says "resolver"
s.box("Resolver", { at: "#ask" }); // at the [#ask] marker in script.md
```

--------------------------------

### images [project]

Source: https://www.explainroo.com/docs/commands

Lists the images made for the project and what they cost.

```APIDOC
## images [project]

### Description
Lists the images made for the project and what they cost.

### Usage
`images [project]`

### Arguments
- **project** (string) - Optional - The project folder. Defaults to current folder.

```

--------------------------------

### Using s.text and s.annotate to point things out

Source: https://www.explainroo.com/docs/scene-reference

Shows how to add text with `s.text` and draw annotations with `s.annotate`. The target can be an id or a box. Annotation types include underline, circle, box, highlight, strike, cross, and bracket. Options include color, padding, width, and dur.

```javascript
s.text("It is *not* magic", { id: "claim", y: 400, at: 0 });
s.annotate("claim", { type: "underline", at: "magic" });
s.annotate(
  { x: 960, y: 700, w: 400, h: 90 },
  { type: "circle", color: "red", at: 3 },
);
```

--------------------------------

### s.code(source, options)

Source: https://www.explainroo.com/docs/scene-reference

Displays a code window with syntax highlighting. Supports multiple languages and options for size, title, line numbers, reveal animation, and highlighting.

```APIDOC
## s.code(source, options)

### Description
Shows code in a window with syntax highlighting. Supports languages: js, ts, py, go, rust, php, sh, sql, json, md.

### Method
s.code

### Parameters
- **source** (string) - Required - The code to display.
- **options** (object) - Optional - Configuration options.
  - **lang** (string) - Optional - Language for syntax highlighting.
  - **size** (number) - Optional - Font size, default 32.
  - **w** (number) - Optional - Window width.
  - **title** (string|false) - Optional - File name shown in title bar, or false for no title bar.
  - **lineNumbers** (boolean) - Optional - Show line numbers, default false.
  - **reveal** (string) - Optional - Reveal animation type: 'type', 'lines', or 'none'.
  - **cps** (number) - Optional - Characters per second for typing animation.
  - **lineDelay** (number) - Optional - Delay between lines.
  - **highlight** (array) - Optional - Lines to highlight.
  - **highlightAt** (number) - Optional - Time when highlighting occurs.

### Example
```js
s.code("const res = await fetch(url);", {
  lang: "js",
  title: "app.js",
  at: 0.5,
});
```
```

--------------------------------

### s.draw(options, callback)

Source: https://www.explainroo.com/docs/scene-reference

Gives you the canvas to draw anything the other methods cannot. Provides life.p for animation progress.

```APIDOC
## s.draw(options, callback)

### Description
Gives you the canvas, so you can draw anything the other methods cannot. `life.p` goes from 0 to 1 while the element comes in. `s.ctx` is the canvas too.

### Method
s.draw

### Parameters
- **options** (object) - Required - Drawing options.
  - **x** (number) - Optional - X position.
  - **y** (number) - Optional - Y position.
  - **at** (number) - Optional - Time when drawing appears.
  - **out** (number) - Optional - Time when drawing disappears.
- **callback** (function) - Required - Function receiving (ctx, life).
  - **ctx** (CanvasRenderingContext2D) - The canvas context.
  - **life** (object) - Lifecycle object with `p` property (0 to 1).

### Example
```js
s.draw({ x: 0, y: 0 }, (ctx, life) => {
  // draw using ctx
});
```
```

--------------------------------

### s.terminal(lines, options)

Source: https://www.explainroo.com/docs/scene-reference

Displays a terminal window with typed commands and output. Supports custom commands, output, timing, and styling options.

```APIDOC
## s.terminal(lines, options)

### Description
Shows a terminal window. Lines starting with '$ ' are typed as commands; others appear as output. Supports custom command/output objects with timing and color.

### Method
s.terminal

### Parameters
- **lines** (array) - Required - Array of strings or objects.
  - String starting with '$ ' - Command to type.
  - Other string - Output line.
  - Object: `{ cmd, at }` - Command with timing.
  - Object: `{ out, at, color }` - Output with timing and color.
- **options** (object) - Optional - Configuration options.
  - **w** (number) - Optional - Window width.
  - **size** (number) - Optional - Font size.
  - **rows** (number) - Optional - Number of rows.
  - **title** (string) - Optional - Window title.
  - **prompt** (string) - Optional - Command prompt string.
  - **cps** (number) - Optional - Characters per second, default 22.
  - **outputDelay** (number) - Optional - Delay before output appears.
  - **lineGap** (number) - Optional - Gap between lines.

### Example
```js
s.terminal(["$ npm install", "added 42 packages in 3s"], { at: 1 });
```
```

--------------------------------

### themes

Source: https://www.explainroo.com/docs/commands

Lists the five looks and the music styles.

```APIDOC
## themes

### Description
Lists the five looks and the music styles.

### Usage
`themes`

```

--------------------------------

### Draw shapes and arrows with explainroo

Source: https://www.explainroo.com/docs/scene-reference

Creates a box, a circle, two arrows, a line, and an SVG path. The box uses options like id, x, y, icon, color, and at; the circle uses id, x, y, r, label, and at; arrows connect elements or points with labels, bends, and dashes; the line takes an array of points; the path takes an SVG path string.

```javascript
s.box("Resolver", {
  id: "res",
  x: 960,
  y: 540,
  icon: "server",
  color: "blue",
  at: "resolver",
});
s.circle({ id: "you", x: 400, y: 540, r: 90, label: "You", at: 0.5 });
s.arrow("you", "res", { label: "asks", at: "asks" });
s.arrow([300, 900], [1600, 900], { bend: 0.3, dashed: true, at: 5 });
s.line(
  [
    [200, 800],
    [900, 700],
  ],
  { color: "accent", at: 2 },
);
s.path("M0 0 C 200 -150 400 150 600 0", { x: 660, y: 540, at: 3 });
```

--------------------------------

### s.icon(name, options)

Source: https://www.explainroo.com/docs/drawing-scenes

Draws an icon on the scene. The `at` option specifies when it appears.

```APIDOC
## s.icon(name, options)

### Description
Draws an icon element on the scene. The `at` option specifies when it appears.

### Method
s.icon

### Parameters
- **name** (string) - Required - The name of the icon to draw.
- **options** (object) - Required - Options for the icon element.
  - **x** (number) - Optional - The x-coordinate of the icon's center.
  - **y** (number) - Optional - The y-coordinate of the icon's center.
  - **size** (number) - Optional - The size of the icon.
  - **at** (number|string) - Required - The time when the icon appears. Can be a number (seconds), a word cue (string), or a marker reference (string starting with '#').

### Example
```js
s.icon("laptop", { x: 620, y: 660, size: 170, at: "#but" });
```
```

--------------------------------

### s.sfx(name, at, { gain, dur, pitch })

Source: https://www.explainroo.com/docs/scene-reference

Plays a sound effect at a specified time. The name parameter selects from a predefined list of sound effects. Optional parameters control gain, duration, and pitch.

```APIDOC
## s.sfx(name, at, { gain, dur, pitch })

### Description
Plays a sound effect at a specified time. The name parameter selects from a predefined list of sound effects. Optional parameters control gain, duration, and pitch.

### Method
s.sfx

### Parameters
- **name** (string) - Required - The name of the sound effect. Valid names: `pop`, `click`, `whoosh`, `swipe`, `tick`, `type`, `ding`, `chime`, `thud`, `scribble`, `chalk`, `rise`, `sparkle`, `blip`, `error`.
- **at** (number) - Required - The time at which the sound effect plays.
- **gain** (number) - Optional - The volume/gain of the sound effect.
- **dur** (number) - Optional - The duration of the sound effect. Used for `type`, `scribble`, `chalk`, and `rise`.
- **pitch** (number) - Optional - The pitch of the sound effect.

### Notes
- A `rise` sound ends at `at + dur`, so start it a little before the thing it leads up to.
```

--------------------------------

### formats

Source: https://www.explainroo.com/docs/commands

Lists the sizes for YouTube, Shorts, TikTok, Reels, Instagram and LinkedIn.

```APIDOC
## formats

### Description
Lists the sizes for YouTube, Shorts, TikTok, Reels, Instagram and LinkedIn.

### Usage
`formats`

```

--------------------------------

### Set image style in video.json

Source: https://www.explainroo.com/docs/images

Set a custom style for all images in the video. The default style is a flat illustration with soft colors, a plain light background, and no text.

```json
"images": { "model": "best", "style": "Watercolor illustration, warm colors, no text" }
```

--------------------------------

### check [project]

Source: https://www.explainroo.com/docs/commands

Finds problems with layout, timing and pronunciation. When it finds errors, it ends with an error code.

```APIDOC
## check [project]

### Description
Finds problems with layout, timing and pronunciation. When it finds errors, it ends with an error code.

### Usage
`check [project]`

### Arguments
- **project** (string) - Optional - The project folder. Defaults to current folder.

```

--------------------------------

### s.rand(i), s.noise(x), s.wiggle(amount, speed)

Source: https://www.explainroo.com/docs/scene-reference

Provide deterministic random values that are the same on every render.

```APIDOC
## s.rand(i)

### Description
Returns a deterministic random value based on index i.

### Method
s.rand

### Parameters
- **i** (number) - Required - Index for the random value.

### Returns
- (number) - Deterministic random value.

## s.noise(x)

### Description
Returns a deterministic noise value based on x.

### Method
s.noise

### Parameters
- **x** (number) - Required - Input value.

### Returns
- (number) - Deterministic noise value.

## s.wiggle(amount, speed)

### Description
Returns a deterministic wiggle value based on amount and speed.

### Method
s.wiggle

### Parameters
- **amount** (number) - Required - Wiggle amount.
- **speed** (number) - Required - Wiggle speed.

### Returns
- (number) - Deterministic wiggle value.
```

--------------------------------

### Text elements: s.title, s.subtitle, s.text, s.note

Source: https://www.explainroo.com/docs/scene-reference

Creates a title, subtitle, main text, and a small note in an ExplainRoo scene. `s.title` uses the display font at 104 pixels, `s.subtitle` is 46 pixels in muted color, and `s.note` is 32 pixels in muted color. All accept the same options as `s.text`.

```javascript
s.title("How DNS works", { at: 0 });
s.subtitle("the phone book of the internet", { at: 1 });
s.text("Every site has an *address*", { y: 300, size: 64, at: "address" });
s.note("about 20 ms", { x: 1400, y: 820, at: 3 });
```

--------------------------------

### s.cue(word)

Source: https://www.explainroo.com/docs/drawing-scenes

Returns the time (in seconds) when a word is spoken in the narration.

```APIDOC
## s.cue(word)

### Description
Returns the time (in seconds) when a word is spoken in the narration.

### Method
s.cue

### Parameters
- **word** (string) - Required - The word to look up.

### Returns
- **number** - The time in seconds when the word is spoken.

### Example
```js
const time = s.cue('Finally');
```
```

--------------------------------

### s.image

Source: https://www.explainroo.com/docs/scene-reference

Draws an image from the project's assets folder with options for size, fit, frame, URL, and effects.

```APIDOC
## s.image

### Description
Draws a file from the project's `assets` folder. Supports sizing, cropping, frames, and effects like ken burns.

### Method
s.image

### Parameters
- **src** (string) - Required - Path to the image file in the assets folder.
- **options** (object) - Optional - Configuration options.
  - **w** (number) - Optional - Width. If only one of w/h is given, the image keeps its aspect ratio.
  - **h** (number) - Optional - Height. If only one of w/h is given, the image keeps its aspect ratio.
  - **fit** (string) - Optional - `cover` fills the box and crops the rest, `contain` shows the whole image.
  - **frame** (string) - Optional - Frame around the image: `none`, `card`, `browser`, `window`, or `phone`.
  - **url** (string) - Optional - Web address shown in the address bar of the browser frame.
  - **radius** (number) - Optional - Corner radius.
  - **border** (string) - Optional - Outline.
  - **shadow** (boolean) - Optional - Set `false` to remove shadow.
  - **kenburns** (boolean) - Optional - `true` for a slow zoom.
  - **at** (string|number) - Optional - Placement reference (e.g., "cables", 0.5).

### Request Example
```
s.image("assets/app.png", {
  w: 1100,
  frame: "browser",
  url: "app.example.com",
  at: 0.5,
});
```

### Response
No response value. The image is drawn on the scene.
```

--------------------------------

### s.note

Source: https://www.explainroo.com/docs/scene-reference

Creates a small text element at 32 pixels in the muted color. Takes the same options as s.text.

```APIDOC
## s.note

### Description
Creates a small text element at 32 pixels in the muted color. Takes the same options as s.text.

### Method
s.note

### Parameters
- **text** (string) - Required - The text to display.
- **options** (object) - Optional - Options as described in the Text Options section.

### Example
```
s.note("about 20 ms", { x: 1400, y: 820, at: 3 });
```
```

--------------------------------

### doctor

Source: https://www.explainroo.com/docs/commands

Checks that Node, ffmpeg, Chrome and the speech models are there. --fetch downloads the models.

```APIDOC
## doctor

### Description
Checks that Node, ffmpeg, Chrome and the speech models are there.

### Usage
`doctor`

### Options
- `--fetch` - Downloads the models.

```

--------------------------------

### s.note(text, options)

Source: https://www.explainroo.com/docs/drawing-scenes

Draws a note element on the scene. The `at` option specifies when it appears.

```APIDOC
## s.note(text, options)

### Description
Draws a note element on the scene. The `at` option specifies when it appears.

### Method
s.note

### Parameters
- **text** (string) - Required - The text to display in the note.
- **options** (object) - Required - Options for the note element.
  - **at** (number|string) - Required - The time when the note appears. Can be a number (seconds), a word cue (string), or a marker reference (string starting with '#').
  - **x** (number) - Optional - The x-coordinate of the note's center.
  - **y** (number) - Optional - The y-coordinate of the note's center.

### Example
```js
s.note("checked first", { x: card.x, y: card.bottom + 40, at: 1.4 });
```
```

--------------------------------

### Common Element Options

Source: https://www.explainroo.com/docs/scene-reference

Options that most elements take, controlling timing, entrance/exit animations, duration, identification, styling, and sound.

```APIDOC
## Common Element Options

### Description
Options that most elements take, controlling timing, entrance/exit animations, duration, identification, styling, and sound.

### Options
- **at** (number) - Optional - When the element appears.
- **out** (number) - Optional - When the element leaves.
- **enter** (string) - Optional - How the element comes in: `draw`, `write`, `type`, `words`, `sync`, `pop`, `rise`, `fade`, `zoom`, `drop`, `slide-left`, `slide-right`, `slide-up`, `slide-down` or `none`.
- **exit** (string) - Optional - How it leaves: `fade`, `pop`, `rise`, `drop`, `slide-left`, `slide-right` or `none`.
- **dur** (number) - Optional - How long the entrance takes, in seconds.
- **id** (string) - Optional - A name, so that arrows, `annotate` and `s.get` can find the element.
- **color** (string) - Optional - A color name like `blue`, `accent` or `muted`, or any CSS color.
- **opacity** (number) - Optional - Make it see-through.
- **scale** (number) - Optional - Change its size.
- **rotate** (number) - Optional - Turn it, in degrees.
- **float** (number) - Optional - How many pixels the element drifts slowly, so a still element does not look frozen.
- **sfx** (string|boolean) - Optional - The sound it makes when it comes in, or `false` for no sound.

### Notes
Use `at: -1` for an element that was already on screen in the scene before. It is there from the start of the scene and makes no sound.
```

--------------------------------

### voice [project]

Source: https://www.explainroo.com/docs/commands

Makes the voice recording and word times. Lists words the speech check could not confirm. Only redoes scenes that changed; --force redoes all.

```APIDOC
## voice [project]

### Description
Makes the voice recording and the word times. It lists the words the speech check could not confirm. It only redoes scenes that changed.

### Usage
`voice [project]`

### Arguments
- **project** (string) - Optional - The project folder. Defaults to current folder.

### Options
- `--force` - Redoes all scenes.

```

--------------------------------

### Run automated checks with `check` command

Source: https://www.explainroo.com/docs/checking-a-video

Draws every scene at multiple times and reports issues like off-frame text, overlapping text, unreadable text, code overflow, timing errors, `scenes.js` errors, narration mismatches, and long static stretches. Fix errors and warnings before rendering; hints are optional.

```bash
node bin/explainroo.js check videos/dns
```

--------------------------------

### s.circle(options)

Source: https://www.explainroo.com/docs/scene-reference

Draws a circle with a label and radius. Accepts the same options as s.box, plus r for radius.

```APIDOC
## s.circle(options)

### Description
Draws a circle with a label and radius. Accepts the same options as s.box, plus r for radius.

### Method
Function call

### Endpoint
s.circle(options)

### Parameters
- **options** (object) - Required - Configuration options for the circle.

#### Options
- **r** (number) - Required - Radius of the circle.
- **label** (string) - Optional - Text label for the circle.
- All options from s.box are also supported.

### Example
```js
s.circle({ id: "you", x: 400, y: 540, r: 90, label: "You", at: 0.5 });
```

### Response
No return value documented.
```
Tokens:
Raw