O que o efeito faz
A página mostra uma foto em tela cheia. Quando o cursor entra, surge uma bolha de contorno irregular que acompanha o movimento e deixa atrás de si uma cauda que afina. Dentro dela aparece uma segunda foto, com leve paralaxe. Na borda, as duas imagens se deformam como se vistas através de vidro.
Se o cursor fica parado por 2 segundos, a mancha some devagar. Ela volta assim que o mouse se mexe. O pen usa eventos de ponteiro, então funciona também com toque; no toque, a mancha some quando o dedo sai da tela.
Como funciona
Tudo acontece num único shader de fragmento, aplicado a um plano que cobre a tela, com câmera ortográfica do Three.js (versão 0.160). Não há máscara em CSS nem recorte de DOM: para cada pixel, o shader decide se ele pertence à mancha e de qual imagem tira a cor.
O contorno vem de um campo de distância. Há um círculo na posição do cursor e mais 11 cápsulas afuniladas ligando 12 pontos do rastro, fundidas numa forma só com união suave. Um ruído fractal, com quatro camadas e animado no tempo, empurra essa borda para dentro e para fora. É isso que dá o aspecto de líquido.
A refração usa a direção do mesmo campo: na faixa da borda, o shader desloca a leitura das duas imagens em sentidos opostos. Os pontos do rastro seguem uns aos outros em passos fixos de 1/120 de segundo, para o movimento não mudar com a taxa de quadros da máquina.
Os parâmetros do painel
Um painel lil-gui, fechado por padrão, expõe os parâmetros: raio, distorção, escala e velocidade do ruído, suavidade da borda, refração, paralaxe, suavidade do cursor e comprimento, persistência e afunilamento do rastro. Dois botões trocam as imagens externa e interna por arquivos do próprio computador, lidos no navegador. As fotos padrão vêm do Unsplash.
Quem é sabosugi
No X, a conta aparece como Sabo Sugi / Three.js & Shaders. O perfil do CodePen diz que todo o código publicado ali é livre para uso e pede apoio por PayPal. Nenhuma das páginas consultadas informa cidade, país ou site próprio.
Licença
Pela documentação do CodePen, pen público sai automaticamente sob licença MIT: o código pode ser usado, alterado e redistribuído, desde que o aviso de copyright e a licença acompanhem as cópias. O Liquid Mask está marcado como público no editor.
