Kevin O'Connell · Product Designer
ascendwave.com →In late 2025 I was walking down a street in Bologna, Italy when I noticed a shop window displaying decks of tarot cards. That got me thinking about the origins of tarot. It turned out that some of the earliest decks originated in that part of Italy. I bought a deck known as the "Thoth Deck." When I got back to my hotel, I noticed the deck was in Italian. "One more thing to learn," I thought.
I didn't know much about the subject. Reading further about the Thoth deck, I discovered that it draws on numerous traditions including alchemy, Kabbalah, Greek and Roman mythology, astrology, numerology, and color theory. The encoding and interplay of multiple complex systems intrigued me. Also, the cards are beautiful.
I became interested in learning about the cards and the various systems represented in them. Lying in bed one night I envisioned the deck mapped to a 3D sphere. I've done some 3D animation over the years, and I got wondering. What if I could harness Claude to create an entirely new experience, one which allows the participant to navigate the deck?
The deck has an inherent information architecture — 78 cards organized into a hierarchy of 22 Major Arcana and 56 Minor Arcana, the minor cards further subdivided by suit and rank. That structure presented design problems: How do you organize and navigate 78 objects, each with dense symbology? How do you present a "spread" or a "reading?" At first, Claude asked me about where I wanted the text input box. I explained that it should intuit the participant's question telepathically. — whether it does is up to you to determine. Initially the readings were too focused on the individual, when their question might be more broad, or general. I adjusted the prompt accordingly. I also needed to allow the reading to remain ambiguous instead of Claude trying to come to its own conclusions.
Designed by Aleister Crowley and painted by Lady Frieda Harris between 1938 and 1943, the deck not only contains rich symbology but is also highly structured. Every card's color, imagery, and iconography follows a precise assignment table derived from Kabbalistic and astrological tradition. That lends itself to a design system.
Since the imagery in the deck isn't licensed, I guided the generation of the cards according to the proper iconography, colors, Hebrew and astrological symbols. Every one of the 78 cards had to be illustrated from scratch, programmatically, in canvas.
The Tarot Sphere is a fully interactive 3D experience built in a single HTML file. It places all 78 cards of the Crowley Thoth Tarot deck on a rotating sphere, procedurally illustrated in canvas, with AI-generated card readings, PBR lighting, and fluid animation. The sphere is rendered in WebGL via Three.js, running entirely in the browser with no plugins or downloads. It runs live at ascendwave.com.
The project was built entirely through directed conversation with Claude over seven sessions over a month — no IDE, no codebase, no local dev environment. I directed the outcomes; Claude determined much of the architecture and generated the code that implemented them.
This case study is about what I learned directing that process.
The project had no client. The brief I gave myself: build an interactive system for exploring the Thoth deck that makes the cards' symbolic relationships navigable, surfaces their lore through AI, and does something visually that couldn't be done with a static page.
I gave Claude one sentence to start:
"Take the Crowley Thoth deck. Map the cards onto a 3D sphere. The cards and the sphere should be semi-translucent. Illuminate the sphere from within coming from an invisible light source. Enable dragging to spin the sphere."
No wireframes. No references. No technical specification. That sentence became the north star for everything that followed.
In the first iteration, I had Claude draw a simple sphere and map the cards onto it. The result was garish — colors were blown out, text was hard to read, the cards looked flat and harsh against the dark background. I thought back to my days as a 3D animator and directed it to use Phong shading, a lighting model that responds to surface normals and gives objects a sense of depth and material. The cards immediately became more legible and the scene gained the atmospheric quality I was after. That kind of cross-discipline retrieval — drawing on knowledge from a completely different context to solve a rendering problem — became a recurring pattern in how we worked together.
Something else became clear once the sphere was interactive: the Fibonacci spiral distribution Claude had chosen for placing the 78 cards was genuinely elegant mathematically — cards spread evenly with no clumping. But that perfection was itself a problem. The cards looked too regular, too grid-like, more like a diagram than a deck of cards strewn across a celestial surface. I iterated on the placement, introducing controlled randomness to the positions and orientations until the cards felt organically scattered — close enough to even that the sphere reads as complete, loose enough that it feels discovered rather than constructed.
The first output was a functional Three.js sphere with 78 canvas-textured card planes distributed via Fibonacci spiral. Cards showed suit colors, Roman numerals, and astrological glyphs. The sphere rotated. Light breathed from inside. It was primitive but it got the basics right — the Fibonacci distribution spread cards evenly across the surface with a mathematical precision I hadn't specified, and that decision held for the entire project.
Initially the cards were too perfect in their placement — too regular, too grid-like. I iteratively adjusted their randomness until they felt organically scattered: close enough to even that the sphere reads as complete, loose enough that it feels discovered rather than constructed.
Lady Frieda Harris's paintings are copyrighted and could not be used. That meant every card had to be generated from scratch. The 78 card textures are created procedurally from the card data, drawn onto canvas elements, and fed directly into the WebGL renderer. No downloads, no image assets, all runtime generation.
I also tested Gemini for card illustration. The results were visually stronger out of the box — richer, more painterly. But the output was bitmap files. With 78 cards, loading 78 bitmaps would have been far too heavy for a browser-based experience. I tried tracing the Gemini bitmaps as vectors to reduce the file size, but the traced output was not significantly smaller than the originals. The canvas approach won on performance grounds, even though it required considerably more iterative prompting to achieve acceptable visual quality.
Each major arcana card needed a recognizable figurative illustration — the Hanged Man inverted, Death with scythe, The Universe dancing in an oval of rotating matter. The approach that worked: treating the figures as layered flat vector shapes — torso, limbs, symbolic objects — each drawn as connected bezier paths. My direction was relentless and specific:
"The head is floating. Connect it to the neck. The Hanged Man is inverted — his head must be at the bottom of the card."
"The Tower needs masonry texture. Stone courses, arrow-slit windows, crenellations. It needs to feel like a medieval tower being struck by lightning."
The model learned my shorthand quickly. By the third session I was saying things like "same limb approach as the Chariot" and getting correct results.
An early problem was the Hebrew letters. Canvas rendering defaults to system fonts, and Hebrew characters were either missing, malformed, or displaying as fallback boxes depending on the browser. The fix was to explicitly load the Noto Serif Hebrew font and specify it in the canvas drawing call for each badge. Each major arcana card carries two corner badges: the Hebrew letter and the astrological symbol corresponding to that card's Kabbalistic attribution. I added a popover tooltip on hover giving a definition of each — wanting to understand the symbols myself as much as to surface them for others.
The Thoth deck has a precise color system derived from Liber 777 — Crowley's table of Kabbalistic correspondences. Queen Scale colors govern the major arcana. Suit elements govern the minor. These are not aesthetic choices; they are part of the system's meaning.
Initially the colors were wrong — the cards read as generic rather than symbolically correct. I directed that the precise color system from Liber 777 be applied to each card individually. The Fool's card is bright pale yellow — the color of Air. The High Priestess is silver-blue — the color of the Moon. Death is a specific blue-green — not because it is morbid, but because its Scorpio attribution demands it.
I came to the Thoth deck as a newcomer, not an expert. Rather than bringing pre-existing mastery of the symbolic systems, I worked with Claude to understand and correctly apply them — cross-referencing attributions, verifying color correspondences, ensuring the iconography was accurate to the tradition. The AI became a research partner as much as a production tool. The process has enabled me to learn not only about AI, but also tarot, and the systems embedded in the Thoth deck.
The "Draw Cards" feature pulls three random cards from the sphere using eccentric arc animations — flyers that launch from the sphere's surface, follow unpredictable cubic bezier paths, and land in a three-card spread overlay. The spread generates an AI reading via a Val Town proxy connected to Claude Haiku. Val Town is a lightweight cloud platform for running small server-side functions — it acts as a secure intermediary between the browser and the Anthropic API, keeping the API key out of the page source. Claude Haiku is Anthropic's fastest, most compact model, well suited to short generative tasks where speed and low latency matter.
The card animations didn't start that way. The first versions were linear — cards flew in perfectly straight lines at constant speed, which looked mechanical and lifeless. I iteratively directed Claude to introduce easing and to route the cards along eccentric paths, curving away from the direct route before landing. The result is that each card follows a different unpredictable arc, as though being swept by an unseen current before settling into place.
The reading prompt was refined over multiple iterations. The final version:
"Read this combination precisely — the subject may be anything or anyone, internal or external, personal or impersonal, abstract or concrete. Let the specific symbolism of these three cards determine everything... Do not soften difficult combinations. Do not resolve ambiguity."
That last line was important. Early readings defaulted to warm, encouraging language. The Thoth deck doesn't do that. I needed the model to hold the tension of difficult combinations without resolving them prematurely.
Perhaps the most interesting thing I learned is that models have innate biases — and that this is inevitable rather than incidental. It is not possible to exist without a point of view, a framework, a reference for the world. Claude's biases became evident in the card readings in two ways. First, it assumed the interaction would be text-based and offered to draw a text input field. Second, the initial tone of the readings assumed the questions would be personal — love, career, the concerns of an individual life — rather than broader questions about the world or current events. Both assumptions were reasonable defaults. Neither was right for this experience.
I was able to coach Claude out of both. On the input question, I explained that the cards should intuit the participant's question telepathically — no text field needed. Claude agreed without hesitation. On the reading tone, iterative prompt refinement steered it toward a more open, impersonal register that could accommodate any question, not just personal ones. The fact that Claude unflinchingly agreed to accept psychic input might cause some people to do a double take. I found it clarifying: the model is genuinely trying to serve the intent behind the instruction, not police its plausibility.
I learned that I can use the power of AI to generate interfaces that previously would have taken weeks or months to create. These experiences are lightweight and can be viewed in a web browser. I am excited about the possibilities this project has confirmed and points toward as the next stage in the evolution of interaction models and user experience.
Specificity mattered enormously. Vague direction produced vague results. "Make the Death card better" produced mediocre iteration. "The skeleton should occupy the full height of the card, scythe in the right hand crossing diagonally, roses at the bottom left" produced something I could work with. The more precisely I could articulate what I wanted — and what was wrong with what I had — the faster the collaboration moved.
The model also needed to know when it was wrong. Several bugs persisted until I pushed back explicitly: "This didn't work, why did you think it would?" That kind of friction improved the diagnosis and the fix held. Productive AI collaboration requires the designer to be a skeptical critic, not just a requestor.
I wanted to add a dynamic lighting effect. My first idea was an invisible light source orbiting the sphere every few seconds, illuminating the cards as it passed. This required converting the cards to a mesh and applying a PBR (physically based rendering) shader. At first the metalness was too high — the cards looked washed out, more mirror than card. Dialing it back brought the effect closer to what I wanted: a subtle sheen that catches the light without overwhelming the illustration.
Getting the light source to be truly invisible while still casting light took some trial and error. Once solved, the orbiting light created a satisfying sweep across the cards as it passed.
For additional visual interest I told Claude the sphere should be lit as though by flickering fire in a cave. That spiced things up considerably. The system uses four invisible point lights at fixed positions around the sphere, each flickering at its own independently randomized rate using irrational-ratio sine waves — so they never fall into sync with each other.
I then added two lights at opposite color temperatures — a warm amber and a cool blue — breathing independently at different rates. As the balance between them shifts, the whole scene undergoes a slow, subtle color temperature cycle. The sphere began to feel like a virtual movie set: camera, 3D model, and lights all working together.
A background in painting and art history proved useful — not only in interpreting the iconography and symbology of the cards, but in shaping the overall aesthetic of the experience. As I iterated on the lighting, layering different types of lights and materials, the sphere began to suggest the luminous colors of oriental rugs, of thangkas illuminated in the flickering lamps of a Buddhist monastery, or the jewel-like tones of Netherlandish paintings of the 15th century.
As a final touch, I created a ripple effect when the user spins the sphere. Using the nearest-neighbor method, each card flashes in turn until the final card fades out. To accentuate this effect, since it was getting washed out on Android due to how gamma is handled, I decided to programmatically dim the ambient lighting during this sequence, then fade the lights back up when it ends.
Getting there took several failed approaches. Three attempts to implement a specular glint effect via moving point lights produced a visible dark artifact — the transparent sphere shells' depth-sorting behavior created a shadow that traveled with the light source. Adding an environment map made it worse. Knowing when to abandon an approach proved as important as knowing how to implement one. The final solution was the invisible flickering lights: no moving source, no artifact, and a more convincing sense of dimensionality than the glint would have achieved anyway.
The sphere runs on desktop, tablet, and phone — the same single file, no separate builds. On desktop the experience is mouse-driven: drag to spin, hover to identify cards, click to zoom. On mobile the interaction shifts to touch, the spread stacks vertically and scrolls as a single full-screen panel, and the wide arc animations are replaced with straight zoom transitions that read more cleanly on a narrow viewport.
iPad presented its own challenges. At 768px it falls outside the mobile breakpoint and takes the desktop layout path, but its proportions and touch behavior are neither phone nor laptop. The spread cards were invisible on early iPad builds — a timing issue where the overlay's CSS fade hadn't completed before the card wraps were revealed behind it. Getting each platform to feel native rather than adapted took more iteration than expected.
The sphere is live at ascendwave.com. It runs on desktop, tablet, and phone — the same single file, no separate builds. The 78 cards are fully illustrated, the readings are live, and the experience works the way I envisioned it that night in Bologna: you spin the sphere, draw three cards and see what the reading makes of your question. Whether the cards are reading your question or you are reading the cards is, appropriately, left unresolved.
The more durable outcome is what the project confirmed about how I want to work. The combination of creative direction, domain curiosity, and close collaboration with an AI model produced something I could not have built any other way — and produced it in weeks rather than the months a conventional development process would have required. The speed at which an idea can become a working experience is going to change what gets made, and who makes it.
The Thoth deck sits within the same Western esoteric tradition as Theosophy. Viewed through that lens, the Tarot Sphere could be considered a thought-form — a physical or virtual manifestation of a concept from the human mind.
mediaferret@gmail.com
Additional case studies are available on request.