Arcanae Craft | Case Study

Visão geral

A Arcanae Craft faz estátuas dos 22 Arcanos Maiores do tarô, impressas em resina e pintadas à mão na Corunha, na Espanha, a partir do baralho que Pamela Colman Smith ilustrou em 1909. A loja precisava fazer duas coisas que costumam brigar entre si: mostrar cada estátua como uma peça de galeria, no visual clássico da marca, e manter curto e rápido no celular o caminho da primeira tela ao checkout. Ela roda no Webflow Ecommerce nativo, com catálogo, carrinho, checkout e zonas de frete, e uma cena em 3D iluminada na home.

Meu Papel

Levei a loja da primeira pesquisa ao site publicado. Avaliações de clientes de lojas do nicho e as lojas concorrentes definiram a copy, o FAQ e o preço, e um mapa de palavras-chave fixou o termo de busca de cada página. Desenhei a linguagem visual e uma escala tipográfica de sete passos, construí cada página como protótipo em código com o auxílio do Claude Code e medi em cada breakpoint, e depois refiz tudo no Webflow com classes do Client-First, Variables, o CMS e o Ecommerce nativo, conferindo o site publicado contra o protótipo pixel a pixel.

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.