Clips de feature en la documentación

El recorder no vive aquí. Está en blablanote-app/demos/, y su README es la referencia: cómo se escribe un guion, qué hace falta antes de grabar y por qué un clip que termina en verde puede estar mintiendo.

Este fichero solo dice cómo aterriza aquí lo que sale de allí.

Hasta el 2026-08-26 había en scripts/capture-videos.mjs un segundo recorder, escrito antes que aquél: sin credenciales, sin recorte, sin rótulos y con Math.random() en las pausas. Nunca llegó a producir nada —public/videos/ estaba sin crear— y se ha borrado. Dos grabadores es como alguien acaba grabando con el que no funciona.

De demos/out/ a public/videos/

# en blablanote-app (o su worktree)
npm run demo -- task-views

# aquí
cp ../blablanote-app/demos/out/task-views/task-views.mp4  public/videos/task-views.mp4
cp ../blablanote-app/demos/out/task-views/poster.png      public/videos/task-views.poster.png
cp ../blablanote-app/demos/out/task-views/task-views.vtt  public/videos/task-views.en.vtt

El .vtt sale del propio guion: cada step() con su segundo exacto. Traducirlo es editar el texto, no volver a grabar — el clip es uno solo para los cinco idiomas.

Cómo se monta en la página

<video class="doc-clip" controls muted loop playsinline preload="none" poster="/videos/task-views.poster.png" width="1440" height="900">
  <source src="/videos/task-views.mp4" type="video/mp4" />
  <track kind="captions" src="/videos/task-views.en.vtt" srclang="en" label="English" default />
  <track kind="captions" src="/videos/task-views.es.vtt" srclang="es" label="Español" />
  <track kind="captions" src="/videos/task-views.ca.vtt" srclang="ca" label="Català" />
  <track kind="captions" src="/videos/task-views.eu.vtt" srclang="eu" label="Euskara" />
  <track kind="captions" src="/videos/task-views.gl.vtt" srclang="gl" label="Galego" />
</video>

<p class="doc-clip-caption">Switching the same tasks between the list and the board.</p>

⚠️ La etiqueta de apertura tiene que caber en una línea. video no está en la lista de bloques HTML de CommonMark —source y track sí—, así que markdown-it le abre un bloque de tipo 7, y el tipo 7 exige la etiqueta entera y sola en su línea. Partida en dos, el bloque no llega a abrirse, y el compilador de Vue responde con Element is missing end tag señalando un número de línea del HTML ya renderizado: en el primer intento apuntó a un bloque de código cuarenta líneas más arriba, en otro idioma.

Un clip de móvil lleva además doc-clip--phone. Es 398x820, y width: 100% sobre un vídeo vertical lo deja en unos 1440px de alto dentro de una columna de 700 — más alto que la ventana, así que el lector baja por una pared de cromo para llegar al párrafo siguiente. La clase lo limita al ancho de un teléfono y lo centra. Los width/height de la etiqueta son los del clip, 398 y 820.

Lo que cada atributo compra, porque ninguno está de adorno:

• poster y preload="none": la página no descarga el vídeo hasta que alguien le da al play. Una página de docs puede llevar un clip sin llevar sus bytes.
• width y height: son los del clip (1440×900) y evitan que la página salte al cargar el póster. El tamaño visible lo pone .doc-clip en .vitepress/theme/custom.css.
• default en la pista del idioma de la página, no siempre en la inglesa.
• muted loop playsinline: no hay audio que perder y un clip de cinco segundos se entiende mejor repitiéndose.

Antes de dar la página por buena

Mira los fotogramas, no el comando. Grabar cinco clips contra la app real dejó al descubierto que esta misma página describía tres vistas de tareas cuando hay dos, y llamaba a las columnas del tablero «To Do, In Progress, Done» cuando son open, pending, done, archived. El clip lo contaba todo mientras el texto de encima decía otra cosa.

Ese es el trabajo que trae un clip: no ilustra la documentación, la audita.