odafeng/open-slide-cena-deck

Deck de cena: uma imagem, uma câmera

Um deck de cena é uma palestra que vive dentro de uma única ilustração. Cada página é uma posição de câmera sobre a mesma imagem. A câmera avança sobre um detalhe, percorre um caminho desenhado até o próximo objeto, salta através da sala e volta para o plano geral no final. As palavras estão em cartões desenhados no espaço da tela e chegam um instante após a câmera pousar, para que o público veja o lugar antes de ler sobre ele.

Esta skill é o método que produziu uma palestra de 22 tomadas e 20 minutos em @open-slide/core 2.2. open-slide não possui API de câmera, então a câmera é controlada dentro do componente da página. template/index.tsx é o motor completo mais sete exemplos de tomadas; copie-o e substitua a cena, as âncoras e os cartões.

Quando usar

• A palestra tem um lugar: uma sala de aula, um centro cirúrgico, um chão de fábrica, um quarteirão. Objetos nesse lugar mapeiam as estações da história.
• O palestrante quer a sensação Prezi (aproximar para falar, afastar para ver o todo, deslizar para o próximo ponto) sem o Prezi.
• 15 a 25 tomadas. Menos e um deck normal é suficiente; mais e os movimentos de câmera viram papel de parede.

Não use para decks densos em dados, demonstrações ao vivo ou qualquer coisa que precise ser editada por outra pessoa no PowerPoint. É uma página web; roda no Chrome.

O trabalho, em ordem

1. Storyboard primeiro. Uma cena, uma lista de estações, uma posição de câmera e um cartão por estação, e uma lista do material real ainda necessário (capturas de tela, logs, fotos). Escreva antes de qualquer arte ou código. references/storyboard.md tem a tabela e as perguntas a resolver com o palestrante.
2. Faça a cena. Gere três candidatos de estilo do plano geral, deixe o palestrante escolher, depois corrija a imagem com edições imagem-a-imagem (remova objetos, adicione a única coisa que a história precisa, deixe a tela em branco). Gere placas de close-up apenas onde a câmera ficará a poucas centenas de pixels mundiais. references/art.md.
3. Meça as âncoras com uma grade, nunca a olho num plano geral. scripts/measure-grid.sh recorta uma região da imagem com uma grade de 100 px; use um recorte de canto 3× para qualquer coisa que uma captura de tela precise caber. references/art.md.
4. Construa o deck a partir do template. Adicione uma ViewKey, uma entrada em VIEWS (câmera, modo HUD, desfoque, pausa), um caso HudBody, uma página, uma nota. O motor não muda. references/engine.md explica cada botão.
5. Verifique, não confie no olho. Execute scripts/perf-probe.cjs no Chrome com cabeçalho: zero tarefas longas e nenhum gap de quadro acima de 50 ms em todas as mudanças de página é o padrão. Meça sem tirar capturas de tela; capturas custam 300 ms cada e parecem travamento. references/verification.md.
6. Grave um walkthrough e assista no celular. scripts/record-walkthrough.cjs reproduz o deck com pausa por tomada e grava; converta para mp4 e envie para o celular do palestrante. Cada rodada de feedback no projeto original veio deste loop, não do navegador.
7. Apresente a partir de um build. scripts/present.command compila, serve dist/ e abre o deck e a janela do palestrante (notas, timer, próxima página). Teste no projetor do local com o próprio laptop do palestrante. references/presenting.md.

Regras que foram pagas

• Segure a cena antes do cartão. O cartão espera até a câmera pousar mais hold ms (padrão 1 s). Um cartão que surge a 70% do voo transforma a cena em papel de parede.
• Uma câmera de close-up deve ficar dentro de sua placa. Se a vista for mais larga que a placa, a imagem base ampliada vaza ao redor e parece uma sombra ou uma mão fantasma.
• Capturas de tela vão em telas pintadas através de uma homografia, mapeadas para a borda interna do painel. Meça os quatro cantos a 3×.
• Saltos longos não precisam de página intermediária. O caminho van Wijk puxa para cima e mergulha sozinho; coloque as estações distantes nas extremidades opostas da imagem e deixe voar.
• Linguagem simples nos cartões. A imagem está falando metade; o cartão recebe uma ideia e no máximo quatro linhas.
• Nunca use MorphElement para isso. Ele copia estilos computados de todos os descendentes na thread principal antes da animação começar; um deck real congelou por cinco segundos. Veja docs/adr/0001-drive-the-camera-in-page.md.

O que está nesta pasta

Caminho	O que é
template/index.tsx	O motor e sete exemplos de tomadas. Copie para slides/<id>/index.tsx.
template/assets/	Cena de exemplo (2752 × 1536), placa de close-up, captura de tela do app. Substitua-os.
references/engine.md	Como funcionam câmera, HUD, pausa, placas e tela de perspectiva; como adicionar uma tomada.
references/storyboard.md	A tabela de storyboard e as decisões a tomar antes da arte.
references/art.md	Como gerar a cena, corrigi-la, medir âncoras, placas.
references/verification.md	Sonda de desempenho, gravação de walkthrough, loop de revisão no celular.
references/presenting.md	Compilação, pré-visualização, janela do palestrante, lançador, alternativas.
references/pitfalls.md	Tudo que deu errado uma vez, para não dar errado de novo.
scripts/	perf-probe.cjs, record-walkthrough.cjs, measure-grid.sh, genimg.py, genedit.py, present.command.
docs/adr/	Por que a câmera está na página, por que o HUD espera.

Trabalhando com o palestrante

Decida com ele, nesta ordem: a ordem da história das estações; se saltos longos devem ir pelo plano geral (automaticamente); qual material real eles fornecerão e quando; o estilo artístico (mostre três, escolha um); o que não deve aparecer na imagem. Escreva cada decisão no storyboard com uma data. Depois construa o deck inteiro, grave e envie o vídeo. Espere três ou quatro rodadas de notas que tocam cada uma cinco tomadas.