AURÉA Joalheria

Vitrina premium · Espejo Virtual (try-on) · WhatsApp

Las joyerías de autor venden por foto en Instagram, sin una vitrina elegante y sin que el cliente pueda “probarse” la pieza.

• 01ÁUREA nace con una restricción de producto explícita: no es e-commerce. No hay carrito, checkout ni gateway de pago, y toda intención de com…+

  LEER EL DETALLE TÉCNICO

  ÁUREA nace con una restricción de producto explícita: no es e-commerce. No hay carrito, checkout ni gateway de pago, y toda intención de compra converge en el WhatsApp del atelier. Esa regla está documentada en el AGENTS.md del proyecto ("Modelo de producto: VITRINA → WhatsApp... No agregue carrito/checkout sin pedido explícito") y se refuerza en código: un único módulo, src/lib/whatsapp.ts, arma todo mensaje, y el AGENTS.md prohíbe armar links wa.me a mano en cualquier componente. La función productMessage() serializa la pieza en tres líneas fijas (Nombre, Referencia y Valor vía formatCents()) para que el vendedor identifique el ítem al instante, sin necesidad de abrir el sitio.

• 02La pieza de mayor riesgo técnico es el Espejo Virtual en /experimentar: try-on de aretes y collares por la cámara, 100% en el navegador, sin…+

  LEER EL DETALLE TÉCNICO

  La pieza de mayor riesgo técnico es el Espejo Virtual en /experimentar: try-on de aretes y collares por la cámara, 100% en el navegador, sin enviar video a ningún servidor. El VirtualMirror.tsx carga @mediapipe/tasks-vision (FaceLandmarker, delegate GPU) bajo demanda vía CDN y corre la detección en un loop de requestAnimationFrame, leyendo landmarks fijos de la malla facial (orejas en los índices 234/454, mentón en 152, ojos en 33/263) para calcular el ancho del rostro y el ángulo de inclinación de la cabeza en cada frame. Un detalle que solo aparece en producción: los logs de MediaPipe y de TFLite ("XNNPACK delegate...") salen por console.error, y el overlay de dev de Next lo trata como error. El código intercepta y filtra específicamente esos mensajes benignos por regex, sin silenciar errores reales.

• 03Las joyas no son fotos recortadas sobre el rostro. Se dibujan vectorialmente en canvas en cada frame, en src/lib/mirror/draw.ts, con gradien…+

  LEER EL DETALLE TÉCNICO

  Las joyas no son fotos recortadas sobre el rostro. Se dibujan vectorialmente en canvas en cada frame, en src/lib/mirror/draw.ts, con gradientes radiales para simular metal y perla y un punto especular fijo para dar brillo. La posición bruta de los landmarks es ruidosa, así que un suavizado exponencial (EMA, factor 0.35) amortigua el jitter frame a frame antes de dibujar. Cada tipo de pieza tiene constantes de encaje calibradas manualmente como fracciones de la distancia entre orejas (EARRING_DROP, NECK_SIDE_INSET, NECK_CENTER_DROP...). Es ajuste fino a ojo, no geometría derivada automáticamente, y queda documentado como "calibre aquí" en el propio archivo.

• 04El resto del sitio está pensado para white-label: color, marca, contacto y textos viven solo en theme.config.ts y copy.ts (Tailwind v4 sin t…+

  LEER EL DETALLE TÉCNICO

  El resto del sitio está pensado para white-label: color, marca, contacto y textos viven solo en theme.config.ts y copy.ts (Tailwind v4 sin tailwind.config, variables --store-* espejadas en los dos lugares), y ninguna pieza de catálogo depende de base de datos. Cada card de producto usa un componente Showcase, que es un efecto de vitrina de museo en CSS 3D puro (transform-style: preserve-3d, seis capas en profundidades distintas de translateZ, tilt que sigue el cursor vía useSpring de Framer Motion). Simula una pieza bajo vidrio y reflector sin nada de WebGL, y se desactiva automáticamente bajo prefers-reduced-motion.

CONSTRUIDO CON — Next.js · React 19 · TypeScript · Tailwind v4 · MediaPipe · Framer MotionCÓDIGO ↗

Espejo Virtual · try-on por cámara

PROYECTO PROPIO · WHITE-LABEL

[ QUIERO ALGO PARECIDO ]