Arcana: Interactive Creative Web Exploration

A three-card tarot spread where every face is unique procedural sigil-art, woven into one reading.

I built this project to test a three-card tarot spread where every face is unique procedural sigil-art, woven into one reading. The goal was simple: push interactive browser rendering using HTML5 Canvas and see how smoothly the system responds to direct user interaction.

WHAT I WAS TESTING: I wanted to focus on two core engineering aspects:

Procedural generation of unique runic card sigils from mathematical formulas

Dynamic typography and card flipping choreography without heavy 3D frameworks

THE TECHNICAL SIDE: The card faces render directly onto an HTML5 Canvas using polar coordinate trigonometric curves and procedural geometry. Every draw call is computed dynamically without image textures or external SVGs. Everything runs in the browser using HTML5 Canvas, Procedural Sigil Geometry, Seeded Randomness. No plugins, no heavy dependencies, and no external tracking.

WHAT I LEARNED: Balancing procedural symmetry with organic irregularity was the main hurdle. Pure mathematical curves looked too synthetic, so adding minor pseudo-random offsets gave the sigils their handcrafted appearance. Finding the sweet spot between mathematical precision and tactile visual feedback took several iterations, but the end result runs consistently at 60 FPS.

TRY IT YOURSELF: The live experiment is deployed on Netlify. You can open it in any modern browser, interact with the controls, and test the response times.

If you are working on similar 3D, physics, or creative web projects and want to collaborate, message me here on Contra.

cinematic💯 . Nice work😍

Car Rental App & Web — 35% Faster Bookings, Built from Scratch🔥

Professional work