HT.
ID
EN
/MJS Spin The Wheel
InteractiveTypeScript

MJS Spin The Wheel

An interactive digital fortune wheel game for event giveaways - allowing users to spin for prizes with probability weights and real-time inventory tracking.

Spin the Wheel x In-Lite - Welcome Kiosk
Spin the Wheel x In-Lite - Input Data Form
Spin the Wheel x In-Lite - Ready to Spin
Spin the Wheel x In-Lite - Deceleration Spin
Spin the Wheel x In-Lite - Landing on Prize
Spin the Wheel x In-Lite - Winner Confetti Dialog
Spin the Wheel x In-Lite - Reward Claim QR Code
1 / 7
Overview

MJS Spin the Wheel is a digital fortune wheel application developed for exhibition booth engagement. Visitors register with their name/email, then tap to spin the wheel for a chance to win various branded merchandise. The backend manages segment configurations, prize titles, custom slice colors, and precise winning probabilities. It also implements strict daily inventory caps to prevent high-value prizes from running out too early. Frequently integrated as the final reward stage of the Memory Card or Scream Challenge games.

Problem

Traditional paper ticket giveaways or offline raffle draws at events are boring, hard to coordinate, suffer from high admin overhead, and provide no real-time way to limit high-value prize distributions dynamically.

Solution

An interactive touch-screen spin wheel that features physical inertia deceleration and celebration sound effects. Admins set prize limits and probability weights via the dashboard, ensuring prizes are distributed evenly throughout the event duration while automatically logging winner contact info.

Highlights
  • Physics-based kinetic wheel spin and friction slowing animation
  • Configurable prize probabilities and stock limits to prevent over-giving
  • Unique coupon code generator for prize validation and checkout
  • Integrated sound effects for tick markers and winning fanfare (Howler.js)
  • Fully responsive design for portrait kiosk screens or mobile devices
  • Supabase logging for analytics and winner tracking
Features
Welcome screen with quick user email/phone registration
Dynamic canvas-rendered wheel with custom slice colors and text sizing
Tap-to-spin gesture and physics-simulated rotation deceleration
Interactive winning confetti overlay on landing
Unique verification code display and QR code generator for claim desk
Admin control panel to manage prize inventory, labels, and odds
Offline synchronization buffer in case of event network dropouts
Tech Stack
Next.jsReactTypeScriptTailwind CSSFramer MotionSupabaseHowler.js