Charla con cámara en una imagen

Deck de escena: una imagen, una cámara

Un deck de escena es una presentación que vive dentro de una sola ilustración. Cada página es una posición de cámara sobre la misma imagen. La cámara se acerca a un detalle, recorre un camino dibujado hacia el siguiente objeto, salta a través de la sala y se aleja al plano general al final. Las palabras están en tarjetas dibujadas en el espacio de la pantalla, y aparecen una pausa después de que la cámara se haya posado, para que la audiencia vea el lugar antes de leer sobre él.

Este skill es el método que produjo una charla de conferencia de 22 tomas y 20 minutos en @open-slide/core 2.2. open-slide no tiene API de cámara, por lo que la cámara se maneja dentro del componente de la página. template/index.tsx es el motor completo más siete ejemplos de tomas; cópialo y reemplaza la escena, los anclajes y las tarjetas.

Cuándo usarlo

• La charla tiene un lugar: un aula, un quirófano, un piso de fábrica, una manzana de la ciudad. Los objetos en ese lugar se corresponden con las estaciones de la historia.
• El orador quiere la sensación de Prezi (acercarse para hablar, alejarse para ver el conjunto, deslizarse al siguiente punto) sin Prezi.
• De 15 a 25 tomas. Con menos, un deck normal es suficiente; con más, los movimientos de cámara se vuelven decorativos.

No lo uses para presentaciones con muchos datos, demostraciones en vivo o cualquier cosa que deba ser editada por otra persona en PowerPoint. Es una página web; se reproduce en Chrome.

El trabajo, en orden

1. Guion gráfico primero. Una escena, una lista de estaciones, una posición de cámara y una tarjeta por estación, y una lista del material real que aún necesitas (capturas de pantalla, registros, fotos). Escríbelo antes de cualquier arte o código. references/storyboard.md tiene la tabla y las preguntas que acordar con el orador.
2. Crear la escena. Genera tres candidatos de estilo del plano general, deja que el orador elija, luego arregla la imagen con ediciones imagen a imagen (elimina objetos, añade lo único que la historia necesita, deja la pantalla en blanco). Genera placas de primer plano solo donde la cámara esté a unos pocos cientos de píxeles del mundo. references/art.md.
3. Mide los anclajes con una cuadrícula, nunca a ojo en un plano general. scripts/measure-grid.sh recorta una región de la imagen con una cuadrícula de 100 píxeles; usa un recorte de esquina 3× para cualquier cosa en la que deba caber una captura de pantalla. references/art.md.
4. Construye el deck a partir de la plantilla. Añade un ViewKey, una entrada VIEWS (cámara, modo HUD, desenfoque, pausa), un caso HudBody, una página, una nota. El motor no cambia. references/engine.md explica cada perilla.
5. Verifica, no confíes en el ojo. Ejecuta scripts/perf-probe.cjs en Chrome con cabeza: cero tareas largas y sin brecha de fotograma superior a 50 ms en todos los cambios de página es el estándar. Mide sin tomar capturas de pantalla; las capturas cuestan 300 ms cada una y parecen tirones. references/verification.md.
6. Graba un recorrido y míralo en un teléfono. scripts/record-walkthrough.cjs reproduce el deck con una pausa por toma y lo graba; conviértelo a mp4 y envíalo al teléfono del orador. Cada ronda de comentarios en el proyecto original provino de este bucle, no del navegador.
7. Presenta desde un build. scripts/present.command construye, sirve dist/ y abre el deck y la ventana del presentador (notas, temporizador, siguiente página). Prueba en el proyector del lugar con el portátil del propio orador. references/presenting.md.

Reglas que se pagaron

• Mantén la escena antes de la tarjeta. La tarjeta espera hasta que la cámara haya aterrizado más hold ms (por defecto 1 s). Una tarjeta que aparece al 70% del vuelo convierte la escena en un fondo de escritorio.
• Una cámara de primer plano debe estar dentro de su placa. Si la vista es más ancha que la placa, la imagen base ampliada se filtra alrededor y se lee como una sombra o una mano fantasma.
• Las capturas de pantalla van en pantallas pintadas a través de una homografía, mapeadas al borde interior del bisel. Mide las cuatro esquinas a 3×.
• Los saltos largos no necesitan una página intermedia. La trayectoria van Wijk sube y se sumerge por sí sola; coloca las estaciones lejanas en los extremos de la imagen y déjala volar.
• Lenguaje sencillo en las tarjetas. La imagen está haciendo la mitad de la conversación; la tarjeta recibe una idea y como máximo cuatro líneas.
• Nunca uses MorphElement para esto. Copia los estilos calculados de cada descendiente en el hilo principal antes de que comience la animación; un deck real se congeló durante cinco segundos. Consulta docs/adr/0001-drive-the-camera-in-page.md.

Qué hay en esta carpeta

Ruta	Qué es
template/index.tsx	El motor y siete ejemplos de tomas. Copia en slides/<id>/index.tsx.
template/assets/	Escena de ejemplo (2752 × 1536), placa de primer plano, captura de pantalla de la aplicación. Reemplázalos.
references/engine.md	Cómo funcionan la cámara, HUD, pausa, placas y pantalla de perspectiva; cómo añadir una toma.
references/storyboard.md	La tabla del guion gráfico y las decisiones a tomar antes del arte.
references/art.md	Cómo generar la escena, arreglarla, medir anclajes, placas.
references/verification.md	Sonda de rendimiento, grabación de recorrido, bucle de revisión en el teléfono.
references/presenting.md	Build, vista previa, ventana del presentador, lanzador, alternativas.
references/pitfalls.md	Todo lo que salió mal una vez, para que no salga mal dos veces.
scripts/	perf-probe.cjs, record-walkthrough.cjs, measure-grid.sh, genimg.py, genedit.py, present.command.
docs/adr/	Por qué la cámara vive en la página, por qué el HUD espera.

Trabajando con el orador

Decide con él, en este orden: el orden narrativo de las estaciones; si los saltos largos deben ir a través del plano general (lo hacen automáticamente); qué material real proporcionarán y cuándo; el estilo artístico (muestra tres, elige uno); qué no debe aparecer en la imagen. Escribe cada decisión en el guion gráfico con una fecha. Luego construye todo el deck, grábalo y envía el video. Espera tres o cuatro rondas de notas que cada una toque cinco tomas.