---
slug: notion-editorial
nome: Notion editorial
descricao: papel creme, serifa elegante, traço fino desenhado à caneta, marca-texto amarelo e muito respiro
familia: SaaS e tecnologia
versao: 1
quando:
  - "vídeo de app de notas, produtividade ou conhecimento"
  - "explicar um processo em 3 passos com calma"
  - "anúncio editorial, humano e minimalista de um produto digital"
  - "quero cara de caderno, caneta e marca-texto"
  - "lançamento de newsletter, curso ou ferramenta de escrita"
nao_serve:
  - "vídeo de energia alta, 3D ou muito colorido"
  - "fundo escuro (use vercel-mono ou saas-linear)"
---

# Notion editorial

Papel creme (`#F7F3EA`), pontinhos de caderno quase invisíveis e **serifa elegante (Cormorant 700)** em tinta quente `#1F1B16`. A identidade é o **traço desenhado à caneta**: caixas, setas, círculos, sublinhados ondulados e ícones que **se desenham ao vivo** (traço com tremor fixo, `pathLength` de 0 a 1), mais um **marca-texto amarelo `#FFD66B`** que preenche por trás da palavra-chave e o **lápis vermelho `#E8553E`** só nos riscos e ticks. Movimento calmo: palavras que sobem 40 px com leve desfoque, nada de overshoot forte. Cada cena tem **um herói e muito respiro** (35–45% de espaço vazio, margens de 96 px).

## Como montar um vídeo com este kit

1. **Leia o pedido e o roteiro.** Corte cada fala em frases curtas. Uma frase = um plano.
2. **Escolha as batidas** em `receita.json`. Cada batida diz quanto dura e quais elementos servem.
3. **Escreva o plano de cenas** (`plano.json`, mesmo formato de `exemplos/plano.json`): `de`/`ate` em quadros, `entrada`, `camadas` (elemento + props) e `sons`. Os cortes seguem a voz ou a batida da trilha (1 batida = 15.4 quadros).
4. **Renderize** com `<Montagem plano={...} arquivos={...} />`.
5. **Confira** um quadro por cena contra `regras/`: área segura, herói grande, nada parado, nada cortado.

## Elementos

| elemento | o que faz | batidas |
|---|---|---|
| `TextoSerifa` | frase em serifa palavra por palavra; `*palavra*` recebe marca-texto, sublinhado ondulado ou círculo de caneta | gancho, apoio |
| `BlocoNota` | página de papel com título e tarefas cujos quadradinhos são riscados à mão | pagina |
| `Diagrama` | 2–4 caixas desenhadas à caneta ligadas por setas curvas; a última com marca-texto | diagrama |
| `RabiscoIcone` | lâmpada, estrela ou foguete desenhados traço a traço, com marca-texto e legenda | ideia |
| `PassosNumerados` | 3 passos com numeral itálico de 280 px e sublinhado de caneta | passos |
| `AssinaturaMarca` | logo + nome com sublinhado de caneta + frase em itálico + endereço | marca (última) |
| `desenho (ferramentas)` | `Traco`, `retangulo`, `elipse`, `ondinha`, `seta`, `linha`: monte novos rabiscos | base de qualquer rabisco |
| `Fundo`, `Camera`, `Cena` | o chão, a deriva da câmera e a janela de cada plano | todas |
| `Efeito`, `Trilha` | sons e trilha do kit | todas |

## Proibido

- Fundo escuro, 3D, neon, degradê, glow.
- Linha perfeita de régua: todo traço tem o tremor de `desenho.tsx`.
- Mais de um herói por cena; mais de um apoio; elemento a menos de 96 px da borda.
- Overshoot forte, tremor de câmera, corte rápido: o ritmo é calmo (1,3–1,6 s por cena).
- Mais de uma palavra destacada por frase; mais de 3 cores (tinta, amarelo, vermelho).
- Texto fora da área segura (168–1330 px, 96 px nas laterais).