AURÉA Joalheria

CONTEXTO

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

QUÉ SE HIZO

Vitrina editorial white-label con Espejo Virtual que prueba aretes y collares por la cámara en tiempo real (MediaPipe, 100% en el navegador) y lleva a WhatsApp ya con la referencia de la pieza.

ESPEJO VIRTUAL · TRY-ON POR CÁMARA

SOLUCIONES

• Try-on 100% client-side

  El FaceLandmarker de MediaPipe corre enteramente en el navegador. Ningún frame de video sale del dispositivo del cliente.

• Un único punto de verdad para WhatsApp

  Todo link wa.me pasa por waUrl() o productWaUrl(). Armar la URL a mano en componentes está prohibido.

• Joya dibujada, no recortada

  Aretes y collares son vectores en canvas con gradiente y EMA de suavizado, no fotos pegadas sobre el rostro.

• White-label sin tocar componentes

  Marca, colores, contacto y catálogo cambian de tienda a tienda tocando dos archivos de config.

DETALLE TÉCNICO

• 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…+

  Á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…+

  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…+

  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…+

  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.

PANTALLAS

RESULTADO

Vitrina editorial white-label con Espejo Virtual que prueba aretes y collares por la cámara en tiempo real (MediaPipe, 100% en el navegador) y lleva a WhatsApp ya con la referencia de la pieza.

QUIERO ALGO PARECIDO ↗ABRIR SITIO ↗