# ExplainerM8 · 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: an agent key from your account
(sign in with your email on the page: Access code → Send link, then "Agent key"; it starts with `xk_`, is shown once
and a new one replaces it) or a personal code from the owner (hello@m8apps.com). Accounts have a daily limit.
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.
  `texto` is what is written on the board: keep it to the key idea (1 to 5 words). Add `narracion` (up to 600
  characters) with what the voice says; without it the voice reads `texto`. The drawing lasts as long as its narration.
  The key idea is written when the voice says it. Scripts from a topic always end with a short closing scene and a
  call to action.
  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), pura (pure white #fff) | blanca |
| estilo     | marcador, lapiz, plumilla, tiza, carboncillo, limpio            | marcador    |
| mano       | traje (man in a suit), blusa (woman in a blouse), camiseta (man in a T-shirt), nino (child), herramienta (tool only), ninguna | traje |
| tipoMano   | realista (photo), ilustrada (drawn)                             | realista    |
| letra      | script (handwriting), imprenta (print), elegante, casual, divertida, tecnica, clasica (serif) | script |
| transicion | polvo (ink dust), camara (camera move), fundido (fade), corte (cut) | polvo |
| entrada    | mano (drawn by hand), espiral, lluvia, abajo, explosion, escaneo (each scene formed by particles of light) | mano |
| sonidos    | auto (by audience, tone and network), suave, divertido, corporativo, ninguno (sound effects between scenes) | auto |
| trazo      | 1 sound of the drawing tool while it draws, 0 silent                | 1           |
| 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           |
| formato    | 16:9 (horizontal), 9:16 (vertical), 1:1 (square)                | by screen   |
| locutor    | es-fernanda, es-isabela, es-paola, es-carmen, es-adriana, es-alba, es-lorena, es-rodrigo, es-julian, es-mauricio, es-gabriel, es-javier, es-andres, es-emiliano, es-pablo, es-sebastian (Spanish); en-laura, en-hannah, en-selene, en-harper, en-sheila, en-rose, en-freya, en-megan, en-sophia, en-chloe, en-ethan, en-adrian, en-jordan, en-gregory, en-kai, en-sawyer, en-james, en-richard, en-oliver (English). Older names (ef_dora, af_heart, en-sarah…) still work and map to the closest voice | mireya / en-laura |
| exportar   | 1 downloads the MP4 and saves it with a link; prueba creates it without download or link | (no export) |

Without `exportar`, the page is for a person: it prepares the scenes and plays them, and may open windows (sign-in,
result); the tab title does not change. Agents always pass `exportar` and their code or agent key in `#code=`: in
address mode a signed-in browser session is not used, so without a code topics are refused and narration is off.

## 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",
    pagina: "https://explainer.m8apps.com/v/…/how-the-water-cycle-works", 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.
- `pagina` is a page to share with people: it plays the video in the browser (same 7 days).
- 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`.