Cardume
Uma loja de aquarismo inteira, do hero ao Pix: um koi de verdade nada atrás do cursor, a loja avisa quando um peixe come o outro e o aquário montado ganha vida na tela.
A Cardume é uma loja FICTÍCIA, feita para este portfólio. Os produtos e preços são de exemplo e o Pix do checkout não cobra nada. As fotos das espécies são do Wikimedia Commons, com os créditos no rodapé do site.
- No ar na Vercel, inteiro no navegador: 29 produtos, carrinho, ficha técnica e checkout com Pix de demonstração
- O koi do hero é uma foto real recortada e fatiada em 32 tiras que seguem a curva do corpo
- 13 espécies recortadas das fotos nadam, comem e se assustam no aquário que a pessoa monta
- 60 quadros por segundo medidos no hero, nas categorias e no aquário montado
Como era antes.
Eu queria um e-commerce no portfólio que não parecesse mais um template de loja. Aquarismo dava o assunto certo: é um produto vivo, bonito de ver e cheio de regra escondida, porque peixe bonito no aquário errado morre ou come o vizinho.
Quem começa no hobby compra pela vitrine e descobre o problema em casa. O neon e o acará-bandeira nadam juntos na loja; meses depois o acará cresce e o neon vira comida. Uma loja boa precisava mostrar o peixe e, ao mesmo tempo, avisar isso antes da compra.
O que mudou.
O site inteiro mora debaixo d’água. Um único fundo em WebGL desenha as cáusticas e as bolhas atrás de todas as dobras e escurece conforme a página desce, como quem mergulha. No hero, o nome da loja fica enorme e um koi nada por cima das letras atrás do cursor. Tentei primeiro um koi desenhado em código e ficou com cara de ilustração. A versão final é uma foto real, recortada do fundo com o Vision do próprio Mac e fatiada em 32 tiras que acompanham uma cadeia de pontos: a cabeça persegue o cursor e uma onda cresce até a cauda.
Cada peixe tem ficha técnica com temperatura, pH, tamanho adulto e temperamento em réguas visuais. Uma regra compara os peixes do carrinho entre si e avisa quando a água é diferente, quando a temperatura não fecha ou quando um pode comer o outro. O mesmo aviso aparece no Monte seu aquário, onde a pessoa escolhe tanque, equipamento, plantas e peixes e vê o resultado vivo: os peixes recortados das fotos nadam, vão atrás da ração quando ela clica na água e fogem se o cursor passa rápido.
Tudo roda no navegador, sem servidor: o carrinho fica salvo na própria máquina e o checkout vai até um Pix de demonstração que avisa, com todas as letras, que nada é cobrado. A tipografia passou por três tentativas até chegar numa serifa grossa, a Zodiak, com uma palavra em itálico ciano em cada título.
Por dentro.
A promessa da loja e as quatro garantias de entrega de peixe vivo, ao lado do vídeo que começou o projeto. 
As categorias são uma lista tipográfica. A foto de cada uma segue o cursor com atraso, como algo boiando, e ondula como vista através da água. 
A loja: busca que aceita nome popular ou científico, filtros por água e um botão que solta uma bolha até o carrinho. 
A ficha técnica mostra a faixa ideal de cada espécie em réguas e já diz se o peixe convive com o que está no carrinho. 
O vídeo mostra um acará-bandeira entre os neons, e o texto aponta o problema: quando ele crescer, o neon vira comida. É a ponte para o aviso de compatibilidade. 
O aquário que a pessoa monta aparece vivo. A barra mede a ocupação pela regra de um centímetro de peixe por litro, e os avisos mudam a cada peixe que entra. 
No carrinho, a mesma regra: aqui ela pega a combinação do vídeo. O frete com garantia de peixe vivo some acima de R$ 300. 
No celular o koi passeia sozinho e segue o toque, e o aquário montado fica acima das escolhas.