A tarefa
Montar agentes de IA em fluxos de trabalho é um trabalho que não tem o que fotografar. Não há produto para colocar na tela, as capturas são terminais e painéis, e sobre automação todo concorrente escreve as mesmas três frases. Uma página assim é passada de olho e fechada.
Por isso a primeira tela recebeu uma imagem em vez de uma explicação: um apicultor e uma colmeia. O enxame faz o trabalho, uma pessoa cuida da colmeia — e o leitor entende isso antes de ler a primeira linha.
A mecânica veio de um site que desmontamos pelo próprio código, e não no olho: uma máscara guiada pelo cursor que revela uma segunda fotografia sobre a primeira, um campo de ruído no lugar de um fundo chapado e um desenho de arame que aparece através dele. Achamos os shaders e as classes que desenham cada uma dessas coisas, copiamos as fórmulas e escrevemos o nosso código em volta. O tema, as fotos, a paleta, os textos e o capuz são nossos.
O que construímos
Uma tela, e o único controle é o cursor
Não há nada abaixo da tela, porque abaixo não há nada: a tela é uma só. À esquerda ficam o título, uma linha sobre o trabalho e um botão; à direita o homem, olhando direto para fora da tela.
A revelação não é um círculo de lanterna. Atrás do cursor vai um rastro com física própria: ele se espalha pelo caminho que a mão fez e se apaga sozinho em cerca de um terço de segundo, então o capuz existe exatamente enquanto o leitor está fazendo alguma coisa. Ao parar, o homem volta a estar sem capuz.
Debaixo de tudo isso estão duas fotografias: o mesmo homem sem capuz e com capuz. Elas coincidem pixel a pixel, então o rosto não se desloca nem um pixel enquanto o capuz aparece.
Dentro do rastro há uma colmeia de verdade
As abelhas aqui não são uma imagem nem um sprite. É uma cena 3D: catorze abelhas com corpo, listras, nervuras nas asas, antenas e patas, um favo com células de cera e mel e três flores em que elas pousam.
O mais difícil foi o jeito de voar. Qualquer deriva suave em seno se lê como natação, não como voo, então o voo é feito de arrancadas e pairadas: a abelha paira, estremece, depois se lança e freia. Seis arrancadas em dez seguem mais ou menos o rumo anterior, então o enxame se estende pelo quadro em vez de virar uma bola.
A cena é desenhada à parte, em fundo transparente, e misturada pela mesma máscara que traz o capuz: fora do rastro não há uma abelha sequer; dentro, há capuz, enxame, favo e flores.
O capuz é um desenho, e uma onda sobe por ele
Sobre o homem, o tempo todo, aparece um capuz de apicultor em arame: cúpula, faixa, aba, véu, gola. É uma malha de verdade, montada em código a partir de anéis, e não um contorno traçado por cima da foto: contorno tirado de foto dá sujeira e grão de pele, e nunca se lê como desenho.
O desenho é aceso por uma onda que sobe por ele. A onda é espaçada de modo que só exista uma crista no capuz por vez: a antiga sai antes de a nova entrar. Isso foi medido, não estimado — no passo que usamos, as duas pontas da onda ficam em seis por cento do pico, e na fase silenciosa o capuz não fica preto em lugar nenhum.
A malha é desenhada no espaço da própria fotografia, com uma lente longa, então ela se mantém sobre o homem em qualquer tamanho de janela. Sobre a chapa ela assenta com precisão de sete pixels.
A página não espera pelo cursor e fala três idiomas
Dois segundos depois que alguém para de mexer o mouse, a página passa a mexê-lo sozinha: um cursor próprio faz passagens pelo retrato em alturas diferentes, e o leitor que não tocou em nada mesmo assim vê o que a tela sabe fazer. Assim que uma mão de verdade se move, a página devolve o controle.
Quem pediu ao sistema menos movimento recebe o enxame e o campo parados e o rastro trocado por uma forma imóvel: a imagem fica, o movimento sai.
Russo, inglês e português são três documentos separados, não uma página que troca textos: cada um tem endereço próprio, título e descrição próprios e os links entre as versões — o que a busca precisa para manter a certa. O Lighthouse dá 100 à página pela marcação de busca.
Por dentro do projeto
A mecânica foi lida no código original, não adivinhada, e cada parte dela é conferida por medição. Veja o que os números dizem sobre quadros, máscara, chapas, capuz e os três idiomas.
Como a revelação é feita
A máscara é um rastro com física, não um círculo
Atrás do cursor roda uma pequena simulação de fluido: duas texturas em meia resolução trocam de lugar a cada quadro, o quadro anterior fica com 0,96 da força e uma cápsula é carimbada de onde o cursor estava até onde ele está.
Duas fotografias que coincidiram sozinhas
O homem sem capuz e o homem com capuz são dois quadros gerados de 1536 por 1024, o segundo feito a partir do primeiro como referência.
O capuz é uma malha, ajustada à foto em código
O capuz em arame tem 11 520 triângulos montados a partir de anéis: o véu alarga e volta a fechar, há costuras nos painéis, franzidos em cima e gola com cordão.
Uma onda por vez, e isso é uma afirmação medida
O espaçamento da onda que acende o desenho agora é calculado a partir da altura do próprio capuz: as duas pontas caem a 6 por cento, meio período cabe no capuz e, na fase silenciosa, o pixel mediano é fundo puro.
Velocidade
60 quadros por segundo, com dezesseis vezes de folga
Medido numa placa de vídeo real em 1440 por 900 com trava de atualização: 60,0 quadros por segundo em repouso e 59,2 com o rastro aberto e o enxame vivo.
O enxame
Catorze abelhas que voam como abelhas
O enxame é uma cena à parte, e foi aceito por números: o passo mediano é catorze vezes menor que o pico, ou seja, as arrancadas são mesmo tão mais rápidas que as pairadas; mais de 190 viradas mais fechadas que 90 graus em meio minuto; nenhuma abelha saindo do volume e nenhuma atravessando o favo; pousos em cerca de quatro por cento do tempo.
Idiomas
Três idiomas, três documentos
Russo, inglês e português são impressos na montagem como três arquivos de verdade: cada um com endereço próprio, atributo de idioma, título, descrição e link canônico, mais os links entre as versões. Abrir a versão em inglês
Acessibilidade
Menos movimento quer dizer menos movimento
Quem pediu ao sistema menos movimento recebe o campo, a onda e o enxame todos congelados, e o rastro trocado por uma forma imóvel.
O que saiu disso
- A cena segura 60 quadros por segundo, e 59 com o rastro aberto, num desktop.
- A folga de desenho é de dezesseis vezes antes de os 60 quadros correrem risco.
- Lighthouse no desktop: 100 de marcação de busca, 96 de boas práticas, com deslocamento de layout zero.
- Uma tela carrega a oferta inteira em três idiomas, sem uma linha de rolagem.
A tela faz o que uma explicação não consegue: o leitor move o cursor, vê surgir uma colmeia onde havia um homem de camiseta e entende a ideia do enxame e do apicultor sem que ninguém a diga. Sob o retrato há um botão, e ele leva direto para a conversa.
