Componentes

Bonequinho

Stick figure no estilo Brunson/Hormozi. 6 estados emocionais. Use pra representar o leitor, voce mesmo, ou personas. SVG puro, zero dependencia.

neutro

feliz

triste

confuso

pensando

eureka

Codigo

<Bonequinho estado="confuso" rotulo="leitor antes" />
<Bonequinho estado="eureka" tamanho="lg" cor="marca" rotulo="depois" />

// estados:  "neutro" | "feliz" | "triste" | "confuso" | "eureka" | "pensando"
// tamanho:  "sm" | "md" | "lg"
// cor:      "tinta" | "marca" | "grafite"

Cena

Agrupa multiplos bonequinhos lado a lado com setas automaticas. Vibe whiteboard. Use pra representar evolucao, processo, ou grupos.

Codigo

<Cena legenda="A jornada do leitor">
  <Bonequinho estado="confuso"  rotulo="janeiro" cor="grafite" />
  <Bonequinho estado="pensando" rotulo="marco"   cor="grafite" />
  <Bonequinho estado="neutro"   rotulo="abril" />
  <Bonequinho estado="eureka"   rotulo="maio"    cor="marca" />
</Cena>

Jornada

Atalho pre-fabricado pro padrao Hormozi: de A pra B atraves de C. O bonequinho da esquerda fica cinza, o da direita ganha vermelho marca.

Codigo

<Jornada
  estadoAntes="confuso"
  rotuloAntes="40 abas, 0 lembrancas"
  estadoDepois="eureka"
  rotuloDepois="3 anotacoes que cabem na cabeca"
  transformador="caderno publico"
  legenda="quem escreve, lembra"
/>

StatHero

Numero gigante pra criar pausa dramatica. Funciona com qualquer dado — porcentagem, valor, multiplicador.

Codigo

<StatHero
  valor="160x"
  legenda="o quanto construtores de IA ganharam em produtividade"
  fonte="McKinsey, 2025"
/>

Versus

Comparativo 2 colunas estilo Hormozi. A direita ganha o destaque (a "solucao"). Use pra forcar o leitor a se posicionar.

Codigo

<Versus
  titulo="Duas formas de viver com informacao"
  esquerda={{
    rotulo: "Scroll infinito",
    items: ["Aceita tudo", "Algoritmo decide", "Esquece em 7 dias"]
  }}
  direita={{
    rotulo: "Caderno publico",
    items: ["Filtra antes", "Voce decide", "Lembra do que leu"]
  }}
/>

Fluxo

Diagrama de etapas conectadas. Horizontal no desktop, vertical no mobile. Use pra explicar processos.

Codigo

<Fluxo etapas={[
  { rotulo: "Captura", descricao: "Feedly + RSS" },
  { rotulo: "Cerebro", descricao: "Obsidian" },
  { rotulo: "Rascunho", descricao: "Claude" },
  { rotulo: "Publicacao", descricao: "Pages", acento: true },
]} />

Anotacao

Destaque rabiscado, vibe Brunson. Use pra colocar um aviso, ideia ou alerta no meio do texto. Tem leve rotacao pra parecer "feito a mao".

Codigo

<Anotacao tipo="aviso" cor="amarelo">
  Texto da anotacao
</Anotacao>

// tipo: "aviso" | "ideia" | "destaque" | "atencao"
// cor:  "amarelo" | "vermelho" | "papel"

AntesDepois

Comparativo split 50/50. O "depois" ganha destaque com borda vermelha. Use pra mostrar transformacao concreta.

Codigo

<AntesDepois>
  <Fragment slot="antes">
    <p>conteudo do antes...</p>
  </Fragment>
  <Fragment slot="depois">
    <p>conteudo do depois...</p>
  </Fragment>
</AntesDepois>

PullQuote

Citacao destacada. Use pra realcar uma frase que voce quer que o leitor decore.

Codigo

<PullQuote fonte="opcional">
  Frase que voce quer que cole na cabeca do leitor.
</PullQuote>

Como usar dentro de uma edicao

No topo do arquivo MDX, importa o que voce vai usar:

---
titulo: "Minha edicao"
edicao: 2
data: 2026-05-31
---

import StatHero from "@components/StatHero.astro";
import Versus from "@components/Versus.astro";
import Fluxo from "@components/Fluxo.astro";
import Anotacao from "@components/Anotacao.astro";
import AntesDepois from "@components/AntesDepois.astro";
import PullQuote from "@components/PullQuote.astro";
import Bonequinho from "@components/Bonequinho.astro";
import Cena from "@components/Cena.astro";
import Jornada from "@components/Jornada.astro";

Aqui comeca o texto do jornal...

<StatHero valor="100%" legenda="aumento de leitores" />

Mais texto...

<Jornada
  estadoAntes="confuso"
  rotuloAntes="ontem"
  estadoDepois="eureka"
  rotuloDepois="hoje"
  transformador="o que mudou"
/>

<Anotacao tipo="aviso">isso importa</Anotacao>