Anatomia da Singularidade

O instrumento cinematográfico

A narrativa da marca é o horizonte de eventos: atração, massa, profundidade, luz na borda do escuro. A Singularidade leva isso ao limite literal — em vez de ilustrar um buraco negro, o site é um: a página inteira é uma queda em direção ao centro, e o texto é um manifesto em cinco movimentos, como uma partitura.

Três dials calibram a direção. Variância alta (composições assimétricas), movimento quase máximo (a cena inteira responde ao scroll), densidade mínima (cada tela respira como sala de cinema).

Vazio quente, âmbar incandescente

Nada de preto absoluto: o fundo é um vazio quente, dois passos acima do #000. A família de acento é uma só — o âmbar do disco de acréscimo, que esquenta até quase branco. Sombras e brilhos são tingidos de âmbar, nunca cinza.

Os contrastes medidos sobre o vazio ficam todos acima do mínimo de 4,5:1 exigido para texto (WCAG AA).

Três vozes, uma partitura

Lente gravitacional em um fragment shader

O campo é um único plano WebGL (three.js) com shader próprio. Um starfield procedural é distorcido por uma pseudo-lente: cada pixel desloca sua amostra do céu na direção do centro, com força proporcional a 1/r, e ganha um giro perto do anel de fótons. O disco de acréscimo é ruído fbm esticado em faixas, com um lado mais quente — o falso efeito doppler do material que se aproxima.

/* deflexão: o céu escorrega na direção da massa */
vec2 sp = p - dir * (k / max(r, 0.05));
float ang = min(0.32 * k / max(r*r, 0.004), 2.4);
sp = c + mat2(cs,-sn,sn,cs) * (sp - c);   /* giro no anel */

/* doppler falso: o lado que vem na sua direção queima mais */
float doppler = 1.0 + 0.8 * (q.x / max(rd, 1e-4));

O scroll não anima elementos soltos: ele alimenta um único uniforme, uFall, que leva a câmera da aproximação (buraco pequeno, fora do eixo) até depois do horizonte (tela quase negra, uma linha incandescente). O GSAP ScrollTrigger faz o scrub; o shader interpola.

ScrollTrigger.create({
  trigger: '#fall', start: 'top top', end: 'bottom bottom',
  scrub: 0.5,
  onUpdate: (self) => EZON_FIELD.setFall(self.progress),
});

Dois cuidados invisíveis: dithering no shader (mata o banding dos degradês quase pretos) e um pôster estático em CSS para quem prefere movimento reduzido, não tem WebGL ou perde o contexto gráfico.

Cenas cheias, legendas na borda

Cada movimento é uma cena de tela cheia. As legendas nunca ficam no centro: elas se prendem às bordas — canto inferior esquerdo, canto superior direito — enquanto o numeral serifado gigante deriva em parallax no sentido oposto. O único elemento centralizado do site é o final, porque ali o centro é o assunto.

Na borda direita, um trilho de progresso marca os cinco movimentos; no canto inferior esquerdo, um velocímetro em mono registra a queda. Instrumentação discreta, como cabine de observação.

Com movimento reduzido ativo, toda a coreografia desliga e o conteúdo inteiro fica visível de imediato — a leitura nunca depende da animação.

Como o Fable construiu

1. Contrato criativo primeiro. As cinco direções foram escritas antes de qualquer pixel — paleta, tipos, técnica e layout de cada site. Toda decisão responde a esse documento.

2. Identidade preservada na fonte. O lockup oficial da Ezon Partners entra como SVG inline com fill=currentColor — tinge, mas nunca distorce.

3. Fontes próprias, subset latino. Instrument Serif, Geist e Geist Mono auto-hospedadas em woff2, com acentos do português verificados no subconjunto.

4. Bibliotecas locais. three.js e GSAP ScrollTrigger vendorizados no próprio deploy — zero dependência de CDN de terceiros.

5. Três passadas de iteração. Captura de tela, crítica contra o contrato (ritmo tipográfico, contraste, zonas mortas, clichês de IA), correção — três vezes, antes do deploy.

6. Portas de qualidade. Contraste mínimo 4,5:1, nada de #000/#FFF absolutos, acento em no máximo dois ou três elementos por tela, movimento reduzido respeitado, colapso mobile-first.