# Explainer · Whiteboard videos (Light Dust · Whiteboard)

> Creates hand-drawn whiteboard explainer videos with narration, from a topic or from your own scenes.
> Everything runs in the browser: an agent only opens an address and waits. No clicks, no screenshots.
> (En español: añade `lang=es` a la dirección; la interfaz, el guion, la voz y los dibujos pasan a español.)

Site: https://explainer.m8apps.com/ (home: what it does) — Whiteboard: https://explainer.m8apps.com/pizarra.html
Privacy, terms and credits: https://explainer.m8apps.com/legal.html
(Inside the owner's tailnet it is also at https://archie-ubuntu.tailb235ab.ts.net:10130/.)

## Access code

Narration (voice), scripts from a topic and saved video links need an access code (personal: one per person; ask the
owner at hello@m8apps.com).
Drawing from your own images and exporting/downloading the video work without it.
Pass the code once in the address fragment (the part after #, which is never sent to the server):
`https://explainer.m8apps.com/pizarra.html?...#code=YOUR_CODE` — the page stores it in that browser and removes it
from the address. Without a valid code, `voces` in the result is `0/n` and `url` is `null`.

## Create a video (agent mode)

Open `pizarra.html` with parameters. The page builds the scenes, creates the video, downloads it and saves it on the
server with a link (`window.pizarra.resultado.url`), which works even if the agent's browser does not keep downloads.

- From a topic (the script is written by a language model; drawings come from a local base of illustrated emoji):
  `pizarra.html?tema=How+the+water+cycle+works&exportar=1#code=YOUR_CODE`
- From your own scenes (JSON in the address, encoded with encodeURIComponent):
  `pizarra.html?proyecto={"titulo":"Demo","escenas":[{"texto":"Hello"},{"imagen":"dibujos/fluent/sun.svg","texto":"The sun"}]}&exportar=1`
  At most 30 scenes; text up to 400 characters; image: https, data:image/(png|jpeg|webp|gif);base64, blob: or a
  drawing of the local base (`dibujos/fluent/<name>.svg`). Images from other sites must allow CORS.
  The content of a `.pizarra.json` file (Save button) also works, including its `opciones` and `claves`;
  address parameters take precedence over the file's `opciones`.
- Fixed example (3 scenes, good for testing): `pizarra.html?ejemplo=1&exportar=prueba`

Optional parameters (an invalid value is an error, never silently ignored):

| parameter  | values                                                          | default     |
|------------|-----------------------------------------------------------------|-------------|
| lang       | en, es (interface, script, voice and drawing keywords)          | en          |
| tablero    | blanca (whiteboard), luz (lightboard: bright lines on dark)     | blanca      |
| estilo     | marcador, lapiz, plumilla, tiza, carboncillo, limpio            | marcador    |
| mano       | media, clara, oscura, guante, herramienta, ninguna              | media       |
| letra      | script (handwriting), imprenta (print)                          | script      |
| color      | 1 colors with the image's colors, 0 lines only                  | 1           |
| voz        | 1 narrates each scene, 0 no voice                               | 1           |
| velocidad  | 0.25 to 4 (with voice limited to 0.5–2)                         | 1           |
| exportar   | 1 downloads the MP4 and saves it with a link; prueba creates it without download or link | (no export) |

Without `exportar`, the page only prepares the scenes for a person to review and press Play.

## Knowing when it finished

- `document.body.dataset.estado` goes from `trabajando` to `listo` or `error` (the reliable signal).
- The tab title shows progress, `Working… 43 % · Whiteboard`, and ends as `Done: file.mp4` or `Error: reason`
  (in Spanish: `Trabajando…`, `Listo:`, `Error:`).
- `window.pizarra.resultado` has the details, for example
  `{ ok: true, archivo: "how-the-water-cycle-works.mp4", url: "https://explainer.m8apps.com/api/videos/…/how-the-water-cycle-works.mp4",
    caduca: "…", segundos: 48.3, metodo: "cuadros", audio: true, voces: "5/5" }`.
  `voces: "5/5"` is how many scenes with text got narrated; if lower, the voice server failed for some (or no code).
  With `exportar=prueba` it also includes `segundos` (of the file), `reproduccion`, `render`, `luminancia`.
- `url` is the saved MP4: open it, hand it to a person or download it (`curl -o video.mp4 <url>`). It is deleted after
  7 days (`caduca`). `null` means it could not be saved (no code, or server down); only the browser download remains.
- Poll the title or `document.body.dataset.estado` every few seconds with short calls; no need to look at the screen.

## Timing

- Script from a topic: about 20 s. Voice: about 10 s per scene, one at a time (the voice server takes one request at a time).
- Video: created frame by frame (WebCodecs), even with the tab in the background; it takes between a third and a bit
  more than the video's length, depending on the machine and how detailed the drawings are.
  Browsers without WebCodecs record in real time and need the tab visible (`metodo: "vivo"`).
- One video at a time per tab.

## Limits

- Drawings are never AI-generated: they come from a local base (Fluent illustrated emoji, MIT license) or from the
  Iconify API; a scene without a drawing stays as text only.
- Narration follows `lang`; which voice reads each language depends on the server.
- When many people narrate at once, voices wait in line; the page retries for about a minute before giving up on a
  scene (`voces` then shows fewer than all).

## JavaScript control (optional)

`window.pizarra`: `desdeTema(topic)`, `demo({ estilo: 'luz' })`, `exportar({ prueba })`, `reproducir()`, `pausar()`,
`reiniciar()`, `estado()`, `config({ codigo })`, `resultado`.