Director de Demos de Producto

¿Qué hace Director de Demos de Producto?

Diriges la toma más difícil del marketing de software: una interfaz de usuario real haciendo algo real, de una manera que un extraño pueda seguir en el primer vistazo. El fallo por defecto es una grabación de pantalla cruda a velocidad humana: el cursor teletransporta, tres cosas cambian a la vez y el espectador nunca sabe dónde mirar. Tu trabajo es coreografiar la atención: un cambio a la vez, la cámara apuntando a él, manteniéndolo el tiempo suficiente para leerlo.

Esta es la capa de gusto. La gramática de cómo se mueven las cosas (curvas de easing, anticipación, los 12 principios) vive en principios-de-diseño-de-movimiento; la lista de compases vive en storyboard-de-video; la animación de palabras vive en tipografía-cinética. Tú decides qué hace la cámara y el cursor sobre la interfaz y entregas el resultado a esas habilidades y al paquete de construcción (remotion-compose, remotion-render).

Trabaja con un ejemplo durante todo el proceso: un clip de 12 segundos que muestra a un usuario activar un feature flag en un panel de configuración y ver cómo se ilumina un tile de métrica.

Flujo de trabajo

Ejecuta estos pasos en orden. No empieces a coreografiar el cursor antes de haber decidido grabar vs reconstruir: la decisión cambia todo lo que viene después.

Paso 1 - Decidir: grabar pantalla o reconstruir la interfaz

Esta es la bifurcación. Elige antes de cualquier otro trabajo.

• Grabar pantalla cuando la interfaz es real, estable y la credibilidad de la demo depende de "este es el producto real". Es lo más rápido de capturar; pierdes control. No puedes arreglar un cursor entrecortado, un spinner de red lento, datos reales de clientes o una fuente que se ve mal al hacer zoom. Graba al doble de la resolución final para tener espacio para acercarte sin pérdida de calidad.
• Reconstruir la interfaz (reconstruir las pantallas relevantes como componentes) cuando necesites una trayectoria de cursor limpia, tiempos deterministas, datos falsos pero honestos, estados parciales del producto que aún no existen o un zoom perfecto en píxeles. Más trabajo; control total. Este es el camino que lleva a remotion-compose, donde cada pantalla se convierte en un componente y el cursor en una capa animada.
• Híbrido (común y poco utilizado): graba la pantalla para la textura (scroll real, video real reproduciéndose dentro de la aplicación), luego compón destacados, cursores y resaltados recreados encima para que la coreografía siga siendo autoral. Úsalo cuando el producto es real pero la grabación cruda es demasiado desordenada para dirigirla.

Escribe la decisión con su razón. Consulta referencias/grabar-vs-reconstruir para la tabla completa de compensaciones.

Paso 2 - Reducir a un cambio por compás

Una demo es legible solo si exactamente una cosa cambia a la vez y el espectador la está mirando cuando sucede. Enumera cada cambio de estado en el flujo (el foco se mueve, un campo se llena, un interruptor cambia, un tile se actualiza, aparece un toast). Si dos ocurren en el mismo fotograma, debes separarlos en el tiempo o subordinar uno (atenuarlo, sacarlo del zoom). "Activar el flag" no es un compás: es cursor llega al interruptor → interruptor cambia → tile de métrica se recalcula → toast de confirmación. Cuatro compases, cuatro lecturas mantenidas.

Paso 3 - Coreografiar el cursor

El cursor es el narrador. Trátalo como a un actor, no como un registro del ratón.

1. Muévete con intención, ligeramente en arco. Nunca teletransportes, nunca tiembles. El cursor acelera desde el reposo y desacelera hasta el objetivo (ease-in-out - toma la curva de principios-de-diseño-de-movimiento). Un arco sutil se lee como más deliberado que una línea recta de regla.
2. Asiéntate antes de actuar. Llega, pausa ~6-10 fotogramas, luego haz clic. La pausa es el compás de "estoy a punto de hacer esto" que el ojo necesita.
3. Muestra el clic. Un clic real es invisible. Añade una señal visible: una rápida reducción/aumento de escala en el cursor, una ondulación radial en el punto de clic, o un breve estado de presión en el objetivo. Uno de estos, no los tres.
4. Un cursor, un camino. Si el flujo necesita el cursor en dos lugares, corta: no lo hagas cruzar el fotograma. Un corte brusco se lee más limpio que un desplazamiento de 4 fotogramas.
5. Retira el cursor cuando no sea el sujeto. Cuando un tile se está actualizando y el cursor está simplemente estacionado, desvanece o muévelo fuera del zoom. Un cursor estático compitiendo con el sujeto real divide la atención.

Paso 4 - Dirigir la cámara: zoom, paneo, destacado

El fotograma es una cámara sobre la interfaz. Usa un vocabulario de movimientos consistente para que el espectador aprenda tu lenguaje:

• Acercarse (zoom) para comprometerse con una región antes de que ocurra el cambio: llega al interruptor antes de que cambie. El acercamiento es anticipación; el cambio es la recompensa.
• Panear/seguir para seguir al cursor entre dos regiones demasiado separadas para mantenerlas en un solo fotograma. Mantén los paneos lentos y motivados por el cursor: la cámara sigue al actor.
• Alejarse (zoom out) para restablecer el contexto después de un compás detallado, para que el espectador se reanclaje antes de la siguiente región.
• Destacados (un anillo de resalte, una etiqueta, una línea conectora, un foco que atenúa todo lo demás) señalan lo que las palabras tendrían que nombrar. Prefiere un destacado sobre la narración cuando el elemento de la interfaz está en pantalla.

Regla: la cámara ya debe estar mirando al elemento antes de que cambie. Si el interruptor cambia y luego haces zoom, perdiste el momento.

Paso 5 - Hacer legible el cambio de estado

Toda la demo existe para los cambios de estado. Cada uno recibe un tratamiento deliberado:

• Ralentiza el mundo en el cambio clave. Mantén un ritmo normal durante la navegación, luego estira el cambio/actualización real a ~1.3-1.6 veces su duración real para que el ojo registre causa→efecto. Vuelve a acelerar después.
• Resalta el delta antes/después. Pulsa el elemento cambiado (un brillo, un lavado de color breve, un aumento de escala). Para un número que cambia, cuéntalo hacia arriba en lugar de cortar el valor: el movimiento es el mensaje.
• Enfoca la atención. Cuando el tile de métrica se actualiza, atenúa o desenfoca todo lo demás durante ~10 fotogramas para que el tile sea inequívocamente el sujeto, luego recupera el contexto.
• Secuencia causa y efecto con una pausa entre ellos. El interruptor cambia (mantén), luego el tile se actualiza (mantén). Si ocurren en el mismo fotograma, el espectador no puede saber que el interruptor causó el tile.

Paso 6 - Revisar la lista de tomas, luego entregar

Ejecuta el linter (abajo) en tu lista de compases para detectar los fallos clásicos de legibilidad: cambios superpuestos, pausas faltantes, teletransportes del cursor, una cámara que llega tarde. Corrige cada bandera. Luego entrega la lista de tomas dirigida: detalles de timing/easing a principios-de-diseño-de-movimiento, el orden de los compases a storyboard-de-video, y la implementación real (capa del cursor, transformaciones de zoom, pantallas de componentes) a remotion-compose para construir y remotion-render para el bucle de iteración.

Nivel de calidad

La demo es A+ solo cuando se cumple todo:

• La decisión de grabar vs reconstruir está escrita con su razón, y la producción la honra (sin grabación cruda entrecortada metida en una reconstrucción "limpia").
• Exactamente un cambio es el sujeto por compás; cualquier cambio simultáneo está deliberadamente subordinado (atenuado o fuera de fotograma), nunca accidental.
• Cada clic muestra una señal visible, y el cursor se asienta antes de actuar: sin teletransportes, sin temblores, sin paneos bruscos.
• La cámara ya está encuadrada en cada elemento antes de que ese elemento cambie.
• Cada cambio de estado recibe al menos un tratamiento de legibilidad (ralentización, resalte, enfoque o cuenta ascendente) y una lectura mantenida después.
• La lista de tomas pasa el linter sin banderas.

NO HAGAS

• No envíes una grabación de pantalla cruda y en tiempo real como la demo: dirígela, o es metraje, no una demo.
• No permitas que dos cambios de estado caigan en el mismo fotograma; el espectador no puede asignar causa y efecto.
• No teletransportes, tiembles o panees bruscamente el cursor; si debe estar en dos lugares, corta.
• No hagas zoom a un elemento después de que cambie: la cámara llega primero, siempre.
• No narres lo que un destacado podría señalar en pantalla.
• No especifiques curvas de easing exactas o tiempos fotograma a fotograma aquí: eso es principios-de-diseño-de-movimiento; no escribas el orden de compases desde cero: eso es storyboard-de-video; no animes palabras en pantalla aquí: eso es tipografía-cinética; no escribas el código React/Remotion ni renderices: eso es remotion-compose y remotion-render.

Linter

Script de Node autónomo. Guárdalo como demo_lint.js y ejecuta con node demo_lint.js. Sin dependencias. Describe tu demo como una lista ordenada de compases; el linter detecta los fallos clásicos de legibilidad del flujo de trabajo. Edita el array beats para tu demo.

// Linter de lista de tomas de demo de producto. Ejecutar: node demo_lint.js
// Cada compás es un momento en la línea de tiempo. Campos:
//   t          tiempo de inicio en segundos (ordenado, ascendente)
//   dur        cuánto tiempo se mantiene el compás, en segundos
//   changes    cambios de estado de la UI que ocurren en este compás (0, 1 o más)
//   camera     'push' | 'pan' | 'pull' | 'hold'  (movimiento de cámara hacia este compás)
//   framedOn   el elemento al que apunta la cámara cuando comienza el compás
//   cursorTo   dónde se mueve el cursor en este compás (null = permanece / no es el sujeto)
//   click      true si ocurre un clic en este compás
//   clickAffordance  true si el clic se hace visible (ondulación/presión/escala)
//   legibility 'slowdown' | 'highlight' | 'focuspull' | 'countup' | null
const beats = [
  { t: 0.0, dur: 1.2, changes: [],               camera: 'push', framedOn: 'settings-panel', cursorTo: 'toggle',     click: false, clickAffordance: false, legibility: null },
  { t: 1.2, dur: 0.5, changes: [],               camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: true,  clickAffordance: true,  legibility: null },
  { t: 1.7, dur: 1.0, changes: ['toggle-on'],    camera: 'hold', framedOn: 'toggle',         cursorTo: null,         click: false, clickAffordance: false, legibility: 'slowdown' },
  { t: 2.7, dur: 1.4, changes: ['tile-update'],  camera: 'pan',  framedOn: 'metric-tile',    cursorTo: null,         click: false, clickAffordance: false, legibility: 'countup' },
  { t: 4.1, dur: 0.8, changes: ['toast','badge'],camera: 'hold', framedOn: 'metric-tile',    cursorTo: 'export-btn', click: false, clickAffordance: false, legibility: null },
]

const HOLD_MIN = 0.4 // un cambio de estado necesita al menos este tiempo para leerse
const flags = []
for (let i = 0; i < beats.length; i++) {
  const b = beats[i]
  const id = `compás ${i + 1} (t=${b.t}s)`
  // 1. Un cambio por compás.
  if (b.changes.length > 1)
    flags.push(`${id}: ${b.changes.length} cambios a la vez (${b.changes.join(', ')}) - divide o subordina todos menos uno`)
  // 2. Cada cambio tiene una lectura mantenida.
  if (b.changes.length === 1 && b.dur < HOLD_MIN)
    flags.push(`${id}: cambio "${b.changes[0]}" mantenido solo ${b.dur}s - manten >= ${HOLD_MIN}s para que se lea`)
  // 3. Cada cambio tiene un tratamiento de legibilidad.
  if (b.changes.length >= 1 && !b.legibility)
    flags.push(`${id}: cambio "${b.changes[0]}" no tiene tratamiento de legibilidad (slowdown/highlight/focuspull/countup)`)
  // 4. Los clics deben ser visibles.
  if (b.click && !b.clickAffordance)
    flags.push(`${id}: el clic no tiene señal visible - añade una ondulación/presión/escala`)
  // 5. La cámara encuadra el elemento ANTES de que cambie, no en el compás del cambio.
  if (b.changes.length >= 1 && (b.camera === 'push' || b.camera === 'pan'))
    flags.push(`${id}: la cámara se mueve (${b.camera}) en el mismo compás en que ocurre el cambio - llega primero, cambia después`)
  // 6. Sin teletransporte del cursor: un compás de clic cuyo cursor acaba de llegar no tiene asentamiento.
  if (b.click && b.cursorTo)
    flags.push(`${id}: el cursor se mueve Y hace clic en el mismo compás - asienta (~6-10 fotogramas) antes de hacer clic`)
}

if (flags.length === 0) console.log('PASA - la lista de tomas es legible.')
else {
  console.log(`${flags.length} bandera(s):`)
  for (const f of flags) console.log('  - ' + f)
}

Salida del ejemplo trabajado

Con los compases anteriores, el script imprime:

3 bandera(s):
  - compás 4 (t=2.7s): la cámara se mueve (pan) en el mismo compás en que ocurre el cambio - llega primero, cambia después
  - compás 5 (t=4.1s): 2 cambios a la vez (toast, badge) - divide o subordina todos menos uno
  - compás 5 (t=4.1s): cambio "toast" no tiene tratamiento de legibilidad (slowdown/highlight/focuspull/countup)

Léelo: el clic del interruptor (compases 2-3) está limpio: el cursor se asienta, el clic tiene una ondulación, el cambio se ralentiza y se mantiene. Pero el compás 4 panea al tile de métrica mientras se actualiza, por lo que la cámara llega tarde a la recompensa; arréglalo paneando durante la pausa del compás 3 para que el tile esté encuadrado antes de que se recalcule. Y el compás 5 está haciendo dos cosas mal a la vez: lanza un toast y una badge en el mismo fotograma, y el toast no tiene tratamiento de legibilidad. Subordina la badge (atenúala, o sácala del zoom) para que el toast sea el único sujeto, y dale al toast un resalte o una pausa. Arregla las tres y el linter pasa.

Plantilla: ficha-de-toma-de-demo

Copia esto, completa los campos COMPLETAR y pasa el resultado al linter, luego a las habilidades hermanas.

FICHA DE TOMA DE DEMO DE PRODUCTO. [COMPLETAR: nombre de la funcionalidad] - [COMPLETAR: duración]s

DECISIÓN DE PRODUCCIÓN
  Grabar / Reconstruir / Híbrido: [COMPLETAR]
  Razón:                        [COMPLETAR: por qué este camino]
  Resolución de captura:        [COMPLETAR: 2x final si se graba]

SUJETO DEL CLIP (una frase que el espectador debe llevarse)
  [COMPLETAR]

HOJA DE COMPASES (un cambio por fila; la cámara llega antes del cambio)
  #  TIEMPO  CÁMARA   ENCUADRADO EN     CURSOR            CAMBIO            LEGIBILIDAD       PAUSA
  1  [COMPLETAR] [push]   [COMPLETAR]        [se mueve a COMPLETAR] -                 -                 [COMPLETAR]s
  2  [COMPLETAR] [hold]   [COMPLETAR]        [asienta+clic]  -                 -                 [COMPLETAR]s
  3  [COMPLETAR] [hold]   [COMPLETAR]        [estacionado/desv] [COMPLETAR: el cambio]  [ralentización]   [COMPLETAR]s
  4  [COMPLETAR] [pan]    [COMPLETAR]        [fuera de cuadro] [COMPLETAR: el efecto][cuenta/brillo]  [COMPLETAR]s
  (añade filas; nunca dos cambios en una fila)

LENGUAJE DE DESTACADOS (consistente en todo el clip)
  Estilo de resalte:            [COMPLETAR: anillo / foco-que-atenúa / conector]
  Señal de clic:                [COMPLETAR: ondulación / presión / escala-cursor]
  Tratamiento de enfoque:       [COMPLETAR: atenuar otros / desenfocar otros]

ENTREGA
  Detalles de easing + timing -> principios-de-diseño-de-movimiento
  Orden de compases / arco narrativo -> storyboard-de-video
  Palabras en pantalla ->           tipografía-cinética
  Color y luz de los resaltes ->    color-y-luz-de-movimiento
  Diseño de sonido

…

[truncado para traducción]