The Brief
As part of the Interactive Media track at MCAST Institute for the Creative Arts, the task was to design and build an educational simulator that teaches advanced card-counting and blackjack mathematical probabilities.
Conceptual Development
The design language is centered on a tactile, modern blackjack interface. By utilizing emerald green accents and semi-transparent HUD modules, the user is immersed in an interface that feels clean and highly interactive. The color scheme features deep zinc text and warm borders, creating a cohesive, high-end aesthetic.
Animation Choreography
To make the deck manipulation feel tangible, GSAP and ScrollTrigger were selected to handle spatial animations:
- Card Distribution: Cards slide and rotate dynamically from the shoe container onto the player/dealer slots using complex bezier paths.
- Card Flipping: Cards feature detailed 3D flip animations using CSS transform perspective and GSAP timing.
- HUD Metric Shifts: Score counters and card-counting parameters scale up momentarily when their values change, giving immediate visual feedback.
Key Learnings
Implementing this project reinforced the importance of registering GSAP plugins safely in SSR-aware frameworks like Astro, ensuring client-side objects only execute once the document object model is fully initialized.