Slides de Frontend

Apresentações HTML ricas em animação e sem dependências, que rodam inteiramente no navegador. Curado do repositório zarazhangrui/frontend-slides com licença MIT.

Comece a partir do example.html nesta pasta de plugin. É a semente comprovada: copie o CSS do palco, o shell do slide e todo o script do controlador SlidePresentation verbatim, depois substitua o conteúdo do slide. Não reescreva o sistema de palco, o script de navegação ou a arquitetura de tokens de design do zero.

Especificações rígidas (travadas — todo deck deve satisfazer todas elas)

Palco fixo 16:9 — NÃO NEGOCIÁVEL

• Todo deck é criado em uma tela fixa de 1920×1080: .deck-viewport (preenche a janela) envolve .deck-stage (1920×1080, transform-origin: 0 0).
• O JavaScript dimensiona todo o palco uniformemente: factor = min(innerWidth/1920, innerHeight/1080), depois translate(x, y) scale(factor) para centralizar com letterbox/pillarbox. Reexecute em resize.
• Nunca refluya o conteúdo do slide por dispositivo. Sem breakpoints responsivos dentro dos slides. Todas as medidas do slide são px fixos no tamanho de design de 1920×1080.
• Inclua o conteúdo COMPLETO do references/viewport-base.css no bloco <style> (a semente já o incorpora).

Estrutura do slide

• Cada página é um <section class="slide"> diretamente dentro do .deck-stage. Cerca de 10 slides para um deck padrão; divida o conteúdo em mais slides em vez de diminuir a fonte.
• A troca de slides usa as classes .active / .visible alternando visibility, opacity, pointer-events — nunca display: none/block (classes de layout como display: flex em filhos as substituiriam e mostrariam todos os slides de uma vez).
• Sem rolagem, sem overflow, sem painéis sobrepostos, sem texto abaixo do tamanho de leitura confortável em 1920×1080.

Runtime de navegação (mantenha o script da semente)

• Teclado: ←/→, ↑/↓, Space, PageUp/PageDown, Home/End.
• Roteamento de hash: slide atual espelhado para #/<index>; deep links e hashchange restauram o slide.
• Roda do mouse (com debounce de ~650ms) e swipe de toque (limiar de ≥40px).
• O cromo do contador de página fica em .deck-controls, posicionado fixamente fora do palco dimensionado.

Tokens de design

• Todas as cores, fontes, tamanhos e easing ficam nas propriedades customizadas CSS do :root; retema editando apenas os tokens.
• Tipografia: webfonts distintas do Google Fonts ou Fontshare — nunca Inter, Roboto, Arial ou fontes do sistema como tipo de exibição. Evite os clichês de índigo #6366f1 e gradiente-roxa-sobre-branco.
• Escolha um preset do references/STYLE_PRESETS.md (12 presets curados: Bold Signal, Electric Studio, Creative Voltage, Dark Botanical, Notebook Tabs, Pastel Geometry, Split Pastel, Vintage Editorial, Neon Cyber, Terminal Green, Swiss Modern, Paper & Ink) ou crie um sistema personalizado com a mesma disciplina. A semente vem com Bold Signal.

Vocabulário de layout (componha slides a partir destes)

title-card (cartão focal colorido), agenda (lista editorial numerada), section divider (número gigante contornado), bullets (ícone + título + linha de suporte, máx 4-6), big-stat (número superdimensionado + nota lateral), quote, two-column comparison, principle grid (cartões 2×2), CSS bar chart (barras animadas em scaleY), closing. Mantenha o número do slide no canto superior esquerdo, a navegação breadcrumb no canto superior direito e a regra de linha de base na parte inferior — esse cromo é a assinatura do deck.

Movimento

• Entradas via elementos .reveal que transitam quando o slide ganha .visible; escale com passos de transition-delay (~0.1s).
• Um easing de assinatura por deck (semente: cubic-bezier(0.16, 1, 0.3, 1)); anime apenas transform e opacity.
• Suporte a prefers-reduced-motion é obrigatório (incluído em viewport-base.css).
• Combine o caráter da animação com o sentimento do conteúdo usando references/animation-patterns.md.

Modos de densidade

Pergunte (ou infira) se o deck é guiado pelo apresentador ou focado na leitura:

• Baixa densidade / guiado pelo apresentador — uma ideia por slide, fonte grande, máx 1-3 marcadores, mais slides.
• Alta densidade / focado na leitura — slides autônomos, grades/tabelas estruturadas, máx 4-6 cartões, ainda sem overflow.

Contrato de saída

• Arquivo .html único e autônomo: todo CSS e JS inline, sem etapa de build, sem bibliotecas JS externas, sem scripts CDN.
• Ícones são SVG inline. Sem imagens remotas de CDNs lentas; visuais gerados por CSS (gradientes, formas, padrões) são um caminho de primeira classe.
• Comente cada seção: /* === SECTION NAME === */.
• Pegadinha do CSS: nunca negue funções CSS diretamente (-clamp() é silenciosamente ignorado) — use calc(-1 * clamp(...)).

…