slide-animado

Slide animado

Entrega um único .html autocontido que funciona como PowerPoint: o aluno abre no navegador e apresenta. Parte do template pronto em templates/deck-base.html, que você copia e adapta.

Fluxo (siga a ordem)

1. Planejar antes de desenhar. Escreva o roteiro e mostre ao aluno em poucas linhas. Para cada tela: título (uma frase que carrega a mensagem), a mensagem em uma linha e quantos bullets (de 0 a 4, curtos). Ritmo: capa, 2 a 5 telas de conteúdo, fechamento. Sem o aluno pedir mais, são 4 a 6 telas. Se o pedido for claro, siga sem esperar aprovação.
2. Escolher o estilo. Pedido sem detalhe usa o design system padrão do template. Instrução extra ("mais sóbrio", "mais colorido", "elegante", "com a minha marca") muda só o bloco DESIGN SYSTEM (ver references/design-system.md).
3. Copiar o template e adaptar. cp templates/deck-base.html ~/slide-<tema>.html. Troque textos, cores no bloco do design system e as telas. Mantenha o script do final do arquivo como está.
4. Conferir (seção abaixo), corrigir o que estiver feio.
5. Entregar o arquivo ao aluno com uma linha de como usar (setas, F para tela cheia, P para PDF).

Como o template funciona

• Palco fixo de 1920x1080 escalado para caber em qualquer tela (16:9, com faixas nas sobras).
• Cada tela é um <section class="slide">. Dentro dela:
  • .bg com data-morph="fundo": a forma de fundo. Em cada tela ela tem outra posição, tamanho, raio e cor, e viaja de uma para a outra.
  • Elementos com data-morph="nome" (titulo, marca, card-1...): o mesmo nome em telas vizinhas faz o elemento viajar (posição, tamanho, cor, raio). Nome que só existe em uma das telas entra ou sai sozinho.
  • <div class="rest">: o conteúdo que não viaja (textos, bullets). Ele sai deslizando e o novo entra com animação própria.
  • data-build em um item: aparece só no avanço seguinte (cada seta ou espaço revela um). Depois do último, passa de tela.
  • data-anim em um item: entra com animação (sobe e aparece) ao chegar na tela.
• Posição e tamanho de cada elemento vão no style inline (em pixels do palco 1920x1080). Para a transição ficar bonita, mude de verdade a posição, o tamanho ou a cor dos elementos morph entre as telas.
• Transição: document.startViewTransition com view-transition-name dado por JS a partir de data-morph. Formas e cartões esticam até o tamanho final (vt-box); texto que muda sai na primeira metade e o novo entra na segunda (vt-swap), então as telas nunca ficam sobrepostas em transparência. Sem suporte do navegador, cai no fallback FLIP (mede antes e depois e anima com Web Animations API). Não troque por fade de tela inteira: é o defeito que esta skill existe para evitar.
• Controles: setas, espaço, Enter, PageUp/PageDown, clique (esquerda 20% volta), swipe no celular, F tela cheia, P imprime (abre com ?print para ver as telas empilhadas). O número da tela fica no canto e #3 na URL abre direto na tela 3.
• Respeita prefers-reduced-motion (troca de tela sem animação).