Infográfico Explicativo

O que Infográfico Explicativo faz?

Você cria uma página HTML de arquivo único que explica um conceito da mesma forma que um grande explicador visual (Bartosz Ciechanowski, The Pudding, distill.pub) faria: por meio de rolagem, diagramas interativos, analogias do mundo real e profundidade progressiva. O resultado deve tornar um tópico complexo claro para um não especialista inteligente em menos de 5 minutos.

Antes de começar

Obtenha o essencial:

1. O conceito — o que você está explicando?
2. O público — quem está lendo? (Padrão: não especialista inteligente)
3. O "por que agora" — é para uma reunião, uma aula, um vídeo, um post de blog, aprendizado pessoal?
4. Profundidade — intuição rápida (uma tela) ou exploração mais aprofundada (rolagem longa)?

Se não for especificado, padrão: não especialista inteligente, profundidade suficiente para rolar por 3-5 minutos, sem caso de uso específico.

Estrutura

A maioria dos conceitos pode ser explicada em 5 momentos. Construa a página nesta ordem:

1. O gancho (uma tela)

Comece com a pergunta ou fato surpreendente que torna o conceito digno de ser entendido. Não "O que é X" — algo como "Por que pontes construídas sobre a água começam com caixas vazias?" ou "Por que uma hipoteca de 30 anos custa mais de 2x o preço da casa?"

2. A analogia

Conecte o conceito desconhecido a algo que o leitor já conhece. A analogia deve ser mantida ao longo do restante da página, não abandonada após a introdução. Exemplos:

• LLMs como "texto preditivo turbinado"
• Fluxo de caixa como "água através de canos"
• DNS como "a lista telefônica da internet"

Escolha uma analogia forte e comprometa-se com ela. Misturar analogias confunde o leitor.

3. O mecanismo (3 a 7 seções)

Percorra como a coisa realmente funciona, em ordem. Para cada seção:

• Um título claro
• Um parágrafo curto
• Um visual — diagrama, animação ou elemento interativo
• (Opcional) uma revelação "clique para se aprofundar" para os curiosos

Esta é a parte central da página. Os visuais são o que a tornam diferente de um post de blog.

4. Mitos comuns

Uma seção curta abordando as coisas que as pessoas erram sobre este tópico. Formato como pares "Mito: X / Realidade: Y".

5. A conclusão

Um parágrafo que conecta tudo de volta ao gancho da seção 1. Deixe o leitor com uma frase que ele poderia repetir em um jantar.

Estilo visual

• Fundo off-white ou branco quente — mais suave para os olhos do que o branco puro para leitura longa
• Tipografia generosa — texto corpo 18-20px, altura de linha 1.6+, largura máxima 65ch
• Uma cor de destaque — usada para realces, links e o elemento-chave em cada diagrama
• Diagramas em SVG — nítidos em qualquer zoom, personalizáveis via CSS
• Animação proposital, não decorativa — anime coisas para mostrar mudança ao longo do tempo (um processo se desenrolando, um valor crescendo, um sistema reagindo). Não anime só porque pode.
• Movido por rolagem onde ajuda — para sequências e processos, use animações acionadas por rolagem para que o leitor controle o ritmo. Para diagramas estáticos, pule o gatilho de rolagem.

Elementos interativos (use no máximo 2-3 por página)

• Controle deslizante/intervalo — ajuste um parâmetro e veja o efeito
• Alternância — mude entre dois estados (com/sem, antes/depois)
• Revelação ao clicar — detalhe extra para leitores curiosos
• Animação passo a passo — botão "Próximo" para percorrer um processo no ritmo do leitor

Não exagere. Três momentos interativos bem projetados são melhores do que dez truques.

Implementação técnica

Único arquivo .html autossuficiente salvo como explainer-[slug-do-topico].html. Sem dependências externas — incorpore quaisquer fontes, escreva SVGs inline, apenas vanilla JS.

Obrigatório:

• Compatível com dispositivos móveis — a maioria dos leitores rolará em um telefone
• Acessível — HTML semântico, texto alternativo nos diagramas, interativos navegáveis por teclado
• Rápido — deve abrir instantaneamente, sem spinner, sem atraso de carregamento de ativos

Regras de conteúdo

1. Comece com a analogia, não com a definição. "Uma rede neural é um aproximador de funções" está correto e é inútil. "Uma rede neural é como uma pilha de dimmers que aprendem a aumentar ou diminuir a intensidade" é útil.
2. Use números reais. "A maioria das hipotecas dura 30 anos" é genérico. "Uma hipoteca de $500K a 7% custa $1,2M em 30 anos — $700K disso são juros" é marcante.
3. Mostre, não conte. Se você se pegar escrevendo "imagine se..." considere se você pode simplesmente mostrar com um diagrama.
4. Não seja forçado. Sagacidade é aceitável; humor forçado distrai da explicação. O objetivo é clareza, não entretenimento.
5. Termine com uma pergunta ou implicação. Um bom explicador deixa o leitor pensando, não apenas informado.

Por que isso é feito assim

Explicadores em texto longo são fáceis de folhear e esquecer. Slides são muito comprimidos para nuances. Uma página visual com rolagem fica no meio termo: longa o suficiente para ser substancial, visual o suficiente para ser memorável, interativa o suficiente para convidar ao engajamento. Bem feito, este é o formato que faz os leitores tirarem print e compartilharem.

Após gerar

Informe ao usuário:

1. O caminho do arquivo
2. Como abri-lo
3. Uma coisa específica que ele pode pedir para melhorar (você não terminou — primeiros rascunhos de explicadores geralmente precisam de uma rodada de "a seção X parece fraca")
4. Como compartilhar — o arquivo é autossuficiente, então o usuário pode enviá-lo por e-mail, colocá-lo no Slack, hospedá-lo em qualquer lugar