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
I've been designing a deck of cards for a while and thought Spline Hana was a great tool to showcase them. Cards are a perfect medium for a 2D to 3D effect on web. I made the material slightly metallic and holographic to give a etheric effect coupled with a Spline "look at" interaction. When you click on the stack they start to reveal more cards underneath.
woahhh 🔥
wonderful!
wow amazing
Here's a quick tutorial of how I created this! Comment below if you have any more questions 😄
thanks so much!
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
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😍
Still waiting to hear back from @Contra HQ
So I did what any designer would do: I made the card myself 😂
Brushed metal. Laser-engraved logo. Holographic Mastercard rings. Full 360° spin. I'm going to keep polishing this until the real one shows up in my mailbox. Your move, Contra 👀
(Concept / fan design, not an official Contra product..Yet 🙌 )
“Okay, this looks WAY too good 🔥 Contra needs to make this real 👀”
A little Three.js experiment — a torn-edge reveal built with a custom shader and Sobel edge detection.
I wanted the transition to feel more organic and physical than a typical image reveal.
The ragged torn edge feels much more physical than a standard wipe. Smart use of Sobel for it.