In the ever-evolving world of online casinos, gamification is one of the most powerful tools to keep players engaged. While many sites offer slot games and bonuses, very few invest in interactive experiences like custom-built games. That’s exactly what I aimed to change on eniyicasino.org, a site where I compare online casinos and review slot games.
Recently, I created a fully custom-built spinning wheel game — inspired by classic bonus wheels found in many slots — but coded entirely from scratch using SolidJS, TypeScript, and a sprinkle of GSAP for animation.
⸻
🛠️ The Motivation Behind the Wheel
Most online casino platforms rely on embedded iframe games provided by developers like Pragmatic Play or Relax Gaming. While this works, it doesn’t allow much flexibility or creativity for user interaction outside of playing slots.
I wanted to design something:
• Lightweight and fast
• Entirely frontend (no server-side logic)
• Customizable with prize pools and animation timing
• Flexible enough to be used daily or for promotional events
⸻
🧱 How the Game Works
The spinning wheel game I created is entirely browser-based. Users can spin once per day, and the prize they win is determined by probability weights assigned to each segment.
Here’s a simplified breakdown of the core logic:
• The rewards are stored in a local configuration file
• A weighted random function selects the reward based on custom probability percentages
• The wheel spins using GSAP animation with smooth deceleration
• The rotation ends at the exact angle needed for the selected reward to appear at the top
• A popup displays the prize
• A localStorage key prevents multiple spins per day
The entire UI is built in SolidJS, which allowed me to create reactive state management and animation coordination with minimal re-renders.
⸻
🎨 Design & Animation
Using GSAP (gsap.to), I animated the wheel rotation with natural easing. I also designed a “bounce effect” at the end of the spin to simulate physical momentum, making the interaction feel realistic and rewarding.
Each reward has its own color slice, icon, and label. The pointer is fixed while the wheel rotates beneath it — all handled with CSS transforms and rotate() logic.
⸻
🔗 Want to Try It?
You can try the wheel live on the site here:
👉 [https://eniyicasino.org/]
If you’re a developer or an operator who’d like to implement something similar on your own platform — feel free to contact me via eniyicasino.org.
I’m open to collaboration, white-label licensing, or just geeking out about interactive casino experiences!
⸻
🔍 Closing Thoughts
Building custom tools like this adds personality and uniqueness to a site. It not only improves user engagement, but also provides developers like us a chance to showcase creativity beyond basic content.
If you’re working on your own gamified experience or want to discuss ideas, feel free to connect. Let’s build better user experiences — one spin at a time 🎯
Top comments (0)