Este site

O quarto disco é a página em que ele aparece, e ela não é um layout responsivo: são duas cenas distintas, cada uma desenhada para o que o aparelho faz bem. No desktop os discos são geometria WebGL com shader escrito à mão — a materialização é um teste de ruído simplex 3D em espaço de objeto, e o mesmo teste roda num material de profundidade próprio, senão um disco meio formado projetaria sombra sólida e a ilusão morreria. A câmera é perspectiva casada com pixel, o que mantém os botões acessíveis do DOM exatamente sobre a geometria em qualquer viewport. No celular a mesma história é contada sem Three.js: a pilha fica presa na tela com position:sticky, cresce a cada projeto e usa os discos já vistos, dessaturados, como indicador de progresso. O pin ali é do compositor, não do JavaScript — o que trava o toque no iOS é rodar código a cada evento de scroll, e o telefone dispara esses eventos por toda a inércia. Um terceiro caminho, sem animação nenhuma, atende quem pede movimento reduzido, e um guarda de FPS rebaixa o 3D para CSS em execução se a máquina não der conta.

cenas desenhadas separadamente: WebGL e CSS

2

cenas desenhadas separadamente: WebGL e CSS

no celular contra 1.472 KB no desktop

596 KB

no celular contra 1.472 KB no desktop

limite do guarda que rebaixa o 3D para CSS

25 fps

limite do guarda que rebaixa o 3D para CSS