Arcanae Craft

Visão geral

Meu Papel

Principais Contribuições

• Uma abertura iluminada como galeria. A home abre com O Louco sob um foco de luz. O primeiro quadro já é uma imagem parada da parede iluminada, então a página nunca mostra uma caixa vazia enquanto o three.js carrega; a luz ao vivo surge por cima, e aparelhos sem placa de vídeo ficam com a imagem parada. A introdução que conta até 100 por cento está no HTML desde o primeiro desenho, e quem volta ao site ou usa movimento reduzido pula essa etapa.
• Movimento de rolagem que não quebra. Perto do fim, uma roda com as 22 estátuas gira com a rolagem, feita com GSAP ScrollTrigger e Lenis. Dois casos de borda a quebraram e foram corrigidos na causa: depois de recarregar no meio da página, a rolagem suave do CSS animava o salto que o ScrollTrigger usa para medir, então o comportamento nativo da rolagem fica ligado enquanto o Lenis roda; e com movimento reduzido o anel invadia as seções seguintes, então a versão reduzida tira só o movimento e mantém o espaço de que o layout depende.
• Um carrinho a um toque. A gaveta do carrinho nativo fica no componente da navbar em todas as páginas, o padrão de que uma loja precisa mesmo custando um pouco de velocidade. O efeito de vidro do menu prendia a gaveta na altura do menu, porque um backdrop filter transforma o elemento no bloco de referência dos filhos fixos, então o desfoque foi para uma camada própria atrás do menu. O checkout tira a navegação da loja e mantém só a marca, para nada desviar quem está comprando.
• Páginas de produto feitas para escolher. A galeria amplia ao passar o mouse e abre em tamanho cheio, cada estátua mostra a sua altura, a coleção filtra as peças em estoque e as feitas sob encomenda, e as peças relacionadas mantêm a visita. As peças que ainda esperam um render em 3D mostram uma única imagem de frente, inteira, nunca cortada.
• Imagens rápidas sem perder detalhe. As fotos dos produtos entraram por importação de CSV, e o Webflow não cria versões responsivas de imagens importadas, então o original de 2000 px chegava até a uma miniatura de 107 px. Enviá-las de novo pelos campos do CMS trouxe de volta os tamanhos responsivos e, com fontes servidas pelo próprio site e o 3D carregado depois da página, a página de produto ficou leve no celular.

Cartão do comprador

Todo pedido leva um cartão A6 na caixa. A frente agradece ao comprador e diz como cuidar da peça, e o verso mostra os 22 Arcanos Maiores com um QR code para a coleção inteira.