OctusForge — Octus-Naut
Loja de produto único para um toyart colecionável de tiragem limitada: a peça, o processo artesanal por trás dela e a compra, em desktop e mobile.
- Papel
- Frontend, freelance
- Cliente
- Tiragem
- 100 peças numeradas
O problema
Um objeto colecionável feito à mão não se vende por especificação. O comprador precisa entender por que aquela peça custa o que custa: quantas existem, quem modelou, quantas etapas manuais separam o modelo 3D do boneco pintado que chega na caixa.
A página tinha então dois trabalhos ao mesmo tempo: contar essa história e vender, sem que a narrativa atrapalhe a compra nem a compra amasse a narrativa.
O que faz
- Página do produto com a peça, a tiragem limitada e o preço em destaque.
- Seção do processo artesanal: planejamento, modelagem 3D e pintura à mão.
- Visualização em três dimensões da peça, com renderização no navegador.
- Fluxo de compra desenhado de ponta a ponta — entrega, pagamento, revisão e confirmação do pedido.
- Layout pensado dos 320 px do celular pequeno até o monitor largo.
Como foi construído
React com TypeScript sobre Vite, Tailwind para o sistema visual, componentes acessíveis de base e animação com Framer Motion. Publicação na Vercel.
O 3D no navegador, não um vídeo do 3D
A peça é modelada em três dimensões antes de existir em resina, e essa etapa é parte do argumento de venda. Em vez de gravar um giro em vídeo, a página carrega o próprio modelo e o renderiza no navegador, com iluminação por imagem — quem chega pode girar a peça em vez de assistir alguém girando.
O trade-off é peso: modelo e mapa de ambiente custam banda e memória num aparelho modesto, enquanto um vídeo custaria uma fração. A troca só se paga porque o produto é um só e a página inteira existe para ele.
Stack
Interface
Três dimensões
Publicação
Telas
Telas exportadas do design no Figma. As de checkout e confirmação mostram o fluxo de compra desenhado de ponta a ponta — apresentadas como design, não como registro do produto no ar.