Arcanae Craft

Resumen

Mi Rol

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.

Tarjeta del comprador

Cada pedido lleva una tarjeta A6 en la caja. El frente agradece al comprador y dice cómo cuidar la pieza, y el reverso muestra los 22 Arcanos Mayores con un código QR hacia la colección completa.