The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
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😍
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Related posts
I built Webmaster 95 as a living component library for a 1990's retro design system. It recreates the classic Windows 95 desktop look. The website is built with plain HTML, CSS, and vanilla JavaScript. It uses zero npm dependencies and zero build tools. All five font files are inside the local folder. It runs completely offline.
The page includes a color mixer. It updates modules on click and checks brightness so text stays readable. The tabs work with keyboards, including the arrow keys, Home button, and End key. A visitor counter with a dark and green effect (similar to Matrix).
I also added an audio easter egg button. It plays...something (go check it out, you'll like it) using the Web Audio API. The guestbook takes your name and message on the spot. It shows new posts right at the top of the list with a real time and text.🔥 😊
Nordlys is an Arctic expedition website set in Tromsø, Norway. The background is a live northern lights simulation. I wrote it in HTML5 Canvas with layered noise math. Video clips look repetitive after a few seconds, but this code runs at 60 frames a second and never repeats the same shape.
On top of the sky, I built a field console. It displays local coordinates, temperatures, solar wind speeds, and geomagnetic Kp levels. There is also a packing tool for winter crossings. You can check off coats, tents, and tools, and the app tracks your total pack weight down to the gram.
The main problem was contrast. Early on, the green aurora light was too bright. It made the white headlines and data tables impossible to read. I moved the bright waves down near the horizon and kept the upper sky nearly black. That gave the text plenty of room to breathe. Small details helped a lot too, especially scale ticks, metric units, and sensor clocks on the dials.😊
Orikata is an online shop for a paper studio. The studio is based in Kyoto and Portland. The hero section shows a 3D paper craft. The paper folds and opens using pure CSS. It uses flat looking shapes and CSS 3D animations. The site does not load any heavy 3D models or interactions.
The shop sells folding kits and paper crafts. Product cards shows technical diagrams. These cards show folding lines, steps, and difficulties.
Users can add them to a live cart. The cart runs on vanilla JavaScript. The item count updates instantly without a page refresh. Visitors can also check seat openings for in-person experience. The design uses light and cream paper colors with purple/indigo accents.
The CSS fold motion looks cool but took work. The shapes rotate along confusing angles at the start. When all parts folded at the exact same speed, it looked stiff and resembled a poor design. I had to delay the folding animations by a fraction of a second. That small but frustrating delay made the paper movement look premium and natural.😊
