O logo virou a forma de navegar.

11Como foi desenvolvido

Do grupo de WhatsApp ao site no ar.

1. 01

   O conteúdo veio antes do layout

   As mensagens do grupo, os vídeos do YouTube, o catálogo da editora e a busca na Amazon viraram um único arquivo de conteúdo, gerado por script. Cada um dos 16 episódios foi conferido. Quando faltava descrição, o assunto foi identificado pelos quadros do próprio vídeo.

   

2. 02

   A abertura foi escrita à mão, para a placa de vídeo

   Os círculos não são vídeo nem animação pronta. São 190 linhas de WebGL puro, sem biblioteca: a mesma cena do programa é desenhada dentro de cada círculo, em tempo real, seguindo a rolagem.

   // os dois círculos e a interseção entre eles
   float dA = length(p - uA.xy) - uA.z, dB = length(p - uB.xy) - uB.z;
   float mA = 1. - smoothstep(-aa, aa, dA), mB = 1. - smoothstep(-aa, aa, dB);
   float mL = mA * mB;
   
   // cada lado com a cor do seu olhar: navy e dourado
   vec3 a = mix(cA, duo(cA, navyS, navyL), tA);
   vec3 b = mix(cB, duo(cB, ouroS, ouroL), tB);
   
   // a lente: azul do logo, com a cena respirando por baixo
   vec3 lente = mix(vec3(.03,.08,.16), vec3(.07,.15,.28), smoothstep(.1, 1., lum));

3. 03

   Vídeo que abre no celular

   Cada detalhe de vídeo foi recortado do próprio programa e comprimido para no máximo 3 MB. O iPhone só reproduz vídeo quando o servidor entrega o arquivo por trechos, e a hospedagem não fazia isso sozinha. Escrevemos essa parte para que o site funcionasse no iPhone.

   O livro do ano ganhou uma exibição à parte: A Ferida Invisível tem a história animada dentro do site, entregue em partes pequenas para começar a tocar rápido.

   

4. 04

   Páginas prontas, servidas perto de quem acessa

   Cada página é montada no servidor, na rede da Cloudflare, e chega pronta ao navegador. O texto não depende do JavaScript para aparecer, o que favorece a velocidade e a leitura pelo Google. O conteúdo fica em um banco de dados, separado do código.