Anatomia
da gravidade líquida

§1 A direção

Cada um dos cinco estudos responde à mesma pergunta — como o Horizonte de Eventos vira design? — com uma física diferente. Aqui, a resposta é sensorial: o campo gravitacional não se desenha, se materializa. Ferrofluido só toma forma diante de um ímã; a página inteira é esse ímã.

Variância

9 — pranchas sangram para fora do grid, tipo contorna o fluido

Movimento

7 — coreografia de scroll, marquee cinético, CTA magnético

Densidade

3 — vazios generosos; o escuro é parte da composição

§2 A paleta

Base acromática em azul-negro — nunca #000 absoluto — e uma única matéria iridescente, tratada como substância física, não como "cor de destaque". Ela só existe em três lugares: no fluido do herói, em uma régua e no CTA. Todo o resto fica em silêncio.

• #0A0A12 tinta — fundo
• #12121E elevado
• #E9E9F2 texto
• #8B8B9E apagado

Regra de orçamento: no máximo 2–3 ocorrências do acento por viewport. Disciplina cromática é o que faz a iridescência parecer material — e não enfeite.

§3 A tipografia

Unbounded (display) tem curvatura expansiva, quase orbital — títulos que parecem deformados pela própria massa. Schibsted Grotesk (texto) equilibra com neutralidade nórdica. Ambas variáveis, auto-hospedadas, subset latino.

§4 A matéria gerada

MAGNETAR é o estudo do pipeline generativo — os outros quatro são 100% procedurais (shader, SVG, canvas). Aqui, três naturezas-mortas de ferrofluido foram geradas por IA, dirigidas por prompt para casar com a paleta, e o herói ganhou movimento:

1. Stills — GPT Image 2: picos, toro e espira de cromo líquido, rim light magenta/ciano sobre azul-negro.
2. Movimento — Higgsfield (Seedance Pro): loop de 5s / 1080p semeado pelo still do herói.
3. Compressão — WebP q82: o still de 1,2 MB caiu para 36 KB (−97%). Os originais PNG ficam fora do deploy.

O problema da emenda

O loop gerado não fecha: o último quadro diverge do primeiro (SSIM 0,82 · PSNR 18,7 dB — medido com ffmpeg). Um <video loop> nativo daria um salto visível a cada 5 segundos. A solução: dois vídeos sobrepostos em crossfade — 0,85s antes do fim, o segundo começa do zero e recebe a opacidade; os papéis se invertem, para sempre.

front.ontimeupdate = () => {
  if (front.currentTime > front.duration - FADE) {
    back.currentTime = 0; back.play();
    back.classList.add('is-front');     // CSS: opacity 1, transition .85s
    front.classList.remove('is-front');
    [front, back] = [back, front];      // troca de papéis, loop infinito
  }
};

§5 As técnicas

Integração por blend-mode

O vídeo nunca é um retângulo colado: com mix-blend-mode: screen, os pretos do vídeo afundam na tinta da página e só o fluido iluminado permanece. A segunda linha do título usa difference — as letras interferem com os picos que passam por baixo.

.hero-vid    { mix-blend-mode: screen; }   /* preto do vídeo = fundo da página */
.line--blend { mix-blend-mode: difference; } /* o tipo reage ao fluido */

Canvas de gradiente-malha

Atrás do manifesto, quatro blobs radiais — todos na família azul-negra, nunca no acento — derivam por seno/cosseno em composição aditiva. Renderizado a ¼ da resolução, pausado fora da tela e em abas ocultas.

const x = (b.sx + Math.sin(t*.07 + b.ph) * .14) * w;  // deriva orgânica
ctx.globalCompositeOperation = 'lighter';             // soma de luz
canvas.width = rect.width / 4;                        // ¼ res: barato na GPU

CTA magnético

Num raio de 150px, o botão é puxado na direção do cursor (38% do desvio), com interpolação em requestAnimationFrame — nada de listeners de scroll, nada de re-render. Desligado em telas de toque e com movimento reduzido.

if (Math.hypot(mx, my) < 150) { tx = mx * .38; ty = my * .38; }
cx += (tx - cx) * .14;  // mola: aproximação exponencial
el.style.transform = `translate(${cx}px, ${cy}px)`;

Marquee cinético

A banda "MASSA · ATRAÇÃO · PROFUNDIDADE" deriva a 70px/s. A velocidade do seu scroll (via ScrollTrigger.getVelocity()) injeta um impulso que acelera — ou inverte — a direção, decaindo de volta ao ritmo base.

Tipo que contorna o fluido

Na prancha 02, o texto não respeita a caixa da imagem: um shape-outside: polygon(…) traça a silhueta diagonal da espira e o parágrafo escorre por ela — "quando a matéria dobra, a tipografia acompanha".

§6 Os limites (de propósito)

• Movimento reduzido — prefers-reduced-motion desliga vídeo (vira o still), canvas, marquee, magnetismo e coreografia. A página inteira funciona parada.
• Sem JavaScript — todo o conteúdo é visível; as animações apenas somam.
• Contraste — corpo 12,8:1, texto apagado 5,9:1; nada abaixo de 4,5:1.
• Peso — stills em WebP (−97%), fontes subset latino, zero CDN, zero rastreadores.

Construído com Fable 5 em uma sessão — direção, prompts de imagem, código e revisão em três passadas de screenshot.