Arcanae Craft | Caso de Estudio

Resumen

Arcanae Craft hace estatuas de los 22 Arcanos Mayores del tarot, impresas en resina y pintadas a mano en A Coruña, España, a partir de la baraja que Pamela Colman Smith ilustró en 1909. La tienda tenía que hacer dos cosas que suelen chocar: mostrar cada estatua como una pieza de galería, con el aspecto clásico de la marca, y mantener corto y rápido en el móvil el camino de la primera pantalla al checkout. Funciona con el Webflow Ecommerce nativo, con catálogo, carrito, checkout y zonas de envío, y una escena en 3D iluminada en la home.

Mi Rol

Llevé la tienda de la primera investigación al sitio publicado. Reseñas de clientes de tiendas del nicho y las tiendas competidoras definieron el copy, el FAQ y el precio, y un mapa de palabras clave fijó el término de búsqueda de cada página. Diseñé el lenguaje visual y una escala tipográfica de siete pasos, construí cada página como prototipo en código con la ayuda de Claude Code y la medí en cada breakpoint, y luego lo rehíce todo en Webflow con clases de Client-First, Variables, el CMS y el Ecommerce nativo, comparando el sitio publicado con el prototipo píxel a píxel.

Contribuciones Clave

Una portada iluminada como una galería. La home abre con El Loco bajo un foco de luz. El primer fotograma ya es una imagen fija de la pared iluminada, así que la página nunca muestra una caja vacía mientras carga three.js; la luz en vivo aparece encima, y los dispositivos sin tarjeta gráfica se quedan con la imagen fija. La introducción que cuenta hasta el 100 por ciento está en el HTML desde el primer pintado, y quien vuelve o usa movimiento reducido se la salta.

Movimiento de desplazamiento que no falla. Cerca del final, una rueda con las 22 estatuas gira con el desplazamiento, hecha con GSAP ScrollTrigger y Lenis. Dos casos límite la rompieron y se corrigieron en la causa: tras recargar a mitad de página, el desplazamiento suave del CSS animaba el salto que ScrollTrigger usa para medir, así que el comportamiento nativo queda activo mientras corre Lenis; y con movimiento reducido el anillo invadía las secciones siguientes, así que la versión reducida quita solo el movimiento y conserva el espacio del que depende el layout.

Un carrito a un toque. El cajón del carrito nativo está en el componente de la navbar en todas las páginas, el estándar que una tienda necesita aunque cueste algo de velocidad. El efecto de vidrio del menú atrapaba el cajón a la altura del menú, porque un backdrop filter convierte al elemento en el bloque contenedor de sus hijos fijos, así que el desenfoque pasó a una capa propia detrás del menú. El checkout quita la navegación de la tienda y deja solo la marca, para que nada distraiga a quien compra.

Páginas de producto hechas para elegir. La galería amplía al pasar el ratón y se abre a tamaño completo, cada estatua muestra su altura, la colección filtra las piezas en stock y las hechas por encargo, y las piezas relacionadas mantienen la visita. Las piezas que aún esperan un render en 3D muestran una sola imagen frontal, entera, nunca recortada.

Imágenes rápidas sin perder detalle. Las fotos de los productos entraron por una importación de CSV, y Webflow no crea versiones responsivas de las imágenes importadas, así que el original de 2000 px llegaba incluso a una miniatura de 107 px. Subirlas de nuevo por los campos del CMS recuperó los tamaños responsivos y, con fuentes servidas por el propio sitio y el 3D cargado después de la página, la página de producto quedó ligera en el móvil.