AURÉA Joalheria

Vitrine premium · Espelho Virtual (try-on) · WhatsApp

Joalherias autorais vendem por foto no Instagram, sem uma vitrine elegante e sem o cliente conseguir “experimentar” a peça.

• 01A ÁUREA nasce com uma restrição de produto explícita: não é e-commerce. Não há carrinho, checkout nem gateway de pagamento, e toda intenção …+

  LER O DETALHE TÉCNICO

  A ÁUREA nasce com uma restrição de produto explícita: não é e-commerce. Não há carrinho, checkout nem gateway de pagamento, e toda intenção de compra converge para o WhatsApp do atelier. Essa regra está documentada no AGENTS.md do projeto ("Modelo de produto: VITRINE → WhatsApp... Não adicione carrinho/checkout sem pedido explícito") e é reforçada em código: um único módulo, src/lib/whatsapp.ts, monta toda mensagem, e o AGENTS.md proíbe montar links wa.me na mão em qualquer componente. A função productMessage() serializa a peça em três linhas fixas (Nome, Referência e Valor via formatCents()) para o vendedor identificar o item na hora, sem precisar abrir o site.

• 02A peça de maior risco técnico é o Espelho Virtual em /experimentar: try-on de brincos e colares pela câmera, 100% no navegador, sem enviar v…+

  LER O DETALHE TÉCNICO

  A peça de maior risco técnico é o Espelho Virtual em /experimentar: try-on de brincos e colares pela câmera, 100% no navegador, sem enviar vídeo a nenhum servidor. O VirtualMirror.tsx carrega o @mediapipe/tasks-vision (FaceLandmarker, delegate GPU) sob demanda via CDN e roda a detecção num loop de requestAnimationFrame, lendo landmarks fixos da malha facial (orelhas nos índices 234/454, queixo em 152, olhos em 33/263) para calcular largura do rosto e ângulo de inclinação da cabeça a cada frame. Um detalhe que só aparece em produção: os logs do MediaPipe e do TFLite ("XNNPACK delegate...") saem por console.error, e o overlay de dev do Next trata isso como erro. O código intercepta e filtra especificamente essas mensagens benignas por regex, sem silenciar erros reais.

• 03As joias não são fotos recortadas sobre o rosto. São desenhadas vetorialmente em canvas a cada frame, em src/lib/mirror/draw.ts, com gradien…+

  LER O DETALHE TÉCNICO

  As joias não são fotos recortadas sobre o rosto. São desenhadas vetorialmente em canvas a cada frame, em src/lib/mirror/draw.ts, com gradientes radiais para simular metal e pérola e um ponto especular fixo para dar brilho. A posição bruta dos landmarks é ruidosa, então uma suavização exponencial (EMA, fator 0.35) amortece o jitter frame a frame antes de desenhar. Cada tipo de peça tem constantes de encaixe calibradas manualmente como frações da distância entre orelhas (EARRING_DROP, NECK_SIDE_INSET, NECK_CENTER_DROP...). É ajuste fino de olho, não geometria derivada automaticamente, e fica documentado como "calibre aqui" no próprio arquivo.

• 04O restante do site é pensado para white-label: cor, marca, contato e textos vivem só em theme.config.ts e copy.ts (Tailwind v4 sem tailwind.…+

  LER O DETALHE TÉCNICO

  O restante do site é pensado para white-label: cor, marca, contato e textos vivem só em theme.config.ts e copy.ts (Tailwind v4 sem tailwind.config, variáveis --store-* espelhadas nos dois lugares), e nenhuma peça de catálogo depende de banco de dados. Cada card de produto usa um componente Showcase, que é um efeito de vitrine de museu em CSS 3D puro (transform-style: preserve-3d, seis camadas em profundidades distintas de translateZ, tilt que segue o cursor via Framer Motion useSpring). Ele simula peça sob vidro e holofote sem WebGL nenhum, e é desativado automaticamente sob prefers-reduced-motion.

CONSTRUÍDO COM — Next.js · React 19 · TypeScript · Tailwind v4 · MediaPipe · Framer MotionCÓDIGO ↗

Espelho Virtual · try-on por câmera

PROJETO AUTORAL · WHITE-LABEL

[ QUERO ALGO PARECIDO ]