Arcanae Craft | Case Study

Overview

Arcanae Craft makes statues of the 22 Major Arcana of the tarot, printed in resin and painted by hand in A Coruña, Spain, after the deck Pamela Colman Smith illustrated in 1909. The store had to do two things that usually pull against each other: show each statue like a piece in a gallery, in the classical look of the brand, and keep the path from the first screen to the checkout short and fast on a phone. It runs on the native Webflow Ecommerce, with the catalog, cart, checkout and shipping zones, and a lit 3D scene on the home.

My Role

I took the store from the first research to the published build. Customer reviews from shops in the niche and the competing stores shaped the copy, the FAQ and the price, and a keyword map set the search term of each page. I designed the visual language and a seven-step type scale, built every page as a coded prototype with the help of Claude Code and measured it at each breakpoint, and then rebuilt it in Webflow with Client-First classes, Variables, the CMS and the native Ecommerce, checking the published site against the prototype pixel by pixel.

Key Contributions

A Hero Lit Like a Gallery. The home opens on The Fool under a spotlight. The first frame is already a still image of the lit wall, so the page never shows an empty box while three.js loads; the live light then fades in over it, and devices without a graphics card keep the still. The intro that counts to 100 percent lives in the HTML from the first paint, and returning visitors and reduced motion skip it.

Scroll Motion That Holds Up. Near the end, a wheel of the 22 statues turns with the scroll, built with GSAP ScrollTrigger and Lenis. Two edge cases broke it and were fixed at the root: after a reload halfway down the page, CSS smooth scroll animated the jump ScrollTrigger uses to measure, so native scroll behavior stays on while Lenis runs; and with reduced motion the ring spilled into the next sections, so the reduced version removes only the motion and keeps the space the layout depends on.

A Cart One Tap Away. The native cart drawer lives in the navbar component on every page, the standard a store needs even at some cost in page speed. The glass effect of the menu trapped the drawer at the menu height, because a backdrop filter makes an element the containing block of its fixed children, so the blur moved to its own layer behind the menu. The checkout drops the store navigation and keeps only the brand, so nothing pulls the buyer away.

Product Pages Made for Choosing. The gallery zooms on hover and opens full size, each statue shows its height, the collection filters pieces in stock and made to order, and related pieces keep the visit going. Pieces still waiting for a 3D render show a single front image framed whole, never cropped.

Fast Images Without Losing Detail. The product photos came in through a CSV import, and Webflow creates no responsive versions for imported images, so the 2000 px original reached even a 107 px thumbnail. Uploading them again through the CMS fields brought back the responsive sizes, and with self-hosted fonts and the 3D loaded after the page, the product page is light on a phone.