# Página-fantasma WebGL — DOM invisível dá as caixas, o canvas pinta tudo

Aprendido em 2026-09-07 replicando buttermax.net (Hydra, Active Theory).
Réplica e medições em `~/Documents/MNZS/replicas/buttermax/`; o método de
isolamento está em `webgl-sites.md`.

- **Palco**: `<canvas>` fixo em `z-index: -1` pinta o amarelo `#ffd600`, o
  wordmark (textura PNG 5690×1105 num quad de 85vw), os modelos 3D e todo o
  texto (fontes MSDF). O `<main>` inteiro fica `visibility: hidden` e serve
  só de layout: cada quad da cena é mapeado à caixa do seu fantasma. Réplica:
  os fantasmas viram DOM visível, os modelos viram stills recortados do
  próprio render, o texto usa o mesmo woff2.
- **Header em `difference`**: nav fixa, cor `#ffd600`, `mix-blend-mode:
  difference` — lê preta sobre o amarelo e amarela sobre o preto do reel e
  do rodapé sem trocar de tema. As pílulas preenchem por `::before` em
  `scaleY` com origem trocada (`top` na entrada, `bottom` na saída),
  `.45s cubic-bezier(.215,.61,.355,1)`, medido em 80 ms.
- **Reel como janela fixa**: o vídeo é um quad fixo de 78,1vh de altura
  (largura `min(100vw, altura × 1,728)`, centro em 48,35vw) atrás de uma
  cópia desfocada a ~50 % de brilho com sombra ao redor; as seções acima e
  abaixo passam por cima a 1:1 e é isso que revela e esconde o vídeo — não
  há tween no quad.
- **Cortina de pontos (DotShader)**: grade de círculos que cresce do centro
  com franja RGB, ~300 ms entre o loader preto e a página amarela.
  Substituída por canvas 2D sem franja.
- **Card com disco de cor**: no hover, um círculo na `colors.primary` do
  projeto cresce atrás do device (49 / 88 / 98 / 100 % em 50 / 100 / 150 /
  200 ms, sai em ~150 ms) e um letreiro amarelo com o título corre dentro
  dele. Reproduzido com `clip-path: circle()` e um letreiro CSS.
- **Vidro PBR nos devices**: casca amarela translúcida com fresnel, mapa de
  espessura e frosted (`GlassShaderPBR` no `uil.json`). Fora do alcance do
  CSS; vira still.
- **Connotes**: o amarelo total com preto puro e uma única fonte grotesca
  dizem "manteiga" literalmente (gold standard, buttery smooth) e, por
  saturação, "produção" — nada é neutro, tudo é gesto. Os devices de vidro
  amarelo transformam cada case em um brinquedo colecionável: o estúdio se
  apresenta como fabricante de objetos, não de páginas. A luva no rodapé
  fecha o mesmo gesto — "reach out" é literal, uma mão. O header em
  `difference` é a marca dizendo que não muda de cor para ninguém: o fundo
  é que se inverte.