The Challenge
The client's existing slot game had a simple free-spin bonus — the reels just spun 10 times for free. Player retention during bonus rounds was low, and the studio wanted something memorable and share-worthy.
Three Bonus Modes
I designed and built three distinct bonus systems, each sharable via the base game's trigger system:
1. Pick-Em Bonus
A 3×3 grid of mystery items. Players click to reveal prizes — coin values, multipliers, or a "collect" symbol that ends the round. Built entirely in PixiJS with InteractionManager events. Items use Spine animations for idle shimmer, select, and reveal states.
2. Free Spin Multiplier Trail
A 5-stop trail displayed above the reels. Each free spin advances the player one step along the trail, increasing a persistent multiplier. The trail is a custom PIXI.Graphics path with animated fill using a masked gradient sprite.
3. Wheel of Fortune Overlay
A full-canvas spinning wheel overlay triggered as a super bonus. The wheel uses a physics-inspired deceleration curve driven by GSAP. The winning segment is determined server-side before the spin starts — the GSAP target rotation is calculated to land exactly on that segment.
State Machine Architecture
All three bonus modes share a single BonusStateMachine built with XState. States include: INTRO, PLAYER_TURN, AWAITING_SERVER, REVEAL, ADVANCE, OUTRO. This eliminated the nested if/else logic that plagued the previous implementation and made adding new bonus types trivial.
Result
Average session length during the bonus round increased from 45 seconds to over 2 minutes. Social sharing of big-win screenshots increased noticeably within the first month of release.